<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li name="li5">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
// 什么是jQuery的筛选器
// 在通过选择器,获取到标签对象的基础上,再来进行筛选,选择出符合条件的标签对象
// 筛选器一定是在选择器的基础上使用
// 为了链式编程方便
// 筛选器的执行结果,也一定是一个伪数组
// 获取ul中,所有子级li标签
$('ul>li');
// li标签伪数组中,第一个标签对象,也是伪数组
console.log( $('ul>li').first() );
// li标签伪数组中,最后一个标签对象,也是伪数组
console.log( $('ul>li').last() );
// li标签伪数组中,按照索引下标获取
console.log( $('ul>li').eq(2) );
// 当前标签的上一个兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).prev() 索引是2的第三个标签的上一个兄弟标签,也就是索引是1的第二个标签
console.log( $('ul>li').eq(2).prev() );
// 当前标签的下一个兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).next() 索引是2的第三个标签的下一个兄弟标签,也就是索引是3的第四个标签
console.log( $('ul>li').eq(2).next() );
// 当前标签之前的所有兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).prevAll() 索引是2之前的所有标签
console.log( $('ul>li').eq(2).prevAll() );
// 当前标签之后的所有兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).nextAll() 索引是2之后的所有标签
console.log( $('ul>li').eq(2).nextAll() );
// 当前标签的所有兄弟标签,不管前后
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).siblings() 除索引是2的所有兄弟标签
console.log( $('ul>li').eq(2).siblings() );
// 当前标签的直接父级标签
console.log( $('ul>li').eq(2).parent() );
// 当前标签的所有父级标签
console.log( $('ul>li').eq(2).parents() );
// 根据条件来查找jQuery,标签伪数组中符合的标签
// $('ul').find(条件)
// 在ul标签中,find定义的条件来查询
// 在爹中,按照条件找儿子
console.log( $('ul').find('[name="li5"]') );
</script>
jQuery的筛选器
最新推荐文章于 2023-06-15 13:33:23 发布