<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li id="li1">1</li>
<li class="li2">2</li>
<li name="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
// 筛选器 : 在通过选择器获取的标签对象伪数组的基础上,再次筛选出需要的标签内容
// 筛选器的执行结果,也是一个伪数组
// 筛选器是在通过选择器获取的伪数组基础上,再次筛选
// 筛选器是为了链式编程服务
// $(‘ul>li‘) 在 获取的 ul中li 的伪数组基础上,再次筛选
// 伪数组中的第一个
console.log( $(‘ul>li‘).first() );
// 伪数组中的最后一个
console.log( $(‘ul>li‘).last() );
// 伪数组中按照索引下标筛选
console.log( $(‘ul>li‘).eq(2) );
// 伪数组中,当前标签的上一个兄弟标签
console.log( $(‘ul>li‘).eq(2).prev() );
// 伪数组中,当前标签的下一个兄弟标签
console.log( $(‘ul>li‘).eq(2).next() );
// 伪数组中,当前标签之前的所有兄弟标签,顺序是就近顺序
console.log( $(‘ul>li‘).eq(2).prevAll() );
// 伪数组中,当前标签之后的所有兄弟标签,顺序是就近顺序
console.log( $(‘ul>li‘).eq(2).nextAll() );
// 伪数组中,当前标签的所有兄弟标签,顺序是从第一个开始
console.log( $(‘ul>li‘).eq(2).siblings() );
// 伪数组中,当前标的直接父级标签,就一层
console.log( $(‘ul>li‘).eq(2).parent() );
// 伪数组中,当前标的所有父级标签,有几层算几层
console.log( $(‘ul>li‘).eq(2).parents() );
// 伪数组中,当前标签的索引下标
console.log( $(‘ul>li‘).eq(2).index() );
console.log( $(‘ul‘).find(‘#li1‘).index() );
// 在父级标签中,按照条件筛选,找子级标签中,符合条件的标签对象
// 条件是任意的html,css支持的语法形式
console.log( $(‘ul‘).find(‘#li1‘) );
console.log( $(‘ul‘).find(‘.li2‘) );
console.log( $(‘ul‘).find(‘[name="li3"]‘) );
</script>
</body>
</html>
