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

本文主要是介绍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、高级技巧。

这篇关于jQuery基础——选择器的补充方法——过滤方法、查找方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1123464

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

浅谈主机加固,六种有效的主机加固方法

在数字化时代,数据的价值不言而喻,但随之而来的安全威胁也日益严峻。从勒索病毒到内部泄露,企业的数据安全面临着前所未有的挑战。为了应对这些挑战,一种全新的主机加固解决方案应运而生。 MCK主机加固解决方案,采用先进的安全容器中间件技术,构建起一套内核级的纵深立体防护体系。这一体系突破了传统安全防护的局限,即使在管理员权限被恶意利用的情况下,也能确保服务器的安全稳定运行。 普适主机加固措施:

webm怎么转换成mp4?这几种方法超多人在用!

webm怎么转换成mp4?WebM作为一种新兴的视频编码格式,近年来逐渐进入大众视野,其背后承载着诸多优势,但同时也伴随着不容忽视的局限性,首要挑战在于其兼容性边界,尽管WebM已广泛适应于众多网站与软件平台,但在特定应用环境或老旧设备上,其兼容难题依旧凸显,为用户体验带来不便,再者,WebM格式的非普适性也体现在编辑流程上,由于它并非行业内的通用标准,编辑过程中可能会遭遇格式不兼容的障碍,导致操

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验