jQuery 選取器

from http://article.denniswave.com/5254

單一選取器

• 新增 id 為 test 的 css class:add

$("#test").addClass('add');

• 隱藏 element 為 a 的內容：

$("a").hide();

• 隱藏類別為 class 的內容：

$(".class").hide();

• 隱藏所有的物件：

$("*").hide();

• 更改連結中含有 .pdf 的連結背景色：

$('a[@href$=".pdf"]').addclass('pdf');
.pdf {
background-color: green;
}

階層選取器

• 從屬關係
選取<form></form>之中所有 input 欄位：

$("form input").addClass('forminput');

• 垂直選取
選取在 form 下面的 input 欄位：

$("form input").addClass('forminput');

選取在 form 下面的元素：

$("form").children();  //取得下一層的子元素物件集合
$("form").contents();  //取得全部的子元素物件

選取在 td 上面的元素：

$("td").parent();      //取得最接近的父元素物件
$("td").parents();     //取得全部的父元素物件

所以就可以達到選取一整行的目的：

$("td").parent().parent().hide();  //隱藏一整行

• 水平選取
取得之前或之後的dom物件：

$("#selectNode").prev();     //選取前面一個
$("#selectNode").next();     //選取後面一個

$("#selectNode").prevAll();  //從前一個一直到最前面一個
$("#selectNode").nextAll();  //從下一個一直到最後一個

而且還可以加上搜尋物件的條件，就可以把所有的 h1 都加上背景：

<div>
<pid="pnode">testp1</p>
<span>tests1</span>
<h1>hi,iambig</h1>
<p>testp2</p>
<span>tests2</span>
<h1>hi,iamnotsmall</h1>
<div>

$("#pnode").nextAll("h1").css("background","red");

• 第一個指定名稱選取
選取 prev+next 完整的組合之後的第一個指定名稱。選取 <lable></lable>之間第一個不歸屬任何組合(未被選取)的 input：

$("lable+input").addClass('labelinput');

• 所有指定名稱選取
選取 <lable></lable>之間所有不歸屬任何組合(未被選取)的 input：

$("lable~input").addClass('labelinput');

條件選取器

• :first 符合定義的第一個物件
套用 first 樣式到表格的第一列：

$("tr:first").addClass('first');

• :last 符合定義的最後一個物件
• :not 排除定義之後的物件
除了表格的第一行，其他行套用 row 樣式：

$("tr:not(:first)").addClass('row');

• :even - 選取偶數的物件、:odd - 選取奇數的物件
Javascript 是由0開始算，CSS 是由1開始算。將奇數列套用 color 樣式：

$("tr:odd").addClass('color');

• :gt - 比較式
:eq(index) - 符合定義的第幾個物件
:qt(index) - 符合定義之上的物件
:lt(index) - 符合定義之下的物件
將第三個以後的行都套用 color 樣式：

$("tr:gt(2)").addClass('color');

• :header - 針對 h1, h2, h3 選取

內容選取器

• :contains(text) - 含有"text"文字的物件
網頁載入成功後，將<div></div>中含有 "Good" 文字的物件套用 color 樣式（整個<div></div>包含的內容都會套用，不只"Good"文字）：

$(document).ready(function(){
    $("div:contains('Good')").addClass('color');
});

• :empty - 空白內容的物件

其他

• :hidden - 隱藏的物件
顯示被隱藏的行（用 fade in 特效），並套用 color 樣式：

$("tr:hidden").addClass('color').fadeIn("slow");

• [attribute=value] - 特定屬性為某值的物件
表格欄位中，class 為 test 的套用 color 樣式：

$("td[@class='test']").addClass('color');

• [attribute^=value] - 特定屬性開頭為某值的物件
連結為 y 開頭的套用 color 樣式：

$("a[href^='y']").addClass('color');

• [attribute$=value] - 特定屬性結尾為某值的物件
• [attribute*=value] - 特定屬性含有某值的物件

多重選取器結合

將[]結合就可以進行多重選取，選取連結中有指定 id 並且開頭為 y 的物件套用 color 樣式：

$("a[id][href^='y']").addClass('color');

篩選器（Traversing）

• hasClass - 尋找擁有指定 class 的物件
先替某些物件加上一個 test 的 class，利用 hasClass('test') 取得此物件。將含有 fade 這個樣式的物件隱藏：

$(document).ready(function(){
  $('#myimg img').each(function(){        //循序處理每個 img
  if ($(this).hasClass('fade'))
  {
   $(this).fadeOut(1000);
  }
 });
  });

• filter - 尋找指定敘述的物件
filter('.fade') 就是尋找 class=fade 的物件，所以上例可以改寫成：

$(document).ready(function(){
    $('#myimg img').filter('.fade').fadeOut(1000);
});

• slice - 擷取特定長度的物件
slice(start,[end]) start：開始的 index（從0開始），End：長度。slice(1,3) 會取得第2~4個物件