本章讲解jQuery最重要的选择器部分的知识..

一、总结

本章讲解jQuery最重要的选择器部分的知识。使用jQuery的选择器，我们几乎可以获取页面上的任何对象或对象组，可以显着减少开发者的工作量。

二、前言

在编写任何 javascript 程序时，我们必须首先获取对象。 jQuery 选择器可以完全改变我们通常获取对象的方式。我们几乎可以得到任何语义对象，比如“一个带有title属性和一个包含test的值的元素”，完成这些你需要做的就是写一个jQuery选择器字符串。学习jQuery选择器是学习jQuery最重要的一步。

三.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对象的集合。

另外，在事件函数中，可以在方法函数中使用this来引用事件触发对象（但是IE6在多播事件函数中有问题），或者使用事件对象的target(FF)或 srcElement(iIE6)获取引发事件的 Dom 对象。

注意我们这里得到的都是Dom对象，Dom对象也有不同的类型如input、div、span等。Dom对象只有有限的属性和方法：

2.jQuery 包装器

jQuery wrapper set 可以说是Dom 对象的扩展。在jQuery的世界里，所有的对象，不管是一个还是一组，都被打包成一个jQuery wrapper set，比如得到一个包含一个元素的jQuery wrapper set：

var jQueryObject = $("#testDiv");

jQuery 包装器作为对象一起调用。 jQuery 包装器具有丰富的属性和方法，它们是 jQuery 特有的：

3.Dom对象与jQuery对象的转换

(1)Dom to jQuery wrapper set

如果你想使用jQuery提供的功能，你必须先构造一个jQuery wrapper set。我们可以使用本文要介绍的jQuery选择器直接构造一个jQuery包装器集，如：

$("#testDiv");

上述语句构造的包装集只包含一个id为testDiv的元素。

或者我们已经获取了一个Dom元素，比如：

var div = document.getElementById("testDiv");

上面代码中的div是一个Dom元素，我们可以将Dom元素转换成一个jQuery wrapper set：

var domToJQueryObject = $(div);

提示：因为有了intellisense，我们可以使用intellisense方法列表来判断一个对象是Dom对象还是jQuery wrapper set。

(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方法”之类的问题搞糊涂。直到有一天，我意识到只要能区分这两者，我在写程序的时候就可以成为一个程序。很明显。

四. 什么是 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, ownerDocument)

返回：jQuery

从 HTML 原始字符串动态创建 Dom 元素。

从提供的原始 HTML 字符串即时创建 DOM 元素。

jQuery(元素)

返回：jQuery

用 jQuery 函数封装一个或多个 Dom 对象（即将它们封装为 jQuery 包装集）

围绕单个或多个 DOM 元素包装 jQuery 功能。

jQuery(回调)

返回：jQuery

$(document).ready() 的简写。

以上内容摘自jQuery官方手册。 Returns的类型是jQuery，表示返回的jQuery包集。第一种方法存在一些问题。官方接口写了 CSS 选择器，但实际上这种方法不仅支持 CSS 选择器，而且所有 jQuery 都支持的选择器，有的甚至是 jQuery 自定义选择器（CSS 标准中不存在的选择器）。为了让大家更清楚地理解，我将方法修改如下：

jQuery（选择器，上下文）

返回：jQuery 包装器

根据选择器选择匹配的对象，并以jQuery包装集的形式返回。上下文可以是 Dom 对象集或 jQuery 包装器集。如果传入，则表示应该从上下文中选择匹配的对象。如果不传入，则表示范围是Document对象（即页面上的所有对象）。

上述方法是我们选择器使用的核心方法。可以用“$”代替jQuery，让语法更简洁，比如下面两句效果是一样的：

 //根据ID获取jQuery包装集
 var jQueryObject = $("#testDiv"); 
//$是jQuery对象的引用:
var jQueryObject = jQuery("#testDiv");

让我们系统地学习 jQuery 选择器。

五.jQuery 选择器完整解决方案

用外行的话来说，选择器是“具有特殊语义的字符串”。只需将选择器字符串传递给上述方法即可选择不同的 Dom 对象并将它们作为 jQuery 包装集返回。

但是如何分类 jQuery 选择器让我很为难。因为书中的分类与jQuery官方的分类完全不同。最后还是决定着眼于实用性，暂时不了解CSS3选择器标准，按照jQuery官方分类讲解。

jQuery 的选择器支持 CSS3 选择器标准。以下是来自 W3C 的最新 CSS3 选择器标准：

标准选择器可以在 jQuery 中使用。

jQuery选择器按功能主要分为“选择”和“过滤”。它们一起使用。它们可以一起使用以形成选择器字符串。主要区别在于“过滤”的选择器是指定条件从之前匹配的内容中过滤，“过滤器”选择器也可以单独使用，即从所有“*”中过滤。例如：

$(“:[标题]”)

相当于：

$(“*:[标题]”)

“select”函数的选择器不会有默认范围，因为该函数是“select”而不是“filter”。

在以下选择器类别中，带有“过滤器”的类别表示它是“过滤”选择器，否则是“选择”功能的选择器。

jQuery 选择器分为以下几类：

[描述]

1.点击“名称”跳转到该方法的官方jQuery文档。

2.在下一节的 jQuery 选择器实验室中测试各种选择器

1.基本选择器基础

名称描述example#id 根据元素Id选择$(“divId”)，选择ID为divI

d的元素

根据元素名称选择元素，$(“a”) 选择所有元素。根据元素的css类选择class $(“.bgRed”) 全选

为 bgRed 使用 CSS 类

元素

*选择所有元素$(“*”)选择页面选择器1上的所有元素，

选择器2，

selectorN 可以用“，”分隔多个选择器，然后将它们拼成一个选择器字符串。这些选择器匹配的内容会同时被选中。 $(“#divId, a, .bgRed”)

【学习建议】：暂时只记住基本的选择器css复合选择器有哪些，可以跳到下一节“jQuery选择器实验室”动手练习，然后再回来慢慢学习所有的选择器，或者使用Check back later .

2.层次结构

名称描述示例祖先后代使用“表单输入”的形式选择表单中的所有输入元素。即祖先（ancestor）是从，后代（descendant）是输入。$(“.bgRed div”)

选择 CSS 类作为 bgRed

所有的

元素

元素。

parent > child 选择 parent 的直接子节点 child。子元素必须包含在父元素中，并且父类是父元素。 $(“.myList>li”) 选择 CSS 类作为 myList

直接进入元素

子节点对象。

prev + nextprev 和 next 是同一级别的两个元素。选择上一个元素之后的下一个元素。 $(“#hibiscus+img”) 当id为木槿元素时被选中

元素后面的img对象。

prev~siblings 选择prev之后被兄弟姐妹过滤的元素

注意：siblings 是过滤器 $(“#someDiv~[title]”) 来选择 someDiv 的 id

对象后面带有title属性的所有元素

3.基本过滤器

名称描述示例：首先匹配找到的第一个元素 查找表的第一行：$(“tr:first”):last 匹配找到的最后一个元素 查找表的最后一行：$(“tr:last “):not(selector) 删除所有匹配给定选择器的元素 查找所有未检查的输入元素： $(“input:not(:checked)”):even 匹配所有具有偶数索引的元素，从 0 开始计数 1、3、5…查找表的行：$(“tr:even”):odd 匹配所有索引值为奇数的元素，从 0 开始 2、4、第 6 行：$(“tr:odd”):eq(index) 匹配具有给定索引值的元素

注意：index从0开始计数找到第二行： $(“tr:eq(1)”):gt(index) 匹配所有大于给定索引值的元素

注意：index从0开始计数，找到第二行和第三行，即索引值为1和2

，即大于0：$(“tr:gt(0)”)

:lt(index) 选择结果集中索引小于N的元素

注意：索引从0开始计数查找第一行和第二行，即索引值为0和1

，即小于2：$(“tr:lt(2)”)

:header 选择所有标题标签，例如 h1、h2、h3。为页面中的所有标题添加背景颜色： $(“:header”).css(“background”, “#EEE”);:animated 匹配所有正在制作动画的元素，只匹配未制作动画的元素

线条动画效果：

$(“#run”).click(function(){

$(“div:not(:animated)”).animate({ left: “+=20” }, 1000);

});

4. 内容过滤器 内容过滤器

名称 描述 示例： contains(text) 匹配包含给定文本的元素 查找所有包含 “John” 的 div 元素： $(“div:contains(‘John’)”):empty 匹配所有不包含的元素文本的子元素或空元素 查找所有不包含子元素或文本的空元素： $(“td:empty”):has(selector) 匹配包含选择器匹配的元素的元素 将文本添加到所有 div包含 p 元素的元素 Class: $(“div:has(p)”).addClass(“test”);:parent 匹配带有子元素或文本的元素 查找所有带有子元素或文本的 td 元素： $(“td:parent “)

5.可见性过滤器

名称描述示例：隐藏

匹配所有不可见元素

注意：在 1.3.2 版本中，隐藏匹配其自身或父类不占用文档空间的元素。如果使用 CSS 的可见性属性使其不可见但占用空间，则不会进入隐藏状态。

查找所有不可见的 tr 元素：$(“tr:hidden”):visible 匹配所有可见元素 查找所有可见的 tr 元素：$(“tr:visible”)

6.属性过滤器

示例名称描述[attribute]匹配包含给定属性的元素查找所有具有 id 属性的 div 元素：

$(“div[id]”)[attribute=value]匹配给定属性为某个值的元素，查找所有name属性为newsletter的输入元素：

$(“input[name=’newsletter’]”).attr(“checked”, true);[attribute!=value] 匹配给定属性是不包含特定值的元素 查找所有名称属性不是时事通讯的输入元素：

$(“input[name!=’newsletter’]”)

.attr(“已检查”, true);

[attribute^=value] 匹配给定的属性是一个以某个值开头的元素 $(“input[name^=’news’]”)[attribute$=value] 匹配给定的属性是一个以某个值结尾的元素使用这些值找到所有以“字母”结尾的名称

输入元素结束：

$(“input[name$=’letter’]”)[attribute*=value]将给定属性匹配为包含某个值的元素

查找所有包含

的名称

‘man’输入元素：

$(“输入[name*=’man’]”)

[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器，需要同时满足多个条件时使用。查找所有具有 id 的属性，并且

它的name属性是man

结尾：

$(“输入[id][name$=’man’]”)

7.子过滤器

名称说明示例：nth-​​child(index/even/odd/equation) 匹配其父元素下的第 N 个子元素或奇偶元素

‘:eq(index)’ 只匹配一个元素，这个元素会匹配每个父元素的子元素。 :nth-child 从 1 开始， :eq() 从 0 开始！

可用：

nth-child(偶数)

:nth-child(奇数)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth-child(3n+2)

在每个 ul 中找到第二个 li：

$(“ul li:nth-child(2)”):first-child 匹配第一个子元素

‘:first’ 只匹配一个元素，这个选择器会匹配每个父元素一个子元素

找到每个 ul 中的第一个 li：

$(“ul li:first-child”):last-child 匹配最后一个子元素

‘:last’ 只匹配一个元素，这个选择器会匹配每个父元素一个子元素

查找每个ul中的最后一个li：

$(“ul li:last-child”):only-child 如果一个元素是父元素的唯一子元素则匹配

如果父元素包含其他元素，则不匹配。

在ul中查找li是唯一的子元素：

$(“ul li:only-child”)

8.表单选择器表单

名称说明说明：input匹配所有input、textarea、select和button元素，查找所有input元素：

$(“:input”):text 匹配所有文本框 查找所有文本框：

$(“:text”):password 匹配所有密码框 查找所有密码框：

$(“:password”):radio 匹配所有单选按钮 找到所有单选按钮:checkbox 匹配所有复选框 找到所有复选框：

$(“:checkbox”):submit 匹配所有提交按钮以查找所有提交按钮：

$(“:submit”):image 匹配所有图片字段

匹配所有图像字段：

$(“:image”):reset 匹配所有重置按钮以查找所有重置按钮：

$(“:reset”):button 匹配所有按钮以查找所有按钮：

$(“:button”):file 匹配所有文件字段 查找所有文件字段：

$(“:file”)

9.表单过滤器

名称描述说明：启用匹配所有可用元素

查找所有可用的输入元素：

$(“input:enabled”):disabled 匹配所有不可用的元素 查找所有不可用的输入元素：

$(“input:disabled”):checked 匹配所有选中的选中元素（复选框、单选框等，不包括select中的选项）以查找所有选中的复选框元素：

$(“input:checked”):selected 匹配所有选中的选项元素 查找所有选中的选项元素：

$(“选择选项：选中”)

六、jQuery 选择器实验室

jQuery 选择器实验室使用了《jQuery in Action》一书中的代码，我觉得这对学习选择器很有帮助。

我们的实验是一个包含许多元素的页面：

在lab页面的“Selector”输入框中输入一个jQuery选择器表达式，所有匹配该表达式的元素都会显示一个红色框：

如上图，输入“.myList”后点击“应用”，下面的输出框会显示运行结果，选中的元素会显示在右侧的红色框内。

代码可在本章末尾下载。

七、API 文档

jQuery 官方 API：

中文在线API：

中文jQuery手册下载：

八、总结

本章讲解的jQuery还属于基础支持，所以应用示例不多。虽然很基础，但很难一下子记住。 jQuery选择器可以说是最考验一个人的jQuery功底了。在下一章中css复合选择器有哪些，我们将解释如何操作 jQuery 包装集和动态创建新元素。

宁波