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:

2 comments on “jQuery 介紹(一)選取器

  1. 不過突然想到……
    1.3的attribute前面已經不用加@了,
    我是最近才在使用jQuery的,
    一開始上網查的都是舊資料,
    困擾了很久說 :30

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *