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

发表评论