jQuery 介紹(一)選取器

• animate - 動畫效果

animate(params,[duration],[easing],[callback])

params	CSS 語法
duration	動畫完成 params 的時間。("slow","normal","fast",微秒)
easing	內定值 linear 和 swing。(需要外掛)
callback	當效果完成時只執行一次的 function

範例（每次往左移動 50px）：

$("#left").click(function(){
$(".myshow").animate({left: '-50px'},"slow");
});

• 單一選取器
  • 新增 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個物件

From：《網頁設計，愛上jQuery》ISBN:978-986-6850-844

Please follow and like us: