jQuery选择器用于选择HTML页面中的DOM元素。大多数jQuery代码以jQuery选择器开头。该代码选择一个或者多个HTML元素，然后使用jQuery遍历函数遍历DOM元素，通过jQuery DOM操纵函数操作DOM元素，通过jQuery事件函数为其添加事件侦听器，或者通过jQuery为其添加效果效果函数。

jQuery包含各种各样的选择器，它们可以根据HTML元素的元素名称，id，属性值，可见性，元素顺序和许多其他条件来选择HTML元素。该jQuery选择器教程将介绍最常用的选择器。有关所有jQuery选择器的完整列表，请参见官方jQuery文档中的以下页面：

http://api.jquery.com/category/selectors/

jQuery选择器概述

jQuery选择器是一个字符串，它指定要选择的HTML元素。选择器字符串被传递到$()或者jQuery()选择函数，该函数返回所选元素的集合。

jQuery选择器语法与CSS选择器相同，因此，如果我们熟悉CSS选择器，我们将很快学习jQuery选择器。

jQuery使我们可以根据以下条件选择元素：

• 元素名称(例如" p"，" a"，" div"等)
• 元素编号
• 元素CSS类
• 元素属性
• 元素可见性
• 元素顺序
• 表格栏位
• 元素父母或者子女
• 以上的组合

我将在以下各节中介绍所有这些选项。

jQuery选择器示例

首先，让我为我们展示一个简单的jQuery选择器示例：

var theDiv = $("#theDiv");

本示例选择id为theDiv的div元素，这意味着具有value为theDiv的id属性的div元素。

$()和jQuery函数

$()返回jQuery增强的元素集。这个jQuery增强的元素集包含许多实用程序函数，可以将其应用于集合中的所有元素。例如，以下是在集合中所有选定元素上设置CSS类的方式：

var theDiv = $("#theDiv");

theDiv.addClass("newCssClass");

此示例在集合中的所有元素上设置CSS类newCssClass。由于该示例仅选择一个元素，因此只有一个元素将获得新的CSS类。

编写上述代码的一种较短方法是：

$("#theDiv").addClass("newCssClass");

注意addClass()函数是如何直接链接到$()调用的。

jQuery增强选择集上的许多实用程序函数都返回选择集本身。这意味着我们可以在选择集上链接方法调用，如下所示：

$("#theDiv").addClass("newCssClass")
            .css("border", "1px solid #cccccc")
            .css("background-color", "#f0f0f0")
    ;

如所暗示的，该技术称为方法链接。在JavaScript世界中，旨在与方法链接一起使用的API也称为"流畅" API。 jQuery的流利风格API使更改DOM非常容易。

除了使用$()函数，我们还可以使用jQuery()函数。这两个函数的作用完全相同，但是有时我们可能会使用其他JavaScript库，这些库也定义了$()函数。在这种情况下，请改用jQuery()函数。

选择集上的许多实用程序函数在此jQuery教程资源的单独文本中都有介绍。例如，有遍历函数，CSS操纵函数，DOM操纵函数，各种效果(例如元素的淡入和滚动)，事件侦听器函数等等。

find()函数

由$()或者jquery()函数返回的选择集包含一个名为find()的函数。 find()函数可用于查找选择集中元素的后代。 " find()"函数将选择器字符串作为参数，指示选择集中要查找的元素。

find()函数仅搜索选择集中元素的后代。即，选择集中元素的子代及其子代等。

这是一个jQueryfind()示例：

$("ul").find("li");

这个例子将在所有ul元素中找到所有li元素。这类似于使用后代选择器，如下所示：

$("ul li");

find()函数返回一个新的选择集。它不会修改调用它的选择集。

选择集还具有一个" children()"函数，该函数与" find()"类似，不同之处在于" children()"可以与参数(选择字符串)一起使用，并且只能搜索选择集中的元素。

filter()函数

选择集还包含一个名为filter()的函数。 filter()函数与find类似，不同之处在于它也适用于选择集中的元素，而不仅仅是它们的子代和后代。

" filter()"函数采用选择器字符串或者用于过滤选择集的函数。 filter()函数返回一个新的选择集。它不会修改调用它的选择集。这是一个jQueryfilter()示例：

$("ul").filter(".taskList");

此示例首先选择所有ul元素，然后过滤该集合以返回包含CSS类taskList的选择集中的所有元素(包括选定的ul元素的后代)。

我们还可以将过滤器函数传递给filter()。这是一个以filter函数作为参数的filter()示例：

$("a").filter(function() {
    return $(this).attr("href") !== "undefined" ;
});

本示例选择所有a元素，然后使用过滤器函数对其进行过滤。如果给定的元素a包含href属性，则过滤器函数返回true。

在过滤器参数函数内部，变量" this"指代调用" filter()"函数的选择集中的每个元素。我们还可以通过在过滤器参数函数中插入index参数来获取要检查的元素的索引。这是之前添加了index参数的示例。

$("a").filter(function(index) {
    return $(this).attr("href") !== "undefined" ;
});

has()函数

选择集还包含一个名为" has()"的函数。 has()函数将选择器字符串作为参数，就像find()和filter一样。 " has()"将选择器字符串与选择集中元素的所有后代进行匹配。如果选择集中的元素包含与选择器字符串匹配的后代，则具有匹配后代的元素将包含在由" has()"返回的新选择集中。

这是一个jQueryhas()示例：

$("div").has("p");

此示例首先选择所有div元素，然后选择包含一个或者多个p元素的所选div元素中的元素。

has()vs find()vs filter()

jQuery选择集的三个函数" has()"，" find()"和" filter()"十分相似，但是它们选择的元素之间有一些重要区别。

" has()"函数仅选择已经属于选择集的元素。即使使用后代来确定要选择的元素，它也不会选择任何后代。换句话说，它选择具有与选择器匹配的元素的元素(因此名称为" has()")。

find()函数仅选择选择集中元素的后代元素。与给定选择器匹配的所有元素将成为返回的选择集的一部分。换句话说，它在选择集中的元素内找到匹配的元素。不在所选元素本身之中。

filter()函数选择选择集中的两个元素及其后代。换句话说，它根据选择器过滤选择集中的所有元素及其后代。

查看以下HTML：

<div>
    <p>Paragraph 1</p>
</div>
<div>
    <p>Paragraph 2</p>
</div>
<div>
    <p>Paragraph 2</p>
</div>

以下三个表达式将返回不同的选择集。

$("div").has   ("p");    
$("div").find  ("p");    
$("div").filter("p");

$(" div").has(" div，p");将选择所有包含p元素的div元素作为后代。那是三个顶级的" div"元素。

$(" div").find(" div，p");将选择所有p元素，它们是三个顶级div元素的后代。那将是三个子p元素。

$(" div").filter(" p");将选择选择集中的所有p元素，或者是选择集中的元素的后代。在此示例中，这也将是三个子p元素，因为第一个选择集不直接包含任何p元素(第一个选择集仅包含三个顶级div元素)。

元素名称选择器

元素名称选择器使我们能够按其名称选择元素，即某种类型或者种类的元素。例如，所有<a>元素或者<p>元素。这是一个jquery元素名称选择器示例：

$('a');

这个例子选择了所有a元素，但实际上并没有对元素做任何事情。这是一个更改所有a元素的CSS样式的示例：

$('a').css('background-color', '#00ff00');

本示例将所有a元素的背景色设置为绿色。

元素ID选择器

元素ID选择器使我们可以通过其ID选择元素。元素id是在其id属性中指定的。 " id"在页面中必须是唯一的，并且区分大小写。这是一个jquery元素ID选择器示例：

<script type="text/javascript">

$(document).ready(function() {
    $('#theId').css('background-color', '#00ff00');
});

</script>

<div id="theId">
    text
</div>

本示例将选择具有id'theId'的div元素，并将其背景颜色更改为绿色。

请注意，在jQuery选择器中，id前面有一个#号。这向jQuery发出信号，表明我们正在通过其" id"来选择元素。

CSS类选择器

类选择器使我们可以根据元素的CSS类选择元素。这是一个jquery类的选择器示例：

$('.theClass').text();

本示例选择所有具有CSSclasstheClass的元素。 CSS类是通过HTML元素的class属性设置的。 CSS类也可以通过jQuery设置。有关更多信息，请参见jQuery和CSS上的文本。

注意，在jQuery select参数中，类名前面的.是如何向jQuery发出信号的，我们希望通过CSS类进行选择。

属性选择器

通过属性选择器，我们可以基于元素具有的属性甚至是属性值来选择元素。我将在下面介绍几种不同的属性选择器。

具有属性选择器

使用"具有属性"选择器，可以选择具有特定属性的所有元素，而不必考虑该属性的值。

要指定属性选择器，我们可以在选择器字符串的方括号内写入属性名称。这是一个jQuery属性选择器示例(具有属性)：

$('[height]');

本示例将选择所有具有" height"属性的元素。

我们可以将属性选择器与其他选择器结合使用，例如元素名称选择器选择器，以选择所有具有" height"属性的" div"元素。这是元素名称，并具有属性选择器示例：

$('div[height]');

属性值等于选择器

使用属性值选择器，可以基于特定的属性值选择元素。这是一个jQuery属性值等于选择器的示例：

$('div[height=200]');

本示例选择所有具有" height"属性值" 200"的" div"元素。

我们还可以将值括在引号中，如下所示：

$('div[height="200"]');

属性值不等于选择器

使用属性值选择器，还可以基于不等于某个特定值的属性值来选择元素。这是通过在选择表达式中的" ="前面放置一个"！"来完成的。这是一个例子：

$('div[height!=200]');

这个例子选择了所有不具有属性值200的div元素。这也包括所有没有任何"高度"属性的" div"元素。

属性值前缀选择器

使用属性值前缀选择器，可以选择包含具有以给定值开头的值的属性的元素。换句话说，其中属性值包含某个前缀。这是一个jQuery属性值前缀选择器示例：

$('[href|="http://"]');

本示例选择所有具有href属性的元素，其中值以http：//开头。

属性值包含选择器

属性值包含选择器使我们能够选择具有属性的元素，其中值包含某个子字符串。这是一个包含示例的jQuery属性值：

$('[href*="/download/"]');

本示例选择所有在其" href"属性值中包含子字符串" / download /"的元素。

属性值以选择器结尾

以选择器结尾的属性使我们可以选择具有以某个子字符串结尾的值的属性的元素。这是一个以选择器示例结尾的jQuery属性值：

$('[href$=".pdf"]');

本示例选择所有具有" href"属性的元素，其值以" .pdf"结尾。

元素可见性选择器

元素可见性选择器使我们可以根据元素是否可见来选择元素。 jQuery包含以下以下元素可见性选择器：

• ：hidden
• ：visible

这是一个jQuery可见性选择器示例：

$(':visible');

$(':hidden');

第一行选择页面中所有可见的元素。第二行选择页面中所有隐藏的元素。

元素顺序选择器

元素顺序选择器使我们可以根据元素在HTML页面(在DOM中)中出现的顺序来选择元素。例如，我们可以选择页面中的第三个div元素，或者所有odd``div元素等。

这是一个jQuery元素顺序选择器示例：

$('div:first').text();

本示例选择页面中的第一个div元素。顺序写在jQuery选择器参数中的：之后。

我们可以使用以下顺序参数：

• ：first
• ：last
• ：even
• ：odd
• ：eq(index)
• ：gt(index)
• ：lt(index)

：first选择给定种类的第一个元素。

：last选择给定类型的最后一个元素。

：even选择给定类型的偶数元素，表示索引为0、2、4等的元素。

：odd选择给定种类的奇数元素，表示具有索引1、3、5等的元素。

：eq()从0开始选择具有给定索引的元素。例如，'div：eq(3)'在页面中选择第4个div元素。

：gt()选择索引大于给定索引的所有元素。例如，'div：gt(1)'选择索引大于1的所有div元素。

：lt()选择索引小于给定索引的所有元素。例如，'div：lt(2)'选择索引小于2的所有div元素。

表单字段选择器

jQuery包含一组表单字段选择器，这使从DOM中选择各种不同类型的表单字段变得更加容易。在本节中，我将介绍最常见的jQuery表单字段选择器。

：输入选择器

：input选择器使我们可以轻松选择input元素。这是一个jQuery：input的例子：

$(":input");

本示例选择页面中的所有"输入"字段。注意文本" input"之前的"："。必须使用此冒号，以免将其与基于元素名称的选择混淆。在此示例中，"输入"和"：输入"之间可能没有任何区别，但是对于某些表单字段选择器而言，存在区别。

：文本选择器

：text选择所有类型为text的输入字段。它不选择textarea元素。这是一个jQuery：text选择器示例：

$(":text");

：单选按钮选择器

：radio选择所有类型为radio的输入字段。也就是说，所有单选按钮元素。这是一个jQuery：radio选择器示例：

$(":radio");

：复选框选择器

：checkbox选择类型为checkbox的所有输入字段。换句话说，所有复选框元素。这是一个jQuery：checkbox选择器示例：

$(":selector");

：checked选择所有类型为checkbox或者radio的输入框。

：密码选择器

：password选择器选择类型为password的所有input元素。这是一个jQuery：password选择器示例：

$(":password");

：提交按钮选择器

：submit选择器选择类型为submit的所有input元素。也就是说，所有表单提交按钮。这是一个jQuery：submit选择器示例：

$(":submit");

：重置按钮选择器

：reset选择器选择所有类型为reset的input元素。即，所有表单重置按钮。这是一个jQuery：reset选择器示例：

$(":reset");

：文件框选择器

：file选择器选择file类型的所有input元素。也就是说，所有文件上传字段。这是一个jQuery：file选择器示例：

$(":file");

按钮选择器

"：button"选择器选择" button"类型的所有" button"元素和" input"元素。它不会选择"提交"类型的"输入"元素。这是一个jQuery：button选择器示例：

$(":button");

启用和禁用的元素选择器

：enabled选择器选择所有启用的元素。同样，：disabled选择器选择所有禁用的元素。这是一个jQuery：enabled和：disabled选择器示例：

$(":enabled");

$(":disabled");

空元素选择器

：empty元素选择器选择所有为空的元素，这意味着它们在其主体内没有子元素且没有文本(允许属性)。这是一个jQuery：empty选择器示例：

$(":empty");

包含文本选择器

：contains选择器用于选择包含特定文本的元素。这是一个jQuery：contains示例：

$(":contains(Hello World)");

本示例选择包含文本" Hello World"的所有元素。

目标元素选择器

：target选择器选择元素，该元素是当前URL的HTML片段目标。例如，如果浏览器中的URL是：

http://myapp.com/somepage.html#someElement

然后，：target选择器将选择具有id(或者名称)someElement的元素，因为URL点的HTML片段部分是#someElement。

这是一个jQuery：target选择器示例：

$(":target");

所有元素选择器

" *"(所有元素)选择器选择HTML文档中的所有元素。由于我们通常不需要这样做，因此\*选择器经常与其他选择器结合使用。这是元素名称选择器和父/子选择器与" *"选择器结合使用的示例：

$("div>*");

这个例子选择了所有div元素的所有直接子元素。 div部分表示所有div元素。 ">"部分表示左侧所选择内容的直接子代(所有" div"元素)。 " *"表示所有元素。总的来说，这意味着所有div元素的所有直接子元素。

父母与子女选择者

父和子选择器使我们能够根据其拥有的父代或者祖先，或者它们在父元素中的顺序来选择元素。我们可以使用以下父项和子项选择器根据其父子关系选择元素：

• ：第一个孩子
• ：最后一个孩子
• parent> child

：first-child选择器使我们可以选择父元素的第一个子元素。这是jQuery：first-child的例子：

$('div:first-child');

这个例子选择了所有div元素的第一个孩子。

：last-child选择器的工作方式与：first-child相同，不同之处在于它选择了父级的最后一个子级。

使用"父代>子代"选择器，我们可以选择特定父代元素的子代。这是一个jQueryparent> child示例：

$('div>p');

这个例子将选择div元素内的所有p元素。没有选择div元素之外的p元素。

组合选择器

我们可以结合许多jQuery选择器来创建更强大的选择器表达式。为了完全掌握，我们必须自己尝试组合，但是在这里，我将为我们提供一些示例，以便我们了解它的工作原理。

这是一个示例，该示例选择了将属性height设置为300的div元素中的div元素内的所有p元素：

$('div[height=300]>p');

下一个示例通过添加条件增强了第一个示例，该条件仅应选择CSS类go的p元素：

$('div[height=300]>p.go');

第三个示例通过仅选择带有idp_id的p元素来修改前面的示例：

$('div[height=300]>p#p_id');

如我们所见，组合选择器可用于创建函数强大且非常具体的选择表达式。