在说选择器和筛选器之前，首先我们来了解一下什么是jQuery：
jQuery 的简介
什么是jQuery
jQuery是 一个前端的方法库
也就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能
jQuery的网站
官网 : https://jquery.com/
中文网站 : http://jquery.cuishifeng.cn/
jquery_9">jquery的三大优点
- 强大的选择器机制 — 方便获取标签对象
- 优质的隐式迭代 — 默认对数组中的所有标签,进行操作
- 无所不能的链式编程 — 再复杂的操作,一行代码搞定
jquery_13">如何使用jquery
- 通过外部程序,加载jQuery文件
可以是本地文件,也可以是网上的文件 - 通过 $ 或者 jQuery 的形式 来调用执行jQuery中定义的方法
实例
<script src="./jquery.min.js">javascript"></script>
<script>javascript">
console.dir($);
console.dir(jQuery);
</script>
jQuery 的选择器
JavaScript中,有JavaScript获取标签的方式
有的是一个标签对象,有的是一个标签对象的伪数组
document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
document.querySelector
document.querySelectorAll
jQuery中,也有自己获取标签对象的方式
即时只有一个符合的标签,获取的结果,也是一个伪数组
不管怎么获取,获取到的都是一个伪数组
以下面的HTML代码为前提，来看看jQuery的选择器有哪些：
<div id="div1" class="div1" name="div1"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
这里，直接输出选择器获取到的标签：
通过标签名称
javascript">console.log($('div'));
通过id属性值
javascript">console.log($('#div1'));
通过class属性值
javascript">console.log($('.div1'));
通过标签属性和属性值
javascript">$('[属性="属性值"]')
console.log($('[name="div1"]'));
通过标签结构 ul中的所有子级li
javascript">console.log($('ul>li'));
通过伪类选择器
ul中子级第一个li
javascript">console.log($('ul>li:first'));
ul中子级最后一个li
javascript">console.log($('ul>li:last'));
ul中子级li,索引下标是奇数的标签
javascript">console.log($('ul>li:odd'));
ul中子级li,索引下标是偶数的标签
javascript">console.log($('ul>li:even'));
ul中子级li,索引下标是2的标签
javascript">console.log($('ul>li:eq(2)'));
当然，像nth-of-type()，nth-child()这样的css中的结构性伪类选择器当然jQuery也是能用的，这里就不一一列举了，用法与上面类似。
总结
总结1
只要是标签有的,只要是css能写的,都可以作为获取标签对象的方法
获取到的是标签对象伪数组
获取到的是一个伪数组
可以像javascript中的forEach那样循环遍历,但是要用jQuery的each方法,不能用JavaScript的forEach语法
for...in,可以使用,但是获取到的内容,太多太多了,我们也不用
实例
javascript">$('ul>li').forEach(function(item){
console.log(item); // 会报错
})
for(let i in $('ul>li')){
console.log( i );
}
总结2
jQuery获取的标签对象,不要直接使用JavaScript的语法形式来操作
JavaScript的标签对象,也不要直接使用jQuery的语法形式来操作
这是两种完全不同的语法形式,获取到的标签对象,也完全不同
但是可以相互转化
jQuery标签对象[索引下标] --- 转化为指定的标签对象,就可以使用对应的JavaScript语法形式
$(JavaScript标签对象) --- 转化为jQuery标签对象,可以使用jQuery语法形式
实例
javascript">// jQuery语法获取的所有ul中子级li标签
console.log($('ul>li')) ;
// jQuery语法获取的所有ul中子级li标签,其中索引是0的指定标签
console.log($('ul>li')[0]);
// 通过JavaScript语法,获取到一个标签对象
const oDiv = document.querySelector('div');
console.log(oDiv);
// 转化为jQuery标签伪数组
console.log( $(oDiv) );
jQuery 的筛选器
什么是jQuery的筛选器
在通过选择器,获取到标签对象的基础上,再来进行筛选,选择出符合条件的标签对象
筛选器一定是在选择器的基础上使用
为了链式编程方便
筛选器的执行结果,也一定是一个伪数组
筛选器
还是以下面的HTML代码为样板来演示各筛选器的语法：
<ul>
<li></li>
<li></li>
<li name="li5"></li>
<li></li>
<li></li>
</ul>
获取ul中,所有子级li标签
javascript">$('ul>li');
li标签伪数组中,第一个标签对象,也是伪数组
javascript">console.log( $('ul>li').first() );
li标签伪数组中,最后一个标签对象,也是伪数组
javascript">console.log( $('ul>li').last() );
li标签伪数组中,按照索引下标获取
javascript">console.log( $('ul>li').eq(2) ); // 索引是2的第三个标签
当前标签在伪数组中的索引下标
javascript">console.log( $('ul>li').eq(2).index());
当前标签的上一个兄弟标签
javascript">// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).prev() 索引是2的第三个标签的上一个兄弟标签,也就是索引是1的第二个标签
console.log( $('ul>li').eq(2).prev() );
当前标签的下一个兄弟标签
javascript">// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).next() 索引是2的第三个标签的下一个兄弟标签,也就是索引是3的第四个标签
console.log( $('ul>li').eq(2).next() );
当前标签之前的所有兄弟标签
javascript">// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).prevAll() 索引是2之前的所有标签
console.log( $('ul>li').eq(2).prevAll() );
当前标签之后的所有兄弟标签
javascript">// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).nextAll() 索引是2之后的所有标签
console.log( $('ul>li').eq(2).nextAll() );
当前标签的所有兄弟标签,不管前后
javascript">// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).siblings() 除索引是2的所有兄弟标签
console.log( $('ul>li').eq(2).siblings() );
当前标签的直接父级标签
javascript">console.log( $('ul>li').eq(2).parent() );
当前标签的所有父级标签
javascript">console.log( $('ul>li').eq(2).parents() );
根据条件来查找jQuery,标签伪数组中符合的标签
在ul标签中,find定义的条件来查询
javascript">// 在父级标签中,按照条件找子级标签
// find中的条件语法就像$()获取标签的语法一样，可以是id、class名、属性和属性值等等
console.log( $('ul').find('[name="li5"]') );
当前标签的所有子级标签
javascript">console.log($('ul').children());
