0

0

jquery选择器有哪些?jquery常用选择器的介绍

不言

不言

发布时间:2018-10-13 11:01:55

|

22315人浏览过

|

来源于php中文网

原创

jquery选择器是用来查找元素节点的,jquery中$()函数最强大最常用的功能之一就是使用选择器选择dom元素,所以,接下来的这篇文章就来给大家介绍一下jquery中常用的选择器有哪些。有需要的朋友可以看一看。

话不多说,让我们直接进入正文~

jquery选择器总共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器,下面我们分别来看一下这四种jquery选择器。

1、jquery的基本选择器

基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素。

$("#myELement")

选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

注意:在网页中id只能使用一次,即id具有唯一性,但class是允许重复使用的。

2、jquery层次选择器

 层次选择器通过DOM元素间的层次关系来获取元素,主要的层次关系包括父子、后代、相邻、兄弟关系。

$("form input")
选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

说明:只有这个方法返回的是JQuery对象才能进行链式操作。

3、jquery过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头(关于css伪类选择器更多知识可以参考css学习手册)。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单 对象属性过滤选择器共六种选择器。下面我们分别来简单看一下jquery这六种过滤选择器

(1)jquery基本过滤选择器

 过滤选择器是根据某类过滤规则进行元素的匹配,书写时都以(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种。

$("tr:first"):选择所有tr元素的第一个

$("tr:last"):选择所有tr元素的最后一个

$("input:not(:checked) + span")  :过滤掉:checked的选择器的所有的input元素

$("tr:even"):选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$("tr:odd"):选择所有的tr元素的第1,3,5... ...个元素

$("td:eq(2)"):选择所有的td元素中序号为2的那个td元素

$("td:gt(4)") :选择td元素中序号大于4的所有td元素

$("td:ll(4)"):选择td元素中序号小于4的所有的td元素

$(":header"):匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素

$("div:animated"):匹配所有正在执行动画效果的元素

(2)jquery内容过滤选择器

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

$("div:contains('John')") :选择所有div中含有John文本的元素

$("td:empty") :选择所有的为空(也不包括文本节点)的td元素的数组

$("div:has(p)") :选择所有含有p标签的div元素

$("td:parent"):选择所有的以td为父节点的元素数组

(3)jquery可见性过滤选择器

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

$("div:hidden"):选择所有的被hidden的div元素

$("div:visible"):选择所有的可视化的div元素

(4)jquery属性过滤选择器

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

$("div[id]"): 选择所有含有id属性的div元素

$("input[name='newsletter']"):选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") :选择所有的name属性不等于'newsletter'的input元素

妙刷AI
妙刷AI

美团推出的一款新奇、好玩、荒诞的AI视觉体验工具

下载

$("input[name^='news']"): 选择所有的name属性以'news'开头的input元素

$("input[name$='news']") :选择所有的name属性以'news'结尾的input元素

$("input[name*='man']") :选择所有的name属性包含'news'的input元素

(5)jquery子元素过滤选择器

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") :匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。

$("div span:first-child"):返回所有的div元素的第一个子节点的数组

$("div span:last-child"):返回所有的div元素的最后一个节点的数组

$("div button:only-child") :返回所有的div中只有唯一一个子节点的所有子节点的数组

(6) jquery表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤。

$(":enabled"):选择所有的可操作的表单元素

$(":disabled"):选择所有的不可操作的表单元素

$(":checked"):选择所有的被checked的表单元素

$("select option:selected"):选择所有的select 的子元素中被selected的元素

$(”input[@ name =S_03_22]“).parent().prev().text():选取一个 name 为”S_03_22″的input text框的上一个td的text值

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“):名字以”S_”开始,并且不是以”_R”结尾的

$(”input[@ name =radio_01][@checked]“).val();:一个名为 radio_01的radio所选的值

$("A B"):查找A元素下面的所有子节点,包括非直接子节点

$("A>B") :查找A元素下面的直接子节点

$("A+B") :查找A元素后面的兄弟节点,包括非直接子节点

$("A~B") :查找A元素后面的兄弟节点,不包括非直接子节点

4、jquery表单选择器

利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。

注意:注意:要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的。

$(":input") :选择所有的表单输入元素,包括input, textarea, select 和 button

$(":text") : 选择所有的text input元素

$(":password"): 选择所有的password input元素

$(":radio") :选择所有的radio input元素

$(":checkbox") :选择所有的checkbox input元素

$(":submit") :选择所有的submit input元素

$(":image")  : 选择所有的image input元素

$(":reset") :选择所有的reset input元素

$(":button") :选择所有的button input元素

$(":file") :选择所有的file input元素

$(":hidden"):选择所有类型为hidden的input元素或表单的隐藏域

以上就是本篇文章的全部内容了,关于jquery选择器更多的内容大家可以参考php中文网的jquery在线手册进一步了解!!!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

156

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

326

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

404

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

514

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

291

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

126

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

180

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

50

2026.01.13

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

24

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 12.8万人学习

Go语言实战之 GraphQL
Go语言实战之 GraphQL

共10课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号