jQuery - 使用要點 - 選擇元素
阿新 • • 發佈:2018-12-29
選擇文件元素
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");