jQuery過濾選取器詳解，jquery選取器詳解

jQuery過濾選取器詳解，jquery選取器詳解

過濾選取器

過濾選取器主要是通過特定的過濾規則來篩選出所需的 DOM元素,該選取器都以“:”開頭

按照不同的過濾規則,過濾選取器可以分為基本過濾,內容過濾,可見度過濾,屬性過濾,子項目過濾和表單對象屬性過濾選取器.

基本過濾選取器

基本過濾選取器樣本

改變第一個 div元素的背景色為 # bbffaa

改變最後一個 div元素的背景色為 # bbffaa

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

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

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

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

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

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

改變所有的標題元素的背景色為 # bbffaa

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

內容過濾選取器

內容過濾選取器的過濾規則主要體現在它所包含的子項目和常值內容上

內容過濾選取器樣本

改變含有文本 ‘di'的 div元素的背景色為 # bbffaa

改變不包含子項目(或者文本元素)的 div空元素的背景色為 # bbffaa

改變含有 class為 mini元素的 div元素的背景色為 # bbffaa

改變含有子項目(或者文本元素)的div元素的背景色為 # bbffaa

可見度過濾選取器

可見度過濾選取器是根據元素的可見和不可見狀態來選擇相應的元素

可見選取器 :hidden不僅包含樣式屬性 display為 none的元素,也包含文本隱藏欄位 (<input  type=“hidden”>)和 visible:hidden之類的元素

 

可見度過濾選取器樣本

改變所有可見的div元素的背景色為 # bbffaa

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

選取所有的文本隱藏欄位,並列印它們的值

屬性過濾選取器

屬性過濾選取器的過濾規則是通過元素的屬性來擷取相應的元素

 

屬性過濾選取器樣本

選取下列元素,改變其背景色為 # bbffaa

含有屬性title的div元素.

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

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

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

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

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

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

子項目過濾選取器

 

nth-child() 選取器詳解如下：

(1) :nth-child(even/odd):能選取每個父元素下的索引值為偶(奇)數的元素

(2):nth-child(2): 能選取每個父元素下的索引值為 2 的元素

(3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數的元素

(3):nth-child(3n + 1):能選取每個父元素下的索引值是 3n + 1的元素

子項目過濾選取器樣本

選取下列元素,改變其背景色為 # bbffaa

每個class為one的div父元素下的第2個子項目.

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

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

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

表單對象屬性過濾選取器

      此選取器主要對所選擇的表單元素進行過濾

      表單對象屬性過濾選取器樣本

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

       利用 jQuery對象的 length屬性擷取多選框選中的個數

      利用 jQuery對象的 text()方法擷取下拉框選中的內容

      表單選取器

 

以上就是關於jQuery過濾選取器的全部內容了，十分的詳盡，希望對小夥伴們有所協助。