基本過濾選擇器

選取第一個元素(:first)

       //選擇第一個div元素.
      $('#btn1').click(function(){
          $('div:first').css("background","#bfa");
      })

選取最後一個元素(:last)

      //選擇最後一個div元素.
      $('#btn2').click(function(){
          $('div:last').css("background","#bfa");
      })

去除所有的與給定選擇器匹配的元素(:not(selector))

      //選擇class不為one的 所有div元素.
      $('#btn3').click(function(){
          $('div:not(.one)').css("background","#bfa");
      })

選取索引是偶數的所有元素，索引從0開始(:even)

      //選擇 索引值為偶數 的div元素。
      $('#btn4').click(function(){
          $('div:even').css("background","#bfa");
      })

選取索引是奇數的所有元素，索引從0開始(:odd)

      //選擇 索引值為奇數 的div元素。
      $('#btn5').click(function(){
          $('div:odd').css("background","#bfa");
      })

選取索引等於指定index的元素，索引從0開始(:eq(index))

      //選擇 索引等於 3 的元素
      $('#btn6').click(function(){
          $('div:eq(3)').css("background","#bfa");
      })

選取索引大於指定index的元素，索引從0開始(:gt(index))

      //選擇 索引大於 3 的元素
      $('#btn7').click(function(){
          $('div:gt(3)').css("background","#bfa");
      })

選取索引小於指定index的元素，索引從0開始(:lt(index))

     //選擇 索引小於 3 的元素
      $('#btn8').click(function(){
          $('div:lt(3)').css("background","#bfa");
      })

選取標題元素(:header)

       //選擇 所有的標題元素.比如h1, h2, h3等等...
      $('#btn9').click(function(){
          $(':header').css("background","#bfa");
      })

選取當前正在執行的動畫的所有元素(:animated)

      //選擇 當前正在執行動畫的所有元素.
      $('#btn10').click(function(){
          $(':animated').css("background","#bfa");
      });

選取當前獲取焦點的所有元素(:focus)

      //選擇 當前獲取焦點的所有元素.
      $('#btn11').click(function(){
          $(':focus').css("background","#bfa");
      });

內容過濾選擇器

選取包含指定文字的元素(:contains(text))

      //選取含有文字"di"的div元素.
      $('#btn1').click(function(){
          $('div:contains(di)').css("background","#bbffaa");
      })

選取不包含子元素或文字的空元素(:empty)

      //選取不包含子元素(或者文字元素)的div空元素.
      $('#btn2').click(function(){
          $('div:empty').css("background","#bbffaa");
      })

選取含有選擇器匹配元素的元素(:has(selector))

      //選取含有class為mini元素 的div元素.
      $('#btn3').click(function(){
          $("div:has('.mini')").css("background","#bbffaa");
      })

選取包含子元素或文字的空元素(:parent)

      //選取含有子元素(或者文字元素)的div元素.
      $('#btn4').click(function(){
          $('div:parent').css("background","#bbffaa");
      })

可見性過濾器

選取不可見的元素(:hidden)

        //選取所有不可見的元素.包括<input type="hidden"/>.
      $('#btn_hidden').click(function(){
          $('div:hidden').show(3000).css("background","#bbffaa");
      })

選取可見的元素(:visible)

      //選取所有可見的元素.
      $('#btn_visible').click(function(){
          $('div:visible').css("background","#FF6500");
      })

屬性過濾器

選取擁有此屬性的元素([attribute])

      //選取含有 屬性title 的div元素.
      $('#btn1').click(function(){
          $('div[title]').css("background","#bbffaa");
      })

選取屬性值為value的元素([attribute=value])

      //選取 屬性title值等於 test 的div元素.
      $('#btn2').click(function(){
          $('div[title=test]').css("background","#bbffaa");
      })

選取屬性值不等於value的元素([attribute!=value])

      //選取 屬性title值不等於 test 的div元素.
      $('#btn3').click(function(){
          $('div[title!=test]').css("background","#bbffaa");
      })

選取屬性值以value開始的元素([attribute^=value])

      //選取 屬性title值 以 te 開始 的div元素.
      $('#btn4').click(function(){
          $('div[title^=te]').css("background","#bbffaa");
      })

選取屬性值以value結束的元素([attribute$=value])

      //選取 屬性title值 以 est 結束 的div元素.
      $('#btn5').click(function(){
          $("div[title$=est]").css("background","#bbffaa");
     })

選取屬性值含有value的元素([attribute*=value])

      //選取 屬性title值 含有 es  的div元素.
      $('#btn6').click(function(){
          $("div[title*=es]").css("background","#bbffaa");
      })

選取屬性值等於value或字首為value(即”value-xxx”)的元素([attribute|=value])

  //選取 屬性title等於en或以en為字首（該字串後跟一個連字元'-'）的元素
  $('#btn3').click(function(){
    $('div[title|="en"]').css("background","#bbffaa");
  })

選取屬性值用空格分隔的值中包含給定值的元素([attribute~=value])

  //選取 屬性title用空格分隔的值中包含字元uk的元素.
  $('#btn4').click(function(){
    $('div[title~="uk"]').css("background","#bbffaa");
  })

組合屬性選擇器([attribute1][attribute2]…[attributeN])

      //組合屬性選擇器,首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有 es 的元素.
      $('#btn7').click(function(){
          $("div[id][title*=es]").css("background","#bbffaa");
      })

子元素過濾選擇器

選取每個父元素下的第一個子元素，返回集合元素

      //選取每個父元素下的第一個子元素
      $('#btn2').click(function(){
          $('div.one :first-child').css("background","#bbffaa");
      })

選取每個父元素下的最後一個子元素，返回集合元素

      //選取每個父元素下的最後一個子元素
      $('#btn3').click(function(){
          $('div.one :last-child').css("background","#bbffaa");
      })

選取每個父元素下的唯一子元素，返回集合元素

      //如果父元素下的僅僅只有一個子元素，那麼選中這個子元素
      $('#btn4').click(function(){
          $('div.one :only-child').css("background","#bbffaa");
      })

選取每個父元素下的第index個子元素或者奇偶元素，index從1算起

      //選取每個父元素下的第2個子元素
      $('#btn1').click(function(){
          $('div.one :nth-child(2)').css("background","#bbffaa");
      })