一、总结
本章讲解了jQuery最重要的选择器部分的知识。 借助jQuery的选择器，我们几乎可以获取页面上的任何对象或一组对象，这可以显着减少开发人员的工作量。
2. 前言
要编写任何JavaScript程序，我们首先需要获取对象。 jQuery选择器可以彻底改变我们平时获取对象的方式。 它可以获取几乎任何语义的对象，例如“具有标题属性且值包含test的元素”。 要完成这项工作，只需要编译一个 jQuery 选择器字符串。 学习jQuery选择器是学习jQuery最重要的一步。
3.Dom对象和jQuery包装器集
无论我们是写程序还是看API文档，都要时刻注意区分Dom对象和jQuery包装集。
1.Dom对象
传统的javascript开发中，我们首先获取Dom对象，如：
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
我们经常使用 document.getElementById 方法通过 id 获取单个 Dom 对象，或者使用 document.getElementsByTagName 方法通过 HTML 标签名称获取 Dom 对象的集合。
另外，在storm函数中，可以在方法函数中使用this来引用风暴触发对象（但多播风暴函数中IE6有问题），或者使用target（FF）或srcElement（iIE6）事件对象的属性来获取引发风暴Dom对象的事件。
注意，我们这里得到的都是Dom对象，而Dom对象也有input、div、span等不同的类型。Dom对象只有有限的属性和方法：
2. jQuery 包装器集
jQuery的包装集可以说是Dom对象的扩展。 在 jQuery 世界中，所有对象，无论是一个还是一组，都被包装成一个 jQuery 包装集，比如获取一个包含某个元素的 jQuery 包装集：
var jQueryObject = $("#testDiv");
jQuery 包装器作为一个对象一起调用。 jQuery 包装器具有丰富的属性和方法，这是 jQuery 所独有的：
3、Dom对象与jQuery对象的转换（1）Dom到jQuery的包装集
如果要使用jQuery提供的功能，首先必须构建jQuery包装集。 我们可以使用本文官方介绍的jQuery选择器来直接构造jQuery包装集，例如：
$("#testDiv");
上面这句话构造的包装集合只包含一个id为testDiv的元素。
或者我们已经获得了一个Dom元素，如：
var div = document.getElementById("testDiv");
上面代码中的div是一个Dom元素，我们可以将Dom元素转换成一个jQuery封装集合：
var domToJQueryObject = $(div);
Tips：因为有了Intellisense，我们可以通过Intellisense的列表来判断一个对象是Dom对象还是jQuery包集。
(2) jQuery包装设置为Dom对象
jQuery 包装器是一个集合，因此我们可以通过索引器访问其元素之一：
var domObject = $("#testDiv")[0];
请注意，索引器返回的不再是 jQuery 包装器，而是 Dom 对象！
jQuery包集合的各个遍历方法，如each()，都可以传入一个遍历函数，而遍历函数中的this也是一个Dom元素，如：
$("#testDiv").each(function()
{ alert(this) })
如果我们想使用 jQuery 来操作 Dom 对象怎么办？ 使用前面介绍的转换方法即可：
$("#testDiv").each(function()
{
$(this).html("修改内容")
})
总结：首先让大家理清Dom对象和jQuery包装集的概念，这将大大促进我们的学习速度。 我在学习jQuery的过程中花了很长时间没有意识到两者的具体区别，因为书上我没有具体解释两者的区别，所以我经常被诸如“为什么不能这个指针调用 jQuery 方法”。 直到有一天，我突然意识到，只要能区分这三者，写程序的时候就能清晰吗？ 清楚地。
4.什么是 jQuery 选择器
在Dom编程中，我们只能使用有限的函数根据id或者TagName来获取Dom对象。
在 jQuery 中，情况完全不同。 jQuery提供了非常强大的选择器来帮助我们获取页面上的对象，并以jQuery包装集的形式返回对象。
首先让我们看看什么是选择器：
//根据ID获取jQuery包装集
var jQueryObject = $("#testDiv");
上面的例子中，ID选择器用于选择id为testDiv的Dom对象并加载到jQuery包装集中，最后作为jQuery包装集返回。
“$”符号代表了jQuery中对jQuery对象的引用，“jQuery”是核心对象，它包含以下方法：
jQuery（表达式，上下文）
返回：jQuery
该函数采用 CSS 选择器字符串，并使用该字符串来匹配一组元素。
该函数接受包含 CSS 选择器的字符串，然后使用该选择器来匹配一组元素。
jQuery（ html、所有者文档）
返回：jQuery
从 HTML 原始字符串动态创建 Dom 元素。
从提供的原始 HTML 字符串即时创建 DOM 元素。
jQuery（元素）
返回：jQuery
用jQuery函数功能封装一个或多个Dom对象（即封装为一个jQuery包集）
将 jQuery 功能包装在单个或多个 DOM 元素周围。
jQuery（回调）
返回：jQuery
$(document).ready() 的缩写形式
$(document) 的简写。 准备好（）。
以上摘自jQuery官方指南。 Returns的类型是jQuery，表示返回的是jQuery包集。 第一种方法存在一些问题。 官方socket写的是CSS选择器，但实际上这个方法不仅支持CSS选择器，还支持所有jQuery支持的选择器，有的甚至是jQuery自定义选择器（CSS标准中不存在的选择器）。 为了让大家更清楚的理解，我将方式改成如下：
jQuery（选择器、上下文）
返回： jQuery 包装器集
根据选择器选择匹配的对象，并将其作为 jQuery 包装集返回。 上下文可以是 Dom 对象集或 jQuery 包装器集。 如果传入，则表示从上下文中选择匹配的对象。 如果不传入，则表示范围是文档对象（即页面上的所有对象）。
上述方法是我们选择器使用的核心技术。 可以使用“$”代替jQuery，使句子更加简洁。 例如，下面的两句话具有相同的效果：
//根据ID获取jQuery包装集
var jQueryObject = $("#testDiv");
//$是jQuery对象的引用:
var jQueryObject = jQuery("#testDiv");
接下来jquery获取单选框选中的值jquery获取单选框选中的值，我们系统地学习一下jQuery选择器。
五。 jQuery 选择器完整解决方案
通俗地说，Selector选择器就是“表达特殊语义的字符串”。 只要将选择器字符串传入方法内部，就可以选择不同的Dom对象，并以jQuery包集合的形式返回。
但是如何对 jQuery 选择器进行分类却让我担心。 因为书中的分类与jQuery官方的分类完全不同。 最终我决定以实用为主，暂时不去了解CSS3选择器标准，而是按照jQuery官方的分类来讲解。
jQuery 的选择器支持 CSS3 选择器标准。 以下是 W3C 最新的 CSS3 选择器标准：
所有标准选择器都可以在 jQuery 中使用。
jQuery选择器按照功能主要分为“选择”和“过滤”。 它们一起使用。 它们可以同时组合成一个选择器字符串。 主要区别在于，“过滤”选择器是从后面指定要匹配的条件，要从“过滤”选择器的内容中过滤，也可以单独使用，即从所有“*”中过滤。 例如：
$(":[标题]")
相当于：
$("*:[标题]")
“select”函数的选择器不会有默认范围，因为该函数是“select”而不是“filter”。
在下面的选择器类别中，带有“filter”的类别表示是“过滤”选择器，否则是具有“选择”功能的选择器。
jQuery 选择器分为以下几类：
[阐明]
1.点击“名称”跳转到该方法的jQuery官方文档。
2. 您可以在下一节的 jQuery 选择器实验室中测试各种选择器
1. 基本选择器基础知识
姓名
阐明
例子
＃ID
按元素 ID 选择
$("divId") 选择 ID 作为 divI
d 的元素
元素
根据元素的名称进行选择，
$("a") 选择所有元素
。班级
根据元素的 css 类进行选择
$(".bgRed") 选择全部
对 bgRed 使用 CSS 类
元素
选择所有元素
$("*") 选择页面上的所有元素
选择器1，
选择器2，
选择器N
多个选择器可以用“,”分隔，然后组合成一个选择器字符串。 这些选择器匹配的内容将同时被选择。
$("#divId, a, .bgRed")
【学习建议】：你可以暂时记住基本的选择器，可以直接跳到下一节“jQuery选择器实验室”进行动手练习，然后再回去逐步学习所有选择器，或者使用它们当你需要它们时。 回去询问一下。
2. 层次结构
姓名
阐明
例子
祖先后代
使用“表单输入”选择表单中的所有输入元素。 即祖先（ancestor）是来自，后代（descendant）是输入。
$(".bgRed div")
选择 CSS 类作为 bgRed
全部在元素中
元素。
父母 > 孩子
选择父节点的直接子节点。 子元素必须包含在父元素中，并且父元素是父元素。
$(".myList>li") 选择 CSS 类作为 myList
直接在元素中
子节点对象。
上一个 + 下一个
prev 和 next 是同一级别的两个元素。 选择上一个元素前面的下一个元素。
$("#hibiscus+img") 选择id为hibiscus的元素
元素旁边的 img 对象。
上一页 ~ 兄弟姐妹
选择由 prev 旁边的同级过滤的元素
注意：兄弟姐妹是过滤器
$("#someDiv~[title]") 选择id为someDiv
所有在对象前面带有 title 属性的元素
3. 基本过滤器
姓名
阐明
例子
：第一的
匹配找到的第一个元素
查找表的第一行：$("tr:first")
：最后的
匹配找到的最后一个元素
查找表的最后一行：$("tr:last")
：不是（选择器）
删除与给定选择器匹配的所有元素
查找所有未选中的输入元素：$("input:not(:checked)")
：甚至
匹配所有索引值为素数的元素，从0开始计数
查找表的第 1、3、5...行：$("tr:even")
： 奇怪的
匹配所有索引值为素数的元素，从0开始计数
查找表的第 2、4 和 6 行：$("tr:odd")
:eq(索引)
匹配给定索引处的元素
注：索引从0开始计数
找到第二行：$("tr:eq(1)")
:gt(索引)
匹配所有小于给定索引值的元素
注：索引从0开始计数
找到第二行和第三行，即索引值为1和2
，大于 0：$("tr:gt(0)")
:lt(索引)
选择结果集中索引大于N的元素
注：索引从0开始计数
找到第一行和第二行，即索引值为0和1
，小于 2：$("tr:lt(2)")
：标题
选择所有标题标签，例如 h1、h2、h3。
为页面中的所有标题添加背景颜色： $(":header").css("background", "#EEE");
：动画
匹配所有正在执行动画效果的元素
只适用于不执行动画效果的元素
执行动画特效：
$("#run").click(函数(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
4. 内容过滤器
姓名
阐明
例子
：包含（文本）
匹配包含给定文本的元素
查找所有包含“John”的 div 元素：$("div:contains('John')")
：空的
匹配所有不包含子元素或文本的空元素
查找所有不包含子元素或文本的空元素：$("td:empty")
：有（选择器）
匹配由选择器匹配的元素丰富的元素
为所有包含 p 元素的 div 元素添加文本类： $("div:has(p)").addClass("test");
：父级
匹配富含子元素或文本的元素
查找所有具有丰富子元素或文本的 td 元素：$("td:parent")
5. 可见性过滤器 可见性过滤器
姓名
阐明
例子
：隐
匹配所有不可见元素
注意：在1.3.2版本中，hidden匹配其自身或父类不占用文档空间的元素。 如果你使用CSS的visibility属性使其不可见并占用空间，那么就不要输入hidden。
查找所有不可见的 tr 元素：$("tr:hidden")
：可见的
匹配所有可见元素
查找所有可见的 tr 元素：$("tr:visible")
6. 属性过滤器 属性过滤器
姓名
阐明
例子
[属性]
匹配包含给定属性的元素
查找所有具有丰富id属性的div元素：
$("div[id]")
[属性=值]
匹配给定属性为特定值的元素
查找名称属性为 newsletter 的所有输入元素：
$("input[name='newsletter']").attr("已检查", true);
[属性！=值]
匹配给定属性是不包含某个值的元素
查找名称属性不是新闻通讯的所有输入元素：
$("输入[名称！='新闻通讯']")
.attr("已检查", true);
[属性^=值]
匹配给定属性以单个值开头的元素
$("输入[姓名^='新闻']")
[属性$=值]
匹配给定属性以单个值结尾的元素
查找所有以“字母”开头的名字
结束输入元素：
$("输入[名称$='字母']")
[属性*=值]
将给定属性与包含单个值的元素相匹配
查找所有包含以下内容的名称
“man”的输入元素：
$("输入[姓名*='男人']")
[属性过滤器1][属性过滤器2][属性过滤器N]
复合属性选择器，当需要同时满足多个条件时使用。
查找所有 Rich id 属性，以及
它的名字属性是 man
结尾为：
$("输入[id][姓名$='man']")
7. 子过滤器
姓名
阐明
例子
:nth-child(索引/偶数/奇数/方程)
匹配其父元素下的第 N 个子元素或奇偶元素
':eq(index)' 仅匹配一个元素，而该元素将匹配每个父元素及其子元素。 :nth-child 从 1 开始，而 :eq() 从 0 开始！
可以使用：
第 n 个孩子（偶数）
:第n个孩子（奇数）
:第n个孩子(3n)
:第n个孩子(2)
:第n个孩子(3n+1)
:第n个孩子(3n+2)
找到每个 ul 中的第二个 li：
$("ul li:nth-child(2)")
：第一个孩子
匹配第一个子元素
':first' 仅匹配一个元素，而此选择器将匹配每个父元素的一个子元素
找到每个 ul 中的第一个 li：
$("ul li:第一个孩子")
：最后一个孩子
匹配最后一个子元素
':last' 仅匹配一个元素，而此选择器将为每个父元素匹配一个子元素
找到每个 ul 中的最后一个 li：
$("ul li:最后一个孩子")
：唯一的孩子
如果某个元素是父元素的唯一子元素，则会匹配该元素
如果父元素丰富了其他元素，则不会匹配。
找到 ul 中唯一的子元素 li：
$("ul li:独生子女")
8. 表单选择器
姓名
阐明
解释
：输入
匹配所有输入、文本区域、选择和按钮元素
查找所有输入元素：
$(":输入")
：文本
匹配所有文本框
查找所有文本框：
$(":文本")
：密码
匹配所有密码框
查找所有密码框：
$(":密码")
：收音机
匹配所有单选按钮
查找所有单选按钮
：复选框
匹配所有复选框
找到所有复选框：
$(":复选框")
：提交
匹配所有提交键
查找所有提交按钮：
$(":提交")
：图像
匹配所有图像域
匹配所有图像域：
$(":图像")
：重置
匹配所有重置按钮
找到所有重置按钮：
$(":重置")
：按钮
匹配所有键
查找所有键：
$(":按钮")
：文件
匹配所有文件域
查找所有文件域：
$(":文件")
9. 表单过滤器 表单过滤器
姓名
阐明
解释
：启用
匹配所有可用元素
查找所有可用的输入元素：
$("输入：启用")
：禁用
匹配所有不可用的元素
查找所有不可用的输入元素：
$("输入：禁用")
：检查过
匹配所有选定的选定元素（复选框、单选框等，不包括 select 中的选项）
查找所有选中的复选框元素：
$("输入：已选中")
：已选择
匹配所有选定的选项元素
查找所有选定的选项元素：
$("选择选项：已选择")
6.jQuery 选择器实验室
jQuery 选择器实验室使用了《JQuery in Action》一书中的代码，这对于学习选择器非常有帮助。
我们的实验对象是一个包含很多元素的页面：
在实验页面的“选择器”输入框中输入 jQuery 选择器表达式，所有与该表达式匹配的元素都会显示一个红色框：
如上图所示，输入“.myList”后点击“应用”，下面的输出框会显示运行结果，右侧红框中会显示选中的元素。
该代码可在本章末尾下载。
7.API文档
jQuery 官方 API：
中文在线API：
中文jQuery指南下载：
八、总结
本章讲解的jQuery仍然属于基础支持，所以应用示例并不多。 虽然很基础，很难一下子记住，但是 jQuery 选择器可以说是最考验一个人 jQuery 功底的地方。 在下一章中，我们将解释如何操作 jQuery 包装器集和动态创建新元素。
本章代码下载：
本节结束
相关文章
