jQuery - Selectors (3) Basic Filters - 基礎過濾器

jQuery基礎過濾器簡介

基礎過濾器,是用來進行一些元素過濾之用,雖然名稱上是Basic(基礎、基本),也就是實用性非常的高,才會放在此一分類中,記得,越基礎的東西越重要。

jQuery基礎過濾器速查表

jQuery基礎過濾器
過濾器 說明 範例
:animated 選擇所有正在執行動畫效果的元素 $(':animated')或.filter(":animated")
:eq(index) 等於索引值的對應的元素,索引從0開始 $(':eq(index)')或$('Selector').eq(index)
:even 選擇奇數索引值對應的元素,元素1,3,5,...,:even會選擇元素1與元素3,即索引值的0,2,... $(':even')或.filter(':even')
:first 選擇第一個符合的元素 $(':first')或.filter(':first')
:gt(index) 大於索引值的對應元素,索引從0開始 $(':gt(index)')或$('Selector').slice(index)
:header 選擇所有h1,h2,h3,h4,h5,h6元素 $(':header')或.filter(':header')
:last 選擇最後一個符合的元素 $(':last')或.filter(':last')
:lt(index) 小於索引值的對應元素,索引從0開始 $(':lt(index)')或$('Selector').slice(0,index)
:not(Selector) 排除selector內元素 $(':not(selector)')
:odd 選擇偶數索引值對應的元素,元素2,4,6,...,:odd會選擇元素2與元素3,即索引值的1,3,... $(':odd')

基礎過濾器提供了特定規則的過濾條件,讓我們很方便快速找到我們想要的元素,以進行處理。例如,第一個元素、最後一個元素、反向選擇元素、奇數元素、偶數元素、索引值index元素等。

jQuery基礎過濾器範例

:animated基礎過濾器範例:變更所有進行動畫效果的div元素背景。

選擇所有正在執行動畫效果的元素
<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
  div.colored { background:green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  <div></div>
<script>
    // 1. 當id="run"被click時
    $("#run").click(function(){
   // 2. div且正在執行動畫的元素
   // 3. 執行toggleClass()函式
      $("div:animated").toggleClass("colored");
    });
 // 1. 自訂函式
    function animateIt() {
   // 2. id="mover"元素,執行slideToggle()函式
      $("#mover").slideToggle("slow", animateIt);
    }
 // 1. 執行自訂函式
    animateIt();
</script>
</body>
</html> 

先由自訂函式animateIt()執行動畫效果。當我點擊<button id="run">Run</button>時,進行動畫效果元素切換Class動作,將黃色背景改為綠色背景。

因為:animated是jQuery延伸,並非正規CSS規格的一部份,在DOM的querySelectorAll()函式時,使用:animated無法提供更好效能,建議先使用純CSS選擇器,然後使用.filter(":animated")來實現更好的效能。

:eq(index)基礎過濾器範例:找特定索引的元素。

注意:idnex由0開始。
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>
// 1. 選擇第三個td元素。
// 2. 記得,index由0開始,2代表第三個。
$("td:eq(2)").css("color", "red");</script>
</body>
</html>

這些索引式(:eq(),:lt(),:gt(),:even(),:odd())的過濾器,第一,它們基於JavaScript的使用,索引由0開始,第二,與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').eq(index)。

它們會過濾他們前面符合Expression(表達式)的集合元素,以縮小範圍,如範例中$('td:eq(2)'),td元素共有8個會被選擇(集合元素),再透過:eq(2)將範圍縮至1個td元素被選擇。另外,後面小節會介紹的:nth-child(n)的n的索引是以1開始值,以符合CSS規範。兩者有些差異。

:even基礎過濾器範例:選擇表格奇數列(1,3,...),即索引值0,2...


<!DOCTYPE html>
<html>
<head>
  <style>
  table {background:#eeeeee;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>
// 1. 選擇tr元素裡奇數列(第1,3,…個)
// 2. 即索引值的0,2...
$("tr:even").css("background-color", "#bbbbff");</script>
</body>
</html>

與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').filter(':even')。

:first基礎過濾器範例:搜尋表格第一行(row)。

相當於:eq(0),也可以寫成:lt(1)。
<!DOCTYPE html>
<html>
<head>
  <style>
  td { color:blue; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </table>
<script>
// 1. 選擇tr元素裡的第一行
// 2. 即索引值0
$("tr:first").css("font-style", "italic");</script>
// 3. 相當於以下寫法
// $('tr:eq(0)')或$('tr:lt(1)')或$('tr').filter(':first')
</body>
</html>

:first會以前面的集合元素來選擇第一個符合的元素,另一個:first-child可以選擇超過一個符合的元素。

:gt(index)基礎過濾器範例:選擇第五個td元素之後所有td元素。


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
<script>
// 1. 選擇第五個td元素
// 2. 索引值由0開始
$("td:gt(4)").css("text-decoration", "line-through");</script>
</body>
</html> 

與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').slice(index)。

:header基礎過濾器範例:選擇所有標題Tag(h1~h6)


<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size: 10px; font-family: Arial; } 
  h1, h2 { margin: 3px 0; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <h1>Header 1</h1>
  <p>Contents 1</p>
  <h2>Header 2</h2>
  <p>Contents 2</p>
<script>
// 1. 選擇所有標題Tag(h1~h6)
$(":header").css({ background:'#CCC', color:'blue' });</script>
</body>
</html>

與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').filter(':header')。

:last基礎過濾器範例:搜尋表格最後一行。

從現有的jQeruy集合元素中,選擇符合所有元素的最後一個。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table>
    <tr><td>First Row</td></tr>
    <tr><td>Middle Row</td></tr>
    <tr><td>Last Row</td></tr>
  </table>
<script>
// 1. 選擇tr元素最後一行
$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});</script>
</body>
</html>

在表格中,最後一行我們常用來進行總合、統計…等Total功能,手動設定class就非常呆又笨,今天表格只有三行、明天表格有三十行,應該使用更靈活方式。
與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').filter(':last')。

:gt(index)基礎過濾器範例:選擇大於index的集合元素


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
<script>
// 1. 由td元素集合index大於4之後的元素
// 2. Index由0開始
$("td:gt(4)").css("text-decoration", "line-through");</script>
</body>
</html>

與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').slice(index)。

:lt(index)基礎過濾器範例:選擇小於index的集合元素。


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>
// 1. 由td元素集合index小於4之後的元素
// 2. Index由0開始
$("td:lt(4)").css("color", "red");</script>
</body>
</html>

與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').slice(0, index)。

:not(selector)基礎過濾器範例:排除selector內的元素


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
  <input type="checkbox" name="a" />
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b" />
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked" />
  <span>Peter</span>
</div>
<script>
// 1. input 所有input元素
// 2. :not(:checked) 除了所有屬性checked="checked"
// 3. + span,含input之後的span元素
// 1+2+3 意思是,所有input和下一個span要進行CSS設定,除了預設勾選的那一個除外
$("input:not(:checked) + span").css("background-color", "yellow");
// 1. 對所有input進行屬性設定
$("input").attr("disabled", "disabled");
</script>
</body>
</html>

所有選擇器都可以放置在:not()中,例如,:not(div a)或:not(div,a)。
注意,.not()方法通常更快,在一個複雜或多變的:not()選擇器中,它能提供一個更易讀的選擇器。

:odd()基礎過濾器範例:選擇集合元素中的偶數行


<!DOCTYPE html>
<html>
<head>
  <style>
  table {
    background:#f3f7f5;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>
    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>
// 1. 選擇tr元素集合中的偶數行
$("tr:odd").css("background-color", "#bbbbff");</script>
</body>
</html>

我們看是偶數行,不過由index來看是1,3,5…。
與:animated一樣的理由,建議先使用純CSS選擇器,再使用相關索引式過濾器來得到更好的效能,例如,$('your-pure-css-selector').filter(':odd')。

KKBruce補充

這一小節中,我們看到選擇器的方便性,絕大部分都與集合與index有關,先選擇出一個集合,在由集合過進行過濾(Filter)動作,最後選擇出我們要的元素以進行相關處理。例如,表格的處理,在以前我們要設定隔行換色,光一個class="red"屬性,如果有100行就行設定50次,而且只要表格內容有變,我們就必須跟著進行HTML程式碼的修改,辛苦沒有效率的工作!現在只要1行jQuery就可以完成了,而且還是動態處理整個頁面上的表格,實在大快人心!

在整個jQuery發展的過程中,都會撰寫出更有效率的替代函式,為了向下相容性,原函式都會保留下來。希望各位能一開始就使用jQuery所建議的替代函式,例如,.filter()、.slice()等。

jQuery基礎過濾器修改歷程

[2011/12/22] 參考 jQuery 1.7 文件翻譯編寫。



沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「+1」,我會很高興的。

无觅相关文章插件,迅速提升网站流量