1. 程式人生 > >jQuery - 使用要點 - 選擇元素

jQuery - 使用要點 - 選擇元素

選擇文件元素

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