jQuery基础——选择器的补充方法——过滤方法、查找方法

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

这期主讲过滤方法。

什么是过滤方法？

下面详细展开说说。

---

在之前的学习中，我们已经接触到了大量的选择器，包括基本选择器、伪类选择器等方法用于选择、操作元素。

但实际上，我们还可以使用“方法”的形式来选择、操作元素。

这种“方法”跟函数方法很类似，主要包含过滤方法和查找方法，这两个方法跟之前学习的选择器是互补的关系。

下面，我们先详细说说过滤方法。

过滤方法

常见的过滤方法：

类名过滤：hasClass()

下标过滤：eq()

判断过滤：is()

反向过滤：not()

表达式过滤：filter()、has()

下面展开细说。

类名过滤：hasClass()

判断元素是否含有指定Class属性来过滤。

语法：$().hasClass("类名")

返回值是布尔值，包含则返回true，否则返回false。

下标过滤：eq()

看到eq，是不是感觉很熟悉？是不是哪里见过似的？

在jQuery基础-伪类选择器-位置选择器里面，我们已经提到过：

:eq(n)：选取第n个元素，从0开始

下标跟位置的概念是差不多的。

两者的区别：

一个是伪类，一个是方法：

语法：$().eq(n)

n可以取值为正，也可以取值为负。

取值为正时，范围是从0开始，正方向获取。

取值为负时，范围是从-1开始，反方向获取。

疑问：既然都有了伪类，而且两者可以互相替代，那为什么还有过滤方法？

因为过滤方法是对选择器的补充。

但怎么补充，本上没说。

判断过滤：is()

is的中文：是。

根据条件进行判断过滤。

语法：$().is(Selector)

参数Selector是一个选择器。

is()方法用于判断条件是否满足，返回值是布尔值。

使用场景：全选/反选。

注意：如果我要判断元素内是否存在某个类名，是用hasClass()方法还是is()方法呢？

优先使用hasClass()方法，因为它效率更高，专业性强。

而is()方法内集成了很多方法，导致效率低，性能不行。

反向过滤：not()

在前面学习的时候，可以发现hasClass()和is()方法都是过滤出符合条件的元素，那么有没有一种能够过滤出不符合条件的元素，只留下符合条件的元素？

这就是not()方法。

语法：$().not(selector / fn)

not()方法的参数是一个选择器时，表示使用选择器过滤出不符合条件的元素，然后选取其他符合条件的元素。

not()方法的参数是一个函数时，表示使用函数过滤出不符合条件的元素，然后选取其他符合条件的元素。

还是在jQuery基础-伪类选择器-其他伪类选择器里面，我们提到了：

:not(selector)：选取除了某个选择器之外的所有元素

跟eq()方法和:eq()选择器类似，not()方法和:not()选择器也是一样的关系。

表达式过滤：filter()、has()

表达式过滤，表示采用自定义表达式的方式来选取符合条件的元素。

这种自定义表达式可以是选择器，也可以是函数。

filter()

语法：$().filter(seletor / fn)

参数Selector是一个选择器，参数fn是一个回调函数。

尽管参数不一样，但返回值都是过滤后的元素。

filter()方法很强大，所以能使用别的过滤方法时，就尽量使用别的过滤方法。

---

has()

has()方法没有filter()方法那么强大，但是性能更优秀——封装的东西更少。

语法：$().has(selector)

注意has()方法是参数Selector是一个选择器，参数里面没有函数。

has()和filter()方法功能类似，可以看作是filter()方法的精简版。

---

以上就是所有过滤方法的内容。

下面说说JQ选择器的另外一种补充方法——查找方法。

---

查找方法

什么是查找方法？

其实就是选择某个元素之后，查找它的“族谱关系”。

简而言之，就是：

查找祖先元素

查找后代元素

查找兄弟元素

看到没有，全是“族谱关系”。

查找祖先元素

祖先一般包括啥？

父元素、爷元素。

方法有以下三种：

parent()

parents()

parentsUntil()

这三个有啥区别？下面展开细说。

parent()

没有s，说明是当个。

parent中文，父母，也就是找父元素。

注意：一个元素只有一个父元素。

语法：$().parent(selector)

Selector是可选的参数，是一个选择器，用来查找符合条件的父元素，返回值就是这个父元素。

参数省略时，父元素不需要满足任何条件；参数存在时，父元素需要满足指定条件。

parents()

我们一般只说父元素，不会说父母元素。

那么这个加s的是什么意思？

其实就是查找当前元素的祖先元素，也就是说，找的不只是父元素了，还找一下其他祖先元素。

语法：$().parents(seletor)

Selector是一个可选参数，也是一个选择器；作用不作过多说明了。

跟parent()的返回值不一样，parents()的返回值是一个JQ对象集合。

要注意DOM对象和JQ对象的区别。

之后会详细说明这两个的区别。

parentsUntil()

until是啥意思？

在JQ中，parentsUntil()是对parents()方法的一个补充，它可以查找“指定范围”中所有的祖先元素，也就是相当于在parents()方法返回的JQ对象集合中截取一部分。

语法：$().parentsUntil(selector)

Selector是一个可选参数，也是一个选择器，用来筛选符合条件的祖先元素。

一般来说，我们在使用parents()方法时，不会带上参数；要不然parentsUntil()有啥用？

当然啦，既然parents()方法支持参数，所以我们也很少多写一个方法。

查找后代元素

跟查找祖先元素一样，查找后代元素依旧是有三种：

children()

find()

contents()

注意：context和content的区别。

children()

只能用于查找子元素，不能查找其他后代元素。

不同于父元素只有一个，子元素可以有多个。

语法：$().children(selector)

Selector是一个可选参数，也是一个选择器，作用不多解释。

要是我想查找后代元素该怎么办？

find()

find()不仅可以查找子元素，也可以查找后代元素。

但是为什么还要学习children()？

因为children集成的方法更少，性能更高。

语法：$().find(selector)

Selector是一个可选参数，也是一个选择器，作用不多解释。

如果我们想要获取子元素的内容，要怎么做？

contents()

看着跟children()方法很像，但实际上确实很像。

只不过，children()获取的只有子元素，不包含其文本内容；而contents()不仅有子元素，还有其文本内容。

不过，我们很少使用。

查找兄弟元素

查找兄弟元素，有两个方向，一个是往前面查找，一个是往后面查找。

毕竟，兄弟有可能在你左边，也可以在你右边。

往前查找兄弟元素

往前面查找兄弟元素，也有三种写法：

prev()

prevAll()

prevUntil()

这三个方法是不是就很熟悉？

这不就是查找祖先元素嘛！、

所以说，这三的区别跟查找祖先元素是差不多的。

prev()

prev中文，前者。

语法：$().prev()

一般我们是不带参数的，为啥？

前者一般就一个吧？说的是两者的关系。

prevAll()

从字面意思理解，这个all就可以知道这个方法是获取到前面所有的兄弟元素了。

语法：$().prevAll(selector)

学了这么久，你也可以发现了，很多语法都是一样的，都是$()——JQ对象，然后再通过.来使用方法。

selector是一个可选参数，也是一个选择器，作用不必多说。

如果你没有带参数，就是选取前面全部的兄弟元素，如果你想要获取部分呢？

那就带上参数，或者使用prevUntil()方法即可。

prevUntil()

实际上，这个方法跟parentsUntil()方法一样，都是很少用到的。

说完了往前查找兄弟元素，接着说说往后查找兄弟元素吧。

往后查找兄弟元素

跟往前查找兄弟元素一样，往后查找兄弟元素也有三个方法，这里不多说其中的区别了。

next()

nextAll()

nextUntil()

---

查找兄弟元素，其实还有个方法。

那就是我直接查找所有兄弟元素。

查找所有兄弟元素

优势就是不分前后，返回值是所有兄弟元素。

对了，兄弟元素不包含本身，因为你跟你自己的关系不是兄弟元素。

语法：$().siblings(selector)

selector真的说了很多了。

---

写在最后

OK，这次主要补充了过滤方法、查找方法，这两的作用都是为了补充选择器。

下期讲一下工具函数、开发插件。

最后一期讲一下Ajax、高级技巧。