jQuery過濾選取器詳解

jQuery過濾選取器詳解
基本過濾選取器選取第一個元素(: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)

        //選取所有不可見的元素.包括.      $('#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);      })