jQuery selector和filter()的區別用法及代碼示例

jQuery 選擇器： 允許我們選擇和操作 HTML 元素。它用於使用 jQuery 選擇器選擇 HTML 元素，例如 id、類、類型、屬性等，然後將任何 CSS 屬性或事件添加到所選 HTML 元素。

用法:要選擇按鈕標簽，語法為

$("button")

例子：

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                $("#heading").css("border", "2px solid red"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
  
    <h2 id="heading">Using jQuery Filter</h2> 
  
    <button>Click to change color of heading</button> 
  
</body> 
  
</html>

輸出：單擊該按鈕後，我們將看到標題上有一個紅色邊框。

單擊按鈕創建跨標題的邊框

filter()此方法用於指定 HTML 元素的條件。Filter()方法返回符合特定條件的元素。

用法:

$(selector).filter(criteria, function(index))

例子：

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
            $("p").filter(".active").css("background-color", "red"); 
        }); 
    </script> 
</head> 
  
<body> 
  
    <h1>Jquery Filter</h1> 
  
      
<p>My name is Donald.</p> 
  
    <p class="active">Geeks</p> 
  
    <p class="dead">SkeeG</p> 
  
    <p class="active">For </p> 
  
    <p class="dead">roF</p> 
  
    <p class="active">Geeks</p> 
  
</body> 
  
</html>

輸出：過濾器搜索活動類標簽並為其著色。

過濾活動類別

jQuery 中選擇器和 filter() 之間的主要區別：

jQuery 中的選擇器	filter() n jQuery
jQuery 選擇器根據您給出的元素名稱選擇所有元素。	jQuery filter( ) 通過指定選擇標準向所選元素添加更多詳細信息。
它獨立於filter()工作，這意味著不需要將它與filter()方法一起使用。	它與選擇器一起工作。通過將過濾器與您的選擇器相結合，我們可以達到更高的精度。
使用它的語法如下： $(“button”) 選擇 HTML 頁麵的所有按鈕。	使用它的語法如下： $(button).filter(criteria, function(index)) 選擇具有條件的按鈕並對其應用函數。

jQuery 中的選擇器

filter() n jQuery

jQuery 選擇器根據您給出的元素名稱選擇所有元素。

jQuery filter( ) 通過指定選擇標準向所選元素添加更多詳細信息。

它獨立於filter()工作，這意味著不需要將它與filter()方法一起使用。

它與選擇器一起工作。通過將過濾器與您的選擇器相結合，我們可以達到更高的精度。

使用它的語法如下：

$(“button”) 選擇 HTML 頁麵的所有按鈕。

使用它的語法如下：

$(button).filter(criteria, function(index)) 選擇具有條件的按鈕並對其應用函數。

相關用法

注：本文由純淨天空篩選整理自faizamu19大神的英文原創作品 What’s the difference between selector and filter() in jQuery?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。