jQuery 使用要點 選擇元素

jquery支援大多數css3選擇器，以及一些非標準選擇器。完整的選擇器參考

通過id

$( "#myid" ); // id在每個頁面是唯一的

$( ".myclass" );

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

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

var divs = $( "div" );

// 提純選擇者

$( "div.foo" ).has( "p" );         // 包含標籤的div.foo元素
$( "h1" ).not( ".bar" );           // 不含bar類的h1元素
$( "ul li" ).filter( ".current" ); // 包含current類的無需列表元素
$( "ul li" ).first();              // 僅無序列表的第乙個元素
$( "ul li" ).eq( 5 );              // 無序列表的第6各元素，索引從0開始

:checked不要同checkbox混淆，:checked選擇目標為被選中的checkbox，同時也作用於：radio buttong、元素。(:selected偽類選擇器，只作用於：元素)。

:checked 偽類選擇器作用於：checkbox、radio button、select

$( "form :checked" );

$( "form :disabled" );

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

$( "form :enabled" );

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

$( "form :input" );

$( "form :selected" );

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

jQuery查詢節點 選擇器

jquery通過選擇器來完成節點的查詢 1 基本選擇器 通用 所有的選擇器 使用 號來表示。標籤選擇器 標籤名 div 使用標籤名字來定位 id選擇器 id 類選擇器 class 群組選擇器 並集 table,td 所有的table和td都被選擇 組合選擇器 交集 p.c1 標籤為p而且他的clas...

使用jQuery實現元素拖動的要點

jquery ui可以很簡單的實現元素的拖動，有時候，我們不能使用jquery ui，或者不想因為拖動就引入乙個ui庫，就可以自己實現元素的拖動，下面筆者把自己使用jquery touchswipe元件實現拖動的關鍵點做簡要說明。html拖動的關鍵點就是修改元素的位置，通過相對偏移來實現，而這個偏移...

jQuery元素選擇

1 查詢所有符合條件的元素 find 舉例 ul find li addclass tmpexample 查詢頁面中ul元素下的所有li元素，並為查詢到的li元素增加tmpexample樣式。2 查詢指定元素的兄弟節點 siblings 舉例 li tmpcarrot slblings addcla...