jquery九大選擇器的用法舉例

1：基本選擇器

改變 id 為 one 的元素的背景色為 #0000FF"

$("#one").css("background","#0000FF");

改變元素名為 <div> 的所有元素的背景色為 #00FFFF"

$("div").css("background","#00FFFF");

改變 class 為 mini 的所有元素的背景色為 #FF0033"

$(".mini").css("background","#FF0033");

改變所有元素的背景色為 #00FF33"

$("*").css("background","#00FF33");

改變所有的<span>元素和 id 為 two 的元素的背景色為 #3399FF"，注意，多個選擇器並列使用時中間用逗號隔開。

$("span,#two").css("background","#3399FF");

2：層次選擇器

改變 <body> 內所有 <div> 的背景色為 #0000FF"

//祖先元素和後代元素的關係
$("body div").css("background","#0000FF");

改變 <body> 內子 <div> 的背景色為 #FF0033"

//父元素和子元素的關係
$("body>div").css("background","#FF0033");

改變 id 為 one 的下一個 <div> 的背景色為 #0000FF"

$("#one+div").css("background","#0000FF");

改變 id 為 two 的元素後面的所有兄弟<div>的元素的背景色為 # #0000FF"

//獲取指定元素的後面所有兄弟元素
$("#two~div").css("background","#0000FF");

改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 #0000FF"

//獲取指定元素的所有兄弟元素
$("#two").siblings("div").css("background","#0000FF");

3：基礎過濾選擇器

改變第一個 div 元素的背景色為 #0000FF"

$("div:first").css("background","#0000FF");

改變最後一個 div 元素的背景色為 #0000FF"

$("div:last").css("background","#0000FF");

改變class不為 one 的所有 div 元素的背景色為 #0000FF"

$("div:not(.one)").css("background","#0000FF");

改變索引值為偶數的 div 元素的背景色為 #0000FF"

$("div:even").css("background","#0000FF");

改變索引值為奇數的 div 元素的背景色為 #0000FF"

$("div:odd").css("background","#0000FF");

改變索引值為大於 3 的 div 元素的背景色為 #0000FF"

$("div:gt(3)").css("background","#0000FF");

改變索引值為等於 3 的 div 元素的背景色為 #0000FF"

$("div:eq(3)").css("background","#0000FF");

改變索引值為小於 3 的 div 元素的背景色為 #0000FF"

$("div:lt(3)").css("background","#0000FF");

改變所有的標題元素的背景色為 #0000FF"

$(":header").css("background","#0000FF");

改變當前正在執行動畫的所有元素的背景色為 #0000FF"

function mover(){
   $("#mover").slideToggle("slow",mover);
  }
  mover();

  $("#b10").click(function(){
   $(":animated").css("background","#0000FF");
  };

4：內容選擇器

改變含有文字 ‘di’ 的 div 元素的背景色為 #0000FF"

$("div:contains('di')").css("background","#0000FF");

改變不包含子元素(或者文字元素) 的 div 空元素的背景色為"

$("div:empty").css("background","#0000FF");

改變含有 class 為 mini 元素的 div 元素的背景色為 #0000FF"

$("div:has(.mini)").css("background","#0000FF");

改變含有子元素(或者文字元素)的div元素的背景色為 #0000FF"

$("div:parent").css("background","#0000FF");

改變不含有文字 di 的 div 元素的背景色"

$("div:not(:contains('di'))").css("background","#0000FF");

5：可見度過濾選擇器

改變所有可見的div元素的背景色為 #0000FF"

$("div:visible").css("background","#0000FF");

選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 並設定其背景色為 #0000FF"

$("div:hidden").show().css("background","#0000FF");

選取所有的文字隱藏域, 並列印它們的值"

/*
   * <input type="hidden" value="hidden_1">
   <input type="hidden" value="hidden_2">
   <input type="hidden" value="hidden_3">
   <input type="hidden" value="hidden_4">
   */
  var $inputs = $("input:hidden");
  //javascript的變歷方法
         //  for(var i=0;i<$inputs.length;i++){
         //   var input = $inputs[i];
         //
         //   alert(input.value);
         //  }

  /*
   * each(function(index,domEle){})
   *   * jquery中的普通遍歷方法，需要jquery物件來呼叫
   *   * 回撥函式：function(index,domEle){}
   *    * index：獲取到的標籤的索引值
   *    * domEle：dom物件
   */

//js的變歷方法示例
  $inputs.each(function(index,domEle){
   //alert(domEle.value);
   //alert($(domEle).val());
   //alert(this.value);  //this代表的是domEle物件
   alert($(this).val());
  });

});

/*
   * jquery.each(object,function(index,domEle){})
   *   * 全域性遍歷函式，不需要jquery物件來呼叫
   *   * object：要遍歷的陣列或物件
   *   * 回撥函式：function(index,domEle){}
   *    * index：獲取到的標籤的索引值
   *    * domEle：dom物件
   */
  $.each($inputs,function(index,domEle){
   alert(domEle.value);
  });

6：屬性過濾器

含有屬性title 的div元素"

$("div[title]").css("background","#0000FF");

屬性title值等於test的div元素"

$("div[title=test]").css("background","#0000FF");

屬性title值不等於test的div元素(沒有屬性title的也將被選中)"

$("div[title!=test]").css("background","#0000FF");

屬性title值以te開始的div元素."

$("div[title^=te]").css("background","#0000FF");

屬性title值以est結束的div元素.."

$("div[title$=est]").css("background","#0000FF");

屬性title值含有es的div元素."

$("div[title*=es]").css("background","#0000FF");

選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素"

//多個屬性過濾選擇器並列使用，就這樣並列放置就OK
$("div[id][title*=es]").css("background","#0000FF");

7：子元素過濾選擇器

每個class為one的div父元素下的第2個子元素"

       :nth-child()子元素過濾選擇器，使用時需在其前面增加空格
       :nth-child()子元素過濾選擇器，其索引值是從"1"開始
      $("div[class=one] :nth-child(2)").css("background","#0000FF");

每個class為one的div父元素下的第一個子元素"

$("div[class=one] :first-child").css("background","#0000FF");

每個class為one的div父元素下的最後一個子元素"

$("div[class=one] :last-child").css("background","#0000FF");

如果class為one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素"

$("div[class=one] :only-child").css("background","#0000FF");

8：表單物件屬性過濾器

利用 jQuery 物件的 val() 方法改變表單內可用 <input> 元素的值"

         <input type="text" value="不可用值1" disabled="disabled">
         <input type="text" value="可用值1" >
        <input type="text" value="不可用值2" disabled="disabled">
         <input type="text" value="可用值2" >

         $("input[type=text]:enabled").val("xxx");

利用 jQuery 物件的 val() 方法改變表單內不可用 <input> 元素的值"

$("input[type=text]:disabled").val("xxx");

利用 jQuery 物件的 length 屬性獲取多選框選中的個數"

           <input type="checkbox" name="items" value="美容" >美容
          <input type="checkbox" name="items" value="IT" >IT
         <input type="checkbox" name="items" value="金融" >金融
         <input type="checkbox" name="items" value="管理" >管理

           alert($("input[type=checkbox]:checked").length);

利用 jQuery 物件的 text() 方法獲取下拉框選中的內容"

      <select name="job" id="job" multiple="multiple" size=4>
            <option >程式設計師</option>
            <option>中級程式設計師</option>
            <option>高階程式設計師</option>
             <option>系統分析師</option>
       </select>

       <select name="edu" id="edu">
            <option>本科</option>
             <option>博士</option>
             <option>碩士</option>
            <option>大專</option>
      </select>

    $("select option:selected").each(function(index,domEle){
           alert($(domEle).text());
    };

9：表單選擇器

$(":image")匹配所有的影象域

$(":reset")匹配所有重置按鈕

$(":button")匹配所有按鈕

$(":file")匹配所有檔案域

$("input:hidden")匹配所有不可見元素，或type為hidden的元素，這個選擇器不限於表單標籤，那些style為hidden的元素也會被匹配。

$("input:enabled")匹配所有可用的input元素，即不帶屬性disabled="disabled"

$("input:disabled")和上面相反

$("input:checked")匹配所有選擇的元素（包括，核取方塊，單選框，但不包括select的option）

$("select option:selected")匹配所有選擇的option元素。

jquery九大選擇器的用法舉例

相關文章