jQuery入门：选择元素 Selecting Elements

jQuery的一个很基础概念是“选择某些元素并用它们做些事情”。jQuery不仅支持大部分CSS3的选择器，而且支持一些非标准的选择器。要查看完整的选择器参考资料，可访问Selectors documentation on api.jquery.com。

用ID选择元素

$( "#myId" ); //注意，ID在每个页面中必须是唯一的

用类名选择元素

$( ".myClass" );

用属性选择元素

$( "input[name='first_name']" ); // 当心，在老版本的浏览器中，这种方式会很慢

用混合的CSS选择器选择元素

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

伪选择器

$( "a.external:first" );
$( "tr:odd" );

//在表单中选择所有的input元素（更多的在这下面）。
$( "#myForm :input" );
$( "div:visible" );

// 除了前三个divs以外，所有的divs（index大于2的所有divs）
$( "div:gt(2)" );

//所有当前的动画divs。
$( "div:animated" );

注意：当应用

:visible

和

:hidden

伪选择器的时候，jQuery测试实际元素的可见性，而不是元素CSS的

visibility

或

display

属性。 如果在页面中元素的物理高度和宽度都大于零，jQuery认为是看得到的。

当然，这个测试不能在运行于

<tr>

元素。原因是 jQuery检查

<tr>

的CSS的

display

属性，并且认为如果元素的

display

属性是none的话它是隐藏的。

元素没有被增加到DOM中经常被认为是隐藏的，即使CSS影响了它们将它们渲染为可见的。查看 操作元素章节来学习如何创建并且增加元素到DOM。

选择选择器

选择恰当的选择器是一种改进JavaScript’s性能的方法。少量的特异性——比如说，当用class名选择元素的时候包含元素类型——能够运用很广泛。另一方面，太多的特异性会是一个糟糕的东西。象

#myTable thead tr th.special

这样的选择器会覆盖

#myTable th.special

这样的选择器的运行。

jQuery提供了很多基于属性的选择器，允许基于任意属性的内容应用简单的正则表达式来实现选择元素。

//找到所有的rel属性是以"thinger"字符串结尾的<a>元素
$( "a[rel$='thinger']" );

虽然这些在紧急关头会很有用，但它们在旧的浏览器也会变得非常慢。只要可以，使用IDs，class名和标记名来建立包装集。

我的包装集包含了哪些元素？

一旦你创建了一个包装集，你通常会想知道能对包装集进行哪些操作。常犯的错误：

//不会工作！
if ( $( "div.foo" ) ) {
...
}

这是不会工作的。当一个包装集用

$()

创建，通常会返回一个对象，并且这个对像的评价通常是

true

。即使包装集中不包含任何元素，在

if

声明中的代码依然运行。

确定包装集中有多少元素，最好办法是检测包装集的

.length

属性，它会告诉你多少元素被选择。如果答案是0，当用做布尔值的时候，

.length

属性将评价为

false

。

// 测试包装集中包含元素的数量
if ( $( "div.foo" ).length ) {
...
}

保存包装集

jQeury不会为你缓存元素。如果你已经创建了包装集，那么你需要再创建一次，你应该宁可把包装集保存在变量中也不愿意重复创建。

var divs = $( "div" );

一旦包装集被存储在变量中，你可以用这个变量来调用jQuery方法就像你用初始的包装集调用它们一样。

包装集仅仅可以取到创建包装集的当时已经存在于页面中的元素。如果元素晚一些被添加，你不得不重复这个包装集或者把它们的包装集另外的存储到变量中。当DOM改变的时候，保存的包装集不会魔法般的更新。

精练和过滤结果集

有时候包装集包含的元素比你想要的更多一些。 jQuery提供了一些方法来精简和过滤包装集。

//精简包装集
$( "div.foo" ).has( "p" );         //包含<p>标记的div.foo元素（s）
$( "h1" ).not( ".bar" );           //class不是bar的h1元素（s）
$( "ul li" ).filter( ".current" ); //class为current的无序列表项
$( "ul li" ).first();              //无序列表项的第一个元素
$( "ul li" ).eq( 5 );              //第六个

选择表单元素

jQuery 提供了一些伪选择器来帮助找到表单中的元素。这些对于使用标准CSS选择器的状态或类型难以区分的表单元素特别有帮助。

:checked

不要被:checkbox迷惑，

:checked

目标选中复选框，但是时刻记住这个选择器也会作用于单选按钮和

<select>

元素（如果只有

<select>

元素，使用

:selected

选择器）：

$( "form :checked" );

当使用 checkboxes , radio buttons 和 selects的时候，

:checked

伪选择器会起作用。

:disabled

应用

:disabled

的目标是任何有

disabled

属性的

<input>

元素。

$( "form :disabled" );

为了获得更好的性能使用

:disabled

，首先用标准的jQuery选择器选择元素，然后用

.filter( ":disabled" )

，或在伪选择器之前有标签名或一些其他的选择器。

:enabled

和:disabled 相反的伪选择器，

:enabled

伪选择器目标是任何没有

disabled

属性的元素。

$( "form :enabled" );

为了获取更好的性能使用

:enabled

，首先用标准的jQuery选择器选择元素，然后用

.filter( ":enabled" )

，或者在伪选择器之前有标签名或者一些其他的选择器。

:input

使用

:input

选择器可以选择所有的

<input>

,

<textarea>

,

<select>

, 和

<button>

元素：

$( "form :input" );

:selected

使用

:selected

伪类目标是所有

<option>

元素中被选中的条目：

$( "form :selected" );

为了获取更好的性能使用

:enabled

，首先用标准的jQuery选择器选择元素，然后用

.filter( ":selected" )

，或者在伪选择器之前有标签名或者一些其他的选择器。

属性选择

jQuery提供伪选择器来选择和它们的类型相符的表单特有元素。

:password

:reset

:radio

:text

:submit

:checkbox

:button

:image

:file

所有的这些性能方面的记录，一定要看the API docs 提供的更深入的信息。

原文地址