作者：秋天的紫丁香 | 来源：互联网 | 2022-01-26 13:28
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器(即选择器插件，参考上篇：jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能，让它很容易上手，吸引了大批的开发者，本文就来介绍一下强大的jQuery选择器。
jQuery选择器类型 jQuery选择器主要分为四类：
1、基本选择器
2、层次选择器
3、过滤选择器
4、表单选择器
由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两种。
一点准备工作 为了能让大家看到具体的效果，这里先创建一个示例页面，里面包含各种
和
元素，然后用jQuery选择器来匹配元素并调整它们的样式。
示例页面代码：
代码如下:
id为one,class为one的div
class为mini
id为two,class为one,title为test的div
class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
style的display为none的div
class为hide的div
包含input的type为hidden的div
正在执行动画的span元素
基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能用一次，class允许重复使用。
基本选择器规则如下：
基本选择器
| 选 择 器 |
描 述 |
返 回 |
示 例 |
| #id |
根据给定的id匹配一个元素 |
单个元素 |
$("#test")选取 id 为 test 的元素 |
| .class |
根据给定的类名匹配元素 |
集合元素 |
$(".test")选取所有 class 为 test 的元素 |
| element |
根据给定的元素名匹配元素 |
集合元素 |
$("p")选取所有的 元素 |
| * |
匹配所有元素 |
集合元素 |
$("*")选取所有的元素 |
selector1,selector2,
...,selectorN |
将每一个选择器匹配到的元
素合并后一起返回 |
集合元素 |
$("div,span,p.myClass")选取所有， 和拥有class为 myClass 的
标签的一组元素
|
在线演示 http://demo.jb51.net/js/2012/jquery_demo/jQuery基本选择器示例.html
层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
层次选择器规则如下：
层次选择器
| 选 择 器 |
描 述 |
返 回 |
示 例 |
| $("ancestor descendant") |
选取ancestor元素里所有
descendant(后代)元素 |
集合元素 |
$("div span")选取 |
| $("parent>child") |
选取parent元素下的child(子)元素 |
集合元素 |
$("div>span")选取 |
| $("prev+next") |
选取紧接在prev元素后的next元素 |
集合元素 |
$(".one+div")选取class为one的
下一个 兄弟元素 |
| $("prev~siblings") |
选取prev元素之后的所有siblings元素 |
集合元素 |
$("#two~div")选取id为two的元素
后面所有 兄弟元素 |
在线演示 http://demo.jb51.net/js/2012/jquery_demo/jQuery层次选择器示例.html
在层次选择器中，第1个和第2个比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的机率相对较少。
可以用next()方法来代替$("prev+next")选择器，即$(".one+div")与$(".one").next("div")等效。
可以用nextAll()方法来代替$("prev~siblings")选择器，即$(".one~div")与$(".one").nextAll("div")等效。
小结
本文主要介绍了jQuery选择器中的基本选择器和层次选择器，并对每种类型的选择器给出了示例代码，希望能对大家有所帮助。本人也是jQuery的初学者，欢迎大家拍砖。
推荐阅读
-
本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ...
[详细]
蜡笔小新 2024-11-13 06:03:30
-
jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件，专用于美化表单元素，操作简便，能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ...
[详细]
蜡笔小新 2024-11-12 22:29:28
-
-
在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ...
[详细]
蜡笔小新 2024-11-12 13:59:27
-
在本文中，我们将深入探讨 jQuery 中的 DOM 操作与事件处理技术，通过实现类似 Yahoo 邮箱登录框的提示效果来展示其强大功能。我们将详细介绍如何利用简洁的 jQuery 代码提升用户体验，并分享一些实用的示例。同时，我们还会解析这些示例中涉及的具体操作和事件处理方法。 ...
[详细]
蜡笔小新 2024-11-11 14:11:48
-
近日，我在处理一个复杂的前端问题时遇到了极大困扰。具体来说，我之前开发了一个功能丰富的纯jQuery代码的前端GridView控件，实现了多种功能和视觉效果，并在多个项目中表现良好。然而，最近在尝试应用 `border-box` 布局模式时，却遇到了意想不到的兼容性和性能问题。这提醒我们在条件尚未完全成熟的情况下，应谨慎使用 `border-box` 布局模式，以免引入不必要的复杂性和潜在的bug。 ...
[详细]
蜡笔小新 2024-11-10 10:03:00
-
蜡笔小新 2024-11-14 16:26:25
-
在开发过程中，频繁的小改动往往会生成多个提交记录。为了保持代码仓库的整洁，我们可以使用 git rebase -i 命令将多个提交合并成一个。 ...
[详细]
蜡笔小新 2024-11-14 15:11:03
-
本文将详细介绍Manacher算法，该算法用于高效地找到字符串中的最长回文子串。通过在字符间插入特殊符号，Manacher算法能够同时处理奇数和偶数长度的回文子串问题。 ...
[详细]
蜡笔小新 2024-11-14 13:54:45
-
Excel 是数据分析中最基本且强大的工具之一，具备多种实用功能和操作方法。本文将简要介绍 Excel 的不同版本及其兼容性问题，并探讨在处理大数据时的替代方案。 ...
[详细]
蜡笔小新 2024-11-14 07:39:50
-
本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本，获取多个单元格区域并作为表头，以及进行单元格合并、赋值、格式设置等操作。 ...
[详细]
蜡笔小新 2024-11-13 19:46:18
-
本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息，并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器，确保用户账户信息的集中管理和安全访问。 ...
[详细]
蜡笔小新 2024-11-13 18:19:52
-
本文详细介绍了Java代码分层的基本概念和常见分层模式，特别是MVC模式。同时探讨了不同项目需求下的分层策略，帮助读者更好地理解和应用Java分层思想。 ...
[详细]
蜡笔小新 2024-11-13 17:03:49
-
如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ...
[详细]
蜡笔小新 2024-11-13 16:47:19
-
本文探讨了网络爬虫引发的问题及其解决方案，重点介绍了Robots协议的作用和使用方法，旨在为网络爬虫的合理使用提供指导。 ...
[详细]
蜡笔小新 2024-11-13 15:45:41
-
本文介绍了 AngularJS 中的 $compile 服务及其用法，通过示例代码展示了如何使用 $compile 动态编译和链接 HTML 元素。 ...
[详细]
蜡笔小新 2024-11-13 15:34:47
-
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 