了解jQuery ，jQuery 选择器和筛选器总结

在说选择器和筛选器之前，首先我们来了解一下什么是jQuery：

jQuery 的简介

什么是jQuery

jQuery是 一个前端的方法库
也就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能

jQuery的网站

官网 : https://jquery.com/

中文网站 : http://jquery.cuishifeng.cn/

jquery的三大优点

1. 强大的选择器机制 — 方便获取标签对象
2. 优质的隐式迭代 — 默认对数组中的所有标签,进行操作
3. 无所不能的链式编程 — 再复杂的操作,一行代码搞定

如何使用jquery

1. 通过外部程序,加载jQuery文件
   可以是本地文件,也可以是网上的文件
2. 通过 $ 或者 jQuery 的形式 来调用执行jQuery中定义的方法

实例

<script src="./jquery.min.js"></script>
<script>
    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>

这里，直接输出选择器获取到的标签：

通过标签名称

console.log($('div'));

通过id属性值

console.log($('#div1'));

通过class属性值

console.log($('.div1'));

通过标签属性和属性值

$('[属性="属性值"]')
console.log($('[name="div1"]'));

通过标签结构 ul中的所有子级li

console.log($('ul>li'));

通过伪类选择器

ul中子级第一个li

console.log($('ul>li:first'));

ul中子级最后一个li

console.log($('ul>li:last'));

ul中子级li,索引下标是奇数的标签

console.log($('ul>li:odd'));

ul中子级li,索引下标是偶数的标签

console.log($('ul>li:even'));

ul中子级li,索引下标是2的标签

console.log($('ul>li:eq(2)'));

当然，像nth-of-type()，nth-child()这样的css中的结构性伪类选择器当然jQuery也是能用的，这里就不一一列举了，用法与上面类似。

总结

总结1

只要是标签有的,只要是css能写的,都可以作为获取标签对象的方法
获取到的是标签对象伪数组

获取到的是一个伪数组
可以像javascript中的forEach那样循环遍历,但是要用jQuery的each方法,不能用JavaScript的forEach语法
for...in,可以使用,但是获取到的内容,太多太多了,我们也不用

实例

$('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语法形式

实例

// 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标签

$('ul>li');

li标签伪数组中,第一个标签对象,也是伪数组

console.log( $('ul>li').first() );

li标签伪数组中,最后一个标签对象,也是伪数组

console.log( $('ul>li').last() );

li标签伪数组中,按照索引下标获取

console.log( $('ul>li').eq(2) );  // 索引是2的第三个标签

当前标签在伪数组中的索引下标

console.log( $('ul>li').eq(2).index());

当前标签的上一个兄弟标签

// $('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定义的条件来查询

// 在父级标签中,按照条件找子级标签
// find中的条件语法就像$()获取标签的语法一样，可以是id、class名、属性和属性值等等
console.log( $('ul').find('[name="li5"]') );

当前标签的所有子级标签

console.log($('ul').children());