发布在：使用 jQuery Core

选择元素

jQuery 最基本的概念是“选择一些元素并对它们执行操作”。jQuery 支持大多数 CSS3 选择器以及一些非标准选择器。有关完整的选择器参考，请访问 api.jquery.com 上的选择器文档。

链接 按 ID 选择元素

1
 
$( "#myId" ); // Note IDs must be unique per page.

链接 按类名选择元素

1
 
$( ".myClass" );

链接 按属性选择元素

1
 
$( "input[name='first_name']" );

链接 按复合 CSS 选择器选择元素

1
 
$( "#contents ul.people li" );

链接 使用逗号分隔的选择器列表选择元素

1
 
$( "div.myClass, ul.people" );

链接 伪选择器

1
2
3
4
5
6
7
8
9
10
11
12
 
$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

注意：在使用 :visible 和 :hidden 伪选择器时，jQuery 会测试元素的实际可见性，而不是其 CSS visibility 或 display 属性。jQuery 会查看元素在页面上的物理高度和宽度是否都大于零。

但是，此测试不适用于 <tr> 元素。对于 <tr>，jQuery 会检查 CSS display 属性，如果其 display 属性设置为 none，则会将元素视为隐藏。

尚未添加到 DOM 中的元素将始终被视为隐藏，即使影响它们的 CSS 会使它们显示出来。请参阅 操作元素 部分，了解如何创建元素并将其添加到 DOM 中。

链接 选择选择器

选择好的选择器是提高 JavaScript 性能的一种方法。过于具体可能是一件坏事。如果 #myTable th.special 这样的选择器可以完成工作，那么 #myTable thead tr th.special 这样的选择器就是多余的。

链接 我的选择是否包含任何元素？

一旦你做出了选择，你通常会想知道你是否有什么可以用的。一个常见的错误是使用

1
2
3
4
 
// Doesn't work!
if ( $( "div.foo" ) ) {
    ...
}

这将不起作用。当使用 $() 进行选择时，总是会返回一个对象，而对象总是求值为 true。即使选择不包含任何元素，if 语句内的代码仍然会运行。

确定是否存在任何元素的最佳方法是测试选择器的 .length 属性，它会告诉你选择了多少个元素。如果答案是 0，则 .length 属性在用作布尔值时将求值为 false

1
2
3
4
 
// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) {
    ...
}

链接 保存选择

jQuery 不会为你缓存元素。如果你做出了可能需要再次进行的选择，你应该将选择保存在一个变量中，而不是重复进行选择。

1
 
var divs = $( "div" );

一旦选择存储在变量中，你就可以在变量上调用 jQuery 方法，就像在原始选择上调用它们一样。

选择只获取在进行选择时页面上的元素。如果元素稍后添加到页面中，你将不得不重复选择或将它们添加到存储在变量中的选择中。存储的选择不会在 DOM 更改时神奇地更新。

链接 优化和筛选选择

有时选择包含的比你想要的更多。jQuery 提供了几种优化和筛选选择的方法。

1
2
3
4
5
6
 
// Refining selections.
$( "div.foo" ).has( "p" );         // div.foo elements that contain <p> tags
$( "h1" ).not( ".bar" );           // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first();              // just the first unordered list item
$( "ul li" ).eq( 5 );              // the sixth

链接 选择表单元素

jQuery 提供了几个伪选择器，它们有助于查找表单中的元素。这些伪选择器特别有用，因为根据状态或类型使用标准 CSS 选择器很难区分表单元素。

链接 :checked

不要与 :checkbox 混淆，:checked 针对 checked 复选框，但请记住，此选择器也适用于 checked 单选按钮和 <select> 元素（仅适用于 <select> 元素，使用 :selected 选择器）

1
 
$( "form :checked" );

:checked 伪选择器在与 复选框、单选按钮 和 选择 搭配使用时有效。

link :disabled

使用 :disabled 伪选择器可以针对具有 disabled 属性的任何 <input> 元素

1
 
$( "form :disabled" );

为了使用 :disabled 获得最佳性能，首先使用标准 jQuery 选择器选择元素，然后使用 .filter( ":disabled" )，或在伪选择器之前加上标签名称或其他选择器。

link :enabled

基本上是 :disabled 伪选择器的反向，:enabled 伪选择器针对任何没有disabled 属性的元素

1
 
$( "form :enabled" );

为了使用 :enabled 获得最佳性能，首先使用标准 jQuery 选择器选择元素，然后使用 .filter( ":enabled" )，或在伪选择器之前加上标签名称或其他选择器。

link :input

使用 :input 选择器可以选中所有 <input>、<textarea>、<select> 和 <button> 元素

1
 
$( "form :input" );

link :selected

使用 :selected 伪选择器可以针对 <option> 元素中的任何已选择项

1
 
$( "form :selected" );

为了使用 :selected 获得最佳性能，首先使用标准 jQuery 选择器选择元素，然后使用 .filter( ":selected" )，或在伪选择器之前加上标签名称或其他选择器。

link 按类型选择

jQuery 提供伪选择器，根据表单特定元素的类型来选择它们

对于所有这些，都有关于性能的旁注，因此请务必查看 API 文档 以获取更深入的信息。