jquery九大選擇器的用法舉例

時間 2019-11-06

標籤 jquery 九大選擇器用法舉例欄目 JQuery 简体版

原文原文鏈接

1：基本選擇器javascript

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

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

改變元素名爲 <div> 的全部元素的背景色爲 #00FFFF"jquery

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

改變 class 爲 mini 的全部元素的背景色爲 #FF0033"數組

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

改變全部元素的背景色爲 #00FF33"ide

$("*").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());
    };