KingKong Bruce記事: jQuery - Selectors (3) Basic Filters

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 文件翻譯編寫。

Basic Filters :animated
Basic Filters :eq()
Basic Filters :event
Basic Filters :first
Basic Filters :gt()
Basic Filters :header
Basic Filters :last
Basic Filters :lt()
Basic Filters :not()
Basic Filters :odd

沒有留言:

張貼留言

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

訂閱：張貼留言 (Atom)

KingKong Bruce記事

網頁