jquery获取元素节点
文章描述:
jquery如何获取元素的节点信息
html
<div class="loop">
<ul class="list">
<li class="l1"><a data-id="1"><h2>标题1</h2></a><span>时间</span><input type="button" class="btn b1"/></li>
<li class="l2"><a data-id="2"><h2>标题2</h2></a><span>时间</span><input type="button" class="btn b2"/></li>
<li class="l3"><a data-id="3"><h2>标题3</h2></a><span>时间</span><input type="button" class="btn b3"/></li>
</ul>
</div>
$(this)表示当前元素
父节点
script
$('.btn').on('click',function(){
console.log($(this).attr('class'))
});
父节点
parent()
console.log($(this).parent().attr('class'))
全部父节点
parents()
console.log($(this).parents().attr('class'))
指定父节点
parents(".l2")
console.log($(this).parents(".l2").attr('class'))
子节点
script
$('.list li').on('click',function(){
});
全部子节点
children()
console.log($(this).children());
指定子节点
children('.btn2')
console.log($(this).children('.btn2'));
指定
prev()
上一个兄弟节点
next()
下一个兄弟节点
find()
指定标签或者ID、类名
console.log($(this).find("a").attr('data-id'));
元素筛选
$("ul li").eq(1).find('span').css({'color':'red'});
选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
$("ul li").first().find('span').css({'color':'red'});
选取ul li中第一个元素
$("ul li").last().find('span').css({'color':'red'});
选取ul li中最后一个元素
$("ul li").slice(1,4).find('span').css({'color':'red'});
选取第2 ~ 4个元素
$("ul li").filter(":even").find('span').css({'color':'red'});
选取ul li中所有奇数顺序的元素
发布时间:2022/02/21
发表评论