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、高级技巧。