JQuery官方学习资料（译）：选择元素

 

• 选择元素

    JQuery最基本的概念是“选择一些元素并让它们做些什么”。JQuery支持大部分的CSS3的选择器，以及一些非标准的选择器。

 

• 通过ID选择元素

$( "#myId" );

 

• 通过Class选择元素

$( ".myClass" );

 

• 通过Attribute选择元素

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

 

• 通过复合CSS选择器选择元素

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

 

• 伪选择器

$( "a.external:first" );

$( "tr:odd" );

 

// 选择#myForm中的所有input元素

$( "#myForm :input" );

$( "div:visible" );

 

// 除了前三的div

$( "div:gt(2)" );

 

// 所有当前为animated的div。

$( "div:animated" );

    当使用:visible和:hidden这两个伪选择器时，JQuery测试的是真实元素的可见性，不是CSS样式中的visibility和display这两个属性，通过JQuery可以看到的是物理页面上的高度和宽度均大于零的元素。

    然而，这样的测试不会在<tr>元素中进行。在<tr>元素的情况下，JQuery会检查CSS样式中的display属性，如果它的display属性设置为none的话，将被认为是隐藏的元素。

    没有被添加到DOM的元素将会总被认为是隐藏的，即使它的CSS样式是设置的可见。

 

• 选择器的选择

    选择一个合适的选择器可以提高JavaScript的性能。有一点特殊的是，当通过class选择元素时包含元素的类型是很有帮助的。另一方面，太多的特殊性，也可能是一件坏事。一个选择器”#myTable th.special“如果是可以完成工作的，那么”#myTable thead tr th.special“则是使用过度的。

    JQuery提供了许多基于属性的选择器，允许选择器基于任意属性的内容并且可以使用简化的正则表达式。

// 寻找所有的rel属性以"thinger"结尾的<a>元素

$( "a[rel$='thinger']" );

    虽然这样可以用在紧要关头，但是它们也会在旧浏览器内缓慢的运行。只要有可能，请通过ID、Class和标签名使用选择器。

 

• 判断选择器是否包含任何元素

    一旦你使用了选择器，你会想要知道它是否正常工作，常见的错误是：

// 这无法运行

if ( $( "div.foo" ) ) {

...

}

    这是无法工作的。当一个选择器是引用$()的时候，一个对象总是被返回，并且被当做为true，即使选择器不包含任何元素，if中的代码仍然会继续运行。

    最好的确定是否有任意元素的方法是测试选择器。.length属性，可以告诉我们有多少元素是被选择的，如果答案是0，.length属性将被作为false执行。

// 测试选择器是否包含了元素

if ( $( "div.foo" ).length ) {

...

}

 

• 保存选择器

    JQuery不会缓存你的元素，如果你需要一个选择器，那么你需要再次生成一个选择器，这时你应该保存选择器在一个变量里，而不是重复生成选择器。

var $divs = $( "div" );

    在上面的例子中，变量名以$符号开头，与其他语言不同的是，$符号开头在JavaScript中没什么特别之处，它仅仅是另一种个性，它用来表示该变量包含一个JQuery对象，这种做法仅仅是惯例，不是强制性的。

    一旦选择器存储在变量中，你可以调用JQuery方法在这个变量上，就和在原生的选择器上调用一样。

    一个选择器仅仅可以获得在页面上生成该选择器的时候所有的元素。当元素被添加到页面之后，你将要重复生成这个选择器，或者添加它们到选择器变量中。存储的选择器变量不会自动更新DOM的变化。

 

• 精炼和过滤选择器

    有的时候，选择器包含了超过你想要的东西，JQuery提供了几个方法来精炼和过滤选择器。

// 精炼选择器

$( "div.foo" ).has( "p" ); // div.foo元素包含的<p>标签

$( "h1" ).not( ".bar" ); // 没有class为bar的h1元素

$( "ul li" ).filter( ".current" ); // class为current的unordered list子项

$( "ul li" ).first(); // 第一个unordered list的子项

$( "ul li" ).eq( 5 ); // 第六个子项

 

• 选择表单元素

    JQuery提供了几个伪选择器来帮助寻找表单中的元素。这些都是特别有用的，因为它可以根据元素的状态或者使用标准CSS选择器的类型来区分表单中的元素。

• • :button

    使用:button伪选择器指向任意<button>元素和type="button"的元素。

$( "form :button" );

• • :checkbox

    使用:checkbox伪选择器指向任意type="checkbox"的<input>元素。

$( "form :checkbox" );

• • :checked

    不要与:checkbox混淆，:checked仅仅指向checked的复选框和单选框。当使用了复选框和单选框时，:checked伪选择器才会工作。

$( "form :checked" );

• • :disabled

    使用:disabled伪选择器指向任意带有disabled属性的元素。

$( "form :disabled" );

• • :enabled

    与:disabled伪选择器相反，:enabled伪选择器指向任意不带有disabled属性的元素。

$( "form :enabled" );

• • :file

    使用:file伪选择器指向任意type="file"的<input>元素。想要在浏览器中获得更好的性能，使用[type="file"]取代:file伪选择器。

$( "form :file" );

• • :image

    使用:image伪选择器指向任意type="image"的<input>元素。想要在浏览器中获得更好的性能，使用[type="image"]取代:image伪选择器。

$( "form :image" );

• • :input

    使用:input伪选择器指向任意<input>、<textarea>、<select>和<button>元素。

$( "form :input" );

• • :password

    使用:password伪选择器指向任意type="password"的<input>元素 。想要在浏览器中获得更好的性能，使用[type="password"]取代:password伪选择器。 

$( "form :password" );

• • :radio

    使用:radio伪选择器指向任意type="radio"的<input>元素。想要在浏览器中获得更好的性能，使用[type="radio"]取代:radio伪选择器。 

$( "form :radio" );

    选择一组相关的radio如下：

$( "form input[name='gender']:radio" );

• • :reset

    使用:reset伪选择器指向任意type="reset"的<input>元素 。想要在浏览器中获得更好的性能，使用[type="reset"]取代:reset伪选择器。 

$( "form :reset" );

• • :selected

    使用:selected伪选择器指向任意<option>中的被选择元素。

$( "form :selected" );

• • :submit

    使用:submit伪选择器指向任意<button>元素或者type="button"的<input>元素。想要在浏览器中获得更好的性能，使用[type="submit"]取代:submit伪选择器。 

$( "form :submit" );

    :submit伪选择器适用于<button>元素和<input>元素，一些浏览器（例如IE）默认情况下不会自动设置<button>元素的type="submit"。

• • :text

    使用:text伪选择器指向任意type="text"的<input>元素 。想要在浏览器中获得更好的性能，使用[type="text"]取代:text伪选择器。 

$( "form :text" );

    为了获得使用“:xxx”的最佳性能，最好先使用标准JQuery选择器来选择元素，然后使用.filter( ":xxx" )。 或者使用其他优于在标签名称或一些其他的选择器上加伪选择器的可选方式。