jQuery事件篇---過濾選擇器 & 表單選擇器

內容提綱：

過濾選擇器

1.基本過濾器

2.內容過濾器

3.可見性過濾器

4.子元素過濾器

5.其他方法

表單選擇器

 

6.常規選擇器

7.表單選擇器

8.表單過濾器

 

發文不易，轉載請注明出處！

 

 

過濾選擇器簡稱：過濾器。它其實也是一種選擇器，而這種選擇器類似與 CSS3(http://t.mb5u.com/css3/)里的偽類，可以讓不支持 CSS3 的低版本瀏覽器也能支持。和常規選擇器一樣，jQuery 為了更方便開發者使用，提供了很多獨有的過濾器。

一．基本過濾器

過濾器主要通過特定的過濾規則來篩選所需的 DOM 元素，和 CSS 中的偽類的語法類似：使用冒號(:)開頭。

 

圖1

 

$('li:first').css('background', '#ccc');                          //第一個li元素

$('li:last).css('background', '#ccc');                           //最后一個li元素

$('li:not(.red)).css('background', '#ccc');           　　       //非 class 為 red 的元素

$('li:even').css('background', '#ccc');                         //索引為偶數的元素

$('li:odd).css('background', '#ccc');                            //索引為奇數的元素

$('li:eq(2)).css('background', '#ccc');                         //指定索引值的元素

$('li:gt(2)').css('background', '#ccc');                         //大於索引值的元素

$('li:lt(2)').css('background', '#ccc');                           //小於索引值的元素

$(':header').css('background', '#ccc');                     　　　 //頁面所有 h1 ~ h6 元素

 

 

注意： :focus 過濾器， 必須是網頁初始狀態的已經被激活焦點的元素才能實現元素獲取。而不是鼠標點擊或者 Tab 鍵盤敲擊激活的。

$('input').get(0).focus();                             //先初始化激活一個元素焦點

$(':focus').css('background', 'red');            　　//被焦點的元素

 

 

jQuery 為最常用的過濾器提供了專用的方法，已達到提到性能和效率的作用：

$('li').eq(2).css('background', '#ccc');               //第三個li元素，負數從后開始

$('li').first().css('background', '#ccc');               //第一個li元素

$('li').last().css('background', '#ccc');               //元素 li 的最后一個元素

$('li').not('.red').css('background', '#ccc');       //元素 li 不含 class 為 red 的元素

 

注意：:first、:last 和 first()、last()這兩組過濾器和方法在出現相同元素的時候，first 會實現第一個父元素的第一個子元素，last 會實現最后一個父元素的最后一個子元素。所以，如果需要明確是哪個父元素，需要指明：

$('#box li:last').css('background', '#ccc');       //id為#box的元素中最后一個 li

//或

$('#box li).last().css('background', '#ccc');      //同上

 

 

二．內容過濾器

內容過濾器的過濾規則主要是包含的子元素或文本內容上。

 

圖2

 

$('div:contains("dream.com")').css('background', '#ccc');  //選擇含有 dream.com 文本的元素

$('div:empty').css('background', '#ccc');                  //選取不包含子元素或空文本的div元素

$('ul:has(.red)').css('background', '#ccc');               //選擇含有 class 是 red 的ul元素

$(':parent').css('background', '#ccc');                       //選取含有子元素或文本的元素

 

 

jQuery 提供了一個 has()方法來提高:has 過濾器的性能：

$('ul').has('.red').css('background', '#ccc');               //選擇子元素含有 class 是 red 的ul元素

 

jQuery 提供了一個名稱和:parent 相似的方法parent()，但這個方法並不是選取含有子元素或文本的元素，而是獲取當前元素的父元素，返回的是元素集合。

$('li').parent().css('background', '#ccc');                          //選擇當前元素的父元素

$('li').parents().css('background', '#ccc');                           //選擇當前元素的父元素及祖先元素

$('li').parentsUntil('div').css('background', '#ccc');         //選擇當前元素遇到 div 父元素停止

 

 

三．可見性過濾器

可見性過濾器根據元素的可見性和不可見性來選擇相應的元素。

 

圖3

 

$('p:hidden).size();                    //元素 p 隱藏的元素

$('p:visible').size();                     //元素 p 顯示的元素

 

注意：:hidden 過濾器一般是包含的內容為：CSS 樣式為 display:none、input 表單類型為type="hidden"和 visibility:hidden 的元素。

 

四．子元素過濾器

子元素過濾器的過濾規則是通過父元素和子元素的關系來獲取相應的元素。

 

圖4

 

$('li:first-child').css('background', '#ccc');                //每個父元素第一個 li 元素

$('li:last-child').css('background', '#ccc');                 //每個父元素最后一個 li 元素

$('li:only-child').css('background', '#ccc');                //每個父元素只有一個 li 元素

$('li:nth-child(odd)').css('background', '#ccc');        //每個父元素奇數 li 元素

$('li:nth-child(even)').css('background', '#ccc');      //每個父元素偶數 li 元素

$('li:nth-child(2)').css('background', '#ccc');            //每個父元素第二個 li 元素（索引從1開始）

 

 

五．其他方法

jQuery 在選擇器和過濾器上，還提供了一些常用的方法，方便我們開發時靈活使用。

 

圖5

 

$('.red').is('li');                           　　　　　　　　 //true，選擇器，檢測 class 為 red的元素是否為li

$('.red').is($('li'));                       　　　　　　　　 //true，jQuery 對象集合，同上

$('.red').is($('li').eq(2));            　　　　　　　　　　 //true，jQuery 對象單個，同上

$('.red').is($('li').get(2));          　　　　　　　　　　 //true，DOM 對象，同上

$('.red').is(function () {            　　　　　　　　　　 //true，方法，同上

　　return $(this).attr('title') == '列表 3';             //可以自定義各種判斷

}));

$('li').eq(2).hasClass('red');                                           //和 is 一樣，只不過只能傳遞 class

$('li').slice(0,2).css('color', 'red');                                 //前三個li變成紅色（slice(start,end)包含start不包含end）

 

注意：這個參數有多種傳法和 JavaScript 的 slice 方法是一樣的比如：slice(2)，從第三個開始到最后選定；slice(2,4)，第三和第四被選定；slice(0,-2)，從倒數第三個位置，向前選定所有；slice(2,-2)，前兩個和末尾兩個未選定。

 

$("div").find("p").end().get(0);                                    　　　 //返回 div 的原生 DOM

$('div').contents().size();                                               //返回子節點(包括文本)數量

$('li').filter('.red').css('background','#ccc');            　　　　　　　　 //選擇 li 的 class 為 red 的元素

$('li').filter('.red, :first, :last').css('background','#ccc');           //增加了首尾選擇（逗號隔開）

//特殊要求函數返回

$('li').filter(function () {

　　return $(this).attr('class') == 'red' && $(this).attr('title') == '列表 3';

}).css('background', '#ccc');

 

 

 

表單選擇器

表單作為 HTML 中一種特殊的元素，操作方法較為多樣性和特殊性，開發者不但可以使用之前的常規選擇器或過濾器，也可以使用 jQuery 為表單專門提供的選擇器和過濾器來准確的定位表單元素。

 

六．常規選擇器

我們可以使用 id、 類(class)和元素名來獲取表單字段， 如果是表單元素， 都必須含有 name屬性，還可以結合屬性選擇器來精確定位。

$('input').val();                            //元素名定位，默認獲取第一個input的value值

$('input').eq(1).val();                      //同上，獲取第二個

$('input[type=password]').val();             //選擇 type 為 password 的字段

$('input[name=user]').val();                 //選擇 name 為 user 的字段

 

那么對於 id 和類(class)用法比較類似，也可以結合屬性選擇器來精確的定位，在這里我們不在重復。對於表單中的其他元素名比如：textarea、select 和 button 等，原理一樣，不再重復。

 

七．表單選擇器

雖然可以使用常規選擇器來對表單的元素進行定位， 但有時還是不能滿足開發者靈活多變的需求。所以，jQuery 為表單提供了專用的選擇器。

 

圖6

 

$(':input').size();                        //獲取所有表單字段元素

$(':text).size();                          //獲取單行文本框元素

$(':password').size();                    //獲取密碼欄元素

$(':radio).size();                         //獲取單選框元素

$(':checkbox).size();                      //獲取復選框元素

$(':submit).size();                       //獲取提交按鈕元素

$(':reset).size();                         //獲取重置按鈕元素

$(':image).size();                        //獲取圖片按鈕元素

$(':file).size();                          //獲取文件按鈕元素

$(':button).size();                      //獲取普通按鈕元素

$(':hidden).size();                      //獲取隱藏字段元素

 

注意：這些選擇器都是返回元素集合，如果想獲取某一個指定的元素，最好結合一下屬性選擇器。比如：

$(':text[name=user]).size();                      //獲取單行文本框 name=user 的元素

 

八．表單過濾器

jQuery 提供了四種表單過濾器，分別在是否可以用、是否選定來進行表單字段的篩選過濾。

 

圖7

 

$(':enabled').size();                   //獲取可用元素

$(':disabled).size();                   //獲取不可用元素

$(':checked).size();                   //獲取單選、復選框中被選中的元素

$(':selected).size();                   //獲取下拉列表中被選中的元素

 

Thank you ,Mr.Lee!

For my lover, CC !