发布于：使用 jQuery 核心

选择元素

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

link 按 ID 选择元素

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

link 按类名选择元素

1
 
$( ".myClass" );

link 按属性选择元素

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

link 按复合 CSS 选择器选择元素

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

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

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

link 伪选择器

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。

link 选择选择器

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

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

完成选择后，您通常需要知道是否有任何可供操作的内容。一个常见的错误是使用

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 ) {
    ...
}

link 保存选择

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

1
 
var divs = $( "div" );

将选择存储在变量中后，您可以像对原始选择调用 jQuery 方法一样对变量调用 jQuery 方法。

选择仅获取进行选择时页面上的元素。如果稍后将元素添加到页面，则必须重复选择或以其他方式将它们添加到存储在变量中的选择中。当 DOM 更改时，存储的选择不会神奇地更新。

link 优化和过滤选择

有时选择包含的内容超出了您的需求。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

link 选择表单元素

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

link :checked

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

1
 
$( "form :checked" );

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

link :disabled

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

1
 
$( "form :disabled" );

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

link :enabled

:enabled 伪选择器基本上是 :disabled 伪选择器的反向，它针对任何没有 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 文档以获取更深入的信息。