jQuery - 使用要点 - 选择元素

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013275171/article/details/85313770

选择文档元素

jQuery支持大多数CSS3选择器，以及一些非标准选择器。完整的选择器参考

通过ID

$( "#myId" ); // ID在每个页面是唯一的

通过Class Name

$( ".myClass" );

通过Attribute

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

通过混合使用CSS选择器

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

同以逗号分隔的选择器列表

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

伪类选择器

$( "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" );

/*
无意义的判断
$( "div.foo" ) 总会返回对象，条件判断会一直为 true
*/
if ( $( "div.foo" ) ) {
......
}

/*
改为判断返回的对象，是否包含被选取的元素
*/
if ( $( "div.foo" ).length ) {
......
}

保存选择者：jQuery不会保存任何选择者，若要再次使用此选择者，需将它存入变量中。当DOM改变，储存的选择者不会更新。

var divs = $( "div" );

提纯和过滤选择者

// 提纯选择者
$( "div.foo" ).has( "p" );         // 包含<p>标签的div.foo元素
$( "h1" ).not( ".bar" );           // 不含bar类的h1元素
$( "ul li" ).filter( ".current" ); // 包含current类的无需列表元素
$( "ul li" ).first();              // 仅无序列表的第一个元素
$( "ul li" ).eq( 5 );              // 无序列表的第6各元素，索引从0开始

选择表单元素：jQuery提供许多伪类选择器来帮助选取表单中的元素。

:checked 不要同checkbox混淆，:checked选择目标为被选中的checkbox，同时也作用于：radio buttong、<select>元素。(:selected伪类选择器，只作用于：<select>元素)。

:checked 伪类选择器作用于：checkbox、radio button、select

$( "form :checked" );

:disabled 此伪类选择器，选择目标为任何含disabled属性的<input>元素。

$( "form :disabled" );
// 更好的使用方式
$("form #inputID").filter(":disabled");

:enabled 基本上同:disabled伪类选择器作用相反；:enabled选择目标为任何不含disabled属性的元素。

$( "form :enabled" );
// 更好的使用方式
$("form input").filter(":enabled");

:input 此伪类选择器，选择所有的：<input> <textarea> <select> <button>元素。

$( "form :input" );

:selected 此伪类选择器，选择目标为处于<option>元素中的，被选中的元素。

$( "form :selected" );
// 更佳的使用方式
$("form option").filter(":selected");