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提供伪选择器来选择和它们的类型相符的表单特有元素。
所有的这些性能方面的记录,一定要看the API docs 提供的更深入的信息。