jquery的9大选择器

1. 基本选择器
 基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用)。所谓的网页中id只能使用一次的意思是说,一个网页中的id是不可以重复的,也就是具有唯一性。

1、#id     
用法: $("#myDiv");    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id="myDiv"2、Element 
用法: $("div")     返回值  集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div, 
input, a等等.3、class          
用法: $(".myClass")      返回值  集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中
class是可以存在多个同样值的)4、*          
用法: $("*")      返回值  集合元素
说明: 匹配所有元素,多用于结合上下文来搜索5、selector1, selector2, selectorN      
用法: $("div,span,p.myClass")    返回值  集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素
p class="myClass"

2. 层级选择器
 只有这个方法返回的是JQuery对象才能进行链式操作。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。

1 、ancestor descendant
用法: $("form input") ;   返回值  集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要和"arent > child"区分开。
祖先元素中查找,包含子元素和子元素的子元素。2、parent > child
用法: $("form > input") ;    返回值  集合元素
说明: 在给定的父元素下匹配所有子元素。注意:要区分好后代元素与子元素
父元素中查找,只包含子元素,不包含子元素的子元素。3、prev + next
用法: $("label + input") ;   返回值  集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素4、prev ~ siblings
用法: $("form ~ input") ;    返回值  集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且JQuery的siblings方法匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意:  ("prev ~ div") 选择器只能选择 "# prev"元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

3. 过滤选择器
 找到一堆页面元素,我们可以对这些元素加过滤条件,找到我们想要的这些元素,然后进行过滤。通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头。
 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。
(1)基础过滤选择器

1、:first
用法: $("tr:first") ;   返回值  单个元素的组成的集合
说明: 匹配找到的第一个元素2、:last
用法: $("tr:last")   返回值  集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.3、:not(selector)
用法: $("input:not(:checked)")   返回值  集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的
type=”checkbox”).4、:even
用法: $("tr:even")   返回值  集合元素
说明: 匹配所有索引值为偶数的元素,从0开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.5、:odd
用法: $("tr:odd") 返回值  集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数6、:eq(index)
用法: $("tr:eq(0)")    返回值  集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数7、:gt(index)
用法: $("tr:gt(0)")    返回值  集合元素
说明: 匹配所有大于给定索引值的元素8、:lt(index)
用法: $("tr:lt(2)")    返回值  集合元素  
说明: 匹配所有小于给定索引值的元素9、:header(固定写法)
用法: $(":header").css("background", "#EEE")    返回值  集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素10、:animated(固定写法)   返回值  集合元素
说明: 匹配所有正在执行动画效果的元素

(2)内容过滤选择器
 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

1、:contains(text)
用法: $("div:contains('John')")    返回值  集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是dom标签元素时,它就派上
了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的。2、:empty
用法: $("td:empty")   返回值  集合元素
说明: 匹配所有不包含子元素或者文本的空元素。3、:has(selector)
用法:  $("div:has('.mini')")返回值  集合元素
说明: 匹配含有选择器所匹配的元素的元素。4、:parent
用法: $("td:parent")   返回值  集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是":parent”,可不是".parent”!感觉与上面讲的”:empty”形成反义词。

(3)可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

1、:hidden
用法: $(”tr:hidden”)  返回值  集合元素
说明: 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到。
意思是css中display:none和input type="hidden"的都会被匹配到.同样,要在脑海中彻底分清楚冒
号":", 点号"."和逗号","的区别。
2、:visible
用法: $("tr:visible")  返回值  集合元素
说明: 匹配所有的可见元素

(4)属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

1、[attribute]
用法: $("div[id]") ;  返回值  集合元素
说明: 匹配包含给定属性的元素。例子中是选取了所有带”id”属性的div标签。2、[attribute=value]
用法: $("input[name='newsletter']").attr("checked", true);    返回值  集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素。3、[attribute!=value]$("div[title!='test']").css("background","yellow");
用法: $(”input[name!='newsletter']“).attr("checked", true);   返回值  集合元素说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
此选择器等价于:not此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。之前看到的:not 派上了用场。4、[attribute^=value]
用法: $(”input[name^=‘news’]“)  返回值  集合元素 
说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号。5、[attribute$=value]
用法: $("input[name$='letter']")  返回值  集合元素 
说明: 匹配给定的属性是以某些值结尾的元素。6、[attribute*=value]
用法: $("input[name*='man']")   返回值  集合元素
说明: 匹配给定的属性是以包含某些值的元素。7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $("input[id][name$='man']")  返回值  集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常
用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素。

(5)子元素过滤选择器

1、:nth-child(index/even/odd/equation)$("div[class=one] :nth-child(2)").css("background","yellow");
用法: $("ul li:nth-child(2)")   返回值  集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的
eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。2、:first-child$("div[class=one] :first-child")
用法: $("ul li:first-child")    返回值  集合元素 
说明: 匹配第一个子元素。':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。这里需要特别点的记忆下区别。3、:last-child
用法: $("ul li:last-child")      返回值  集合元素
说明: 匹配最后一个子元素.':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。4、: only-child用法: $("ul li:only-child")   返回值  集合元素 说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。意思就是:只有一个子元素的才会被匹配!

(6)表单过滤选择器

1、:enabled
用法: $("input:enabled")    返回值  集合元素
说明: 匹配所有可用元素。意思是查找所有input中不带有disabled="disabled"的input。不为
disabled,当然就为enabled。2、:disabled
用法: $("input:disabled")    返回值  集合元素
说明: 匹配所有不可用元素。与上面的enable是相对应的。3、:checked
用法: $("input:checked")   返回值  集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。这话说起来有些绕口。4、:selected
用法: $(”select option:selected”)   返回值  集合元素
说明: 匹配所有选中的option元素.$("select>option:selected")

(7)表单选择器

1、:input
用法: $(":input") ;   返回值  集合元素
说明:匹配所有 input, textarea, select 和 button 元素。2、:text
用法: $(":text") ;  返回值  集合元素
说明: 匹配所有的单行文本框。3、:password
用法: $(":password") ; 返回值  集合元素
说明: 匹配所有密码框。4、:radio
用法: $(":radio") ; 返回值  集合元素
说明: 匹配所有单选按钮。5、:checkbox
用法: $(":checkbox") ; 返回值  集合元素
说明: 匹配所有复选框。6、:submit
用法: $(":submit") ;   返回值  集合元素
说明: 匹配所有提交按钮.7、:image
用法: $(":image")   返回值  集合元素
说明: 匹配所有图像域。8、:reset
用法: $(":reset") ;  返回值  集合元素
说明: 匹配所有重置按钮。9、:button
用法: $(":button") ;  返回值  集合元素
说明: 匹配所有按钮.这个包括直接写的元素button。10、:file
用法: $(":file") ;  返回值  集合元素
说明: 匹配所有文件域。11、:hidden
用法: $("input:hidden") ; 返回值  集合元素
说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/657807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抗体亲和力成熟制备高亲和力抗体-泰克生物

1.什么是抗体亲和力? 抗体亲和力是指抗体与抗原表位或抗原决定簇的结合强度,其实质是一种包含氨基酸间结合力——氢键、疏水性作用力等的非共价作用力。抗体亲和力的强弱取决于抗体与所用抗原表位的配合程度,其决定因素包括接触面积的大小、亲…

Linux实验记录:使用firewalld

前言: 本文是一篇关于Linux系统初学者的实验记录。 参考书籍:《Linux就该这么学》 实验环境: VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注: RHEL8系统中集成了多款防火墙管理工具&#xf…

【前端-VUE+TS】Vue3组件化-下(五)

一. 插槽的使用 1.1. 认识插槽slot 在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示;但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的d…

【buuctf Reverse】Java逆向解密wp

Java逆向解密 https://buuoj.cn/challenges#Java%E9%80%86%E5%90%91%E8%A7%A3%E5%AF%86 附件只有一个Reverse.class 用IntelliJ打开就能看到JAVA源码 这里就是生成flag的地方 int result arr[i] 64 ^ 32; 这个运算的逆运算难搞 注意运算的优先级,先运算在^ 代码…

GO EASY 框架 之 NET 05

目录 1、Overview 2、Agent接口源码 3、收发消息 4、AgentHandle接收函数 5、conns.Conn接口 1、Overview 名称:agent.Agent 网络链接 接口; DESC:网络链接,服务端与客户端通信媒介; 封装:进一步封…

图书管理系统(ArrayList和LinkedList)--versions3.0

目录 一、项目要求: 二、项目环境 三、项目使用的知识点 四、项目代码 五、项目运行结果 六、项目难点分析 图书管理系统--versions1.0: 图书管理系统--versions1.0-CSDN博客文章浏览阅读981次,点赞29次,收藏17次。本文使用…

动态代理IP服务使用优势有哪些?

动态代理IP具备以下使用优势: 1. 频繁更换IP:动态代理IP服务会定期或按需自动更换用户的IP地址,这有助于避免因为单一IP地址频繁访问同一网站而导致的IP被封禁问题,特别适用于网络爬虫、数据抓取和SEO优化等场景。 2. 反反爬策略&…

5G智慧钢铁厂数字孪生三维可视化,推进钢铁新型工业化数字化转型

5G智慧钢铁厂数字孪生三维可视化,推进钢铁新型工业化数字化转型。随着科技的不断发展,数字化转型已经成为钢铁企业转型升级的必经之路。而5G技术的广泛应用,为钢铁企业数字化转型提供了新的机遇。其中,5G智慧钢铁厂数字孪生三维可…

cpu到达100%问题排查

0、背景 首先定位到mysql 的cpu使用率较高 原因是任务域的作业实例补偿定时任务相关sql查询问题,该sql 2min执行一次,一次查询两次,导致cpu飙升,可考虑优化sql,添加以下索引 ALTER TABLE scheduler.tbl_simba_os_sc…

【hive】相关性函数进行相关性分析

文章目录 CORRCOVAR_POPCOVAR_SAMPSTDDEV_POPSTDDEV_SAMP 在Hive SQL中,使用类似的相关性函数进行相关性分析。常见的相关性函数包括CORR、COVAR_POP、COVAR_SAMP、STDDEV_POP、STDDEV_SAMP等。 CORR 举个例子,假设有一个表格sales,其中包含…

StarRocks-3.1.0 单节点部署

1. 相关环境准备 FE: /opt/starrocks BE: /opt/starrocks 安装包下载 wget https://releases.starrocks.io/starrocks/StarRocks-3.1.0.tar.gz解压缩 tar -zxvf StarRocks-3.1.0.tar.gz 安装jdk (v2.5 及以上版本建议安装 JDK 11,我们使用…

搭建WebGL开发环境

前言 本篇文章介绍如何搭建WebGL开发环境 WebGL WebGL的技术规范继承自免费和开源的OpenGL ES标准,从某种意义上说,WebGL就是Web版的OpenGL ES,而OpenGL ES是从OpenGL中派生出来的。他们的应用环境有区别,一般来说:…

C++20 高级编程

文章目录 前言前奏lambda浅谈std::ref的实现浅谈is_same浅谈std::function的实现std::visit 与 std::variant 与运行时多态SFINAE类型内省标签分发 (tag dispatching)编译时多态奇异递归模板模式 (Curiously Recurring Template Pattern,CRTP) 三路比较操作符 (飞船操作符) <…

Django视图函数技巧,从入门到实战

文章目录 Django视图函数1.request对象的方法2.视图函数的常用的返回对象&#xff08;1&#xff09;response对象&#xff08;2&#xff09;JsonResponse对象&#xff08;3&#xff09;redirect() &#xff1a;给浏览器了一个30x的状态码 3.设置响应头和状态码&#xff08;1&am…

Apache Flink文件上传漏洞(CVE-2020-17518)漏洞代码分析

漏洞复现参考如下文章 Apache Flink文件上传漏洞&#xff08;CVE-2020-17518&#xff09;漏洞复现分析_文件上传漏洞复现cve-CSDN博客 分析代码的话&#xff0c;首先找到漏洞修复的邮件 漏洞详情&#xff0c;可以看到漏洞概要&#xff0c;影响的版本&#xff0c;漏洞描述以及…

【Linux笔记】文件描述符与重定向

一、Linux关于文件操作的一些系统调用 1、open和close 我们在C语言阶段已经学过很多文件操作的函数&#xff0c;今天我们要来看看操作系统中对于文件是怎么操作的。 1.1、open与close的用法 C语言的库函数中有很多关于文件操作的接口&#xff0c;包括fopen、fclose、fprint…

Docker容器引擎镜像创建

目录 一、镜像的创建 &#xff08;一&#xff09;基于现有镜像创建 1.启动一个镜像&#xff0c;在容器里做修改 2.将修改后的容器提交为新的镜像 &#xff08;二&#xff09;基于本地模板创建 &#xff08;三&#xff09;基于Dockerfile 创建 1.联合文件系统&#xff08…

MR混合现实情景实训教学系统在石油化工课堂上的应用

在石油化工课堂中&#xff0c;MR混合现实情景实训教学系统为学生提供了一个真实的实训环境。学生可以在系统中模拟各种石油化工生产流程&#xff0c;从原料的提取、加工到产品的包装和运输&#xff0c;都可以在模拟环境中进行操作。同时&#xff0c;系统还会根据学生的操作反馈…

联通森林2

时间限制&#xff1a;1秒 内存限制&#xff1a;128M 题目描述 输入若干森林&#xff0c;保证数据合法&#xff0c;请你判断某两个点是否在同一棵树上。 输入描述 第一行两个数n,m和q (0<m<n<1000000)&#xff0c;(1<q<10000)表示当前森林的节点个数为…

配置alias(设置别名@)

Vite配置alias需要两步进行&#xff08;TS项目&#xff09; 1、修改vite.config.ts&#xff08;让程序支持&#xff09;2、修改tsconfig.json&#xff08;让编辑器支持&#xff09;修改vite.config.ts import { defineConfig } from vite import path from path ​ function…