DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 9.6 表達式過濾filter()和has()
9.6 表達式過濾filter()和has()
編輯:jQuery基礎知識     

表達式過濾,就是根據需要使用“自定義表達式”的方式來選取符合條件的元素。這種自定義的表達式,可以是簡單的選擇器表達式,也可以是復雜的選擇器表達式。

在jQuery中,表達式過濾方法共有2種:(1)filter();(2)has()。

一、filter()方法

filter()方法是jQuery中功能最為強大的過濾方法。它可以使用表達式進行過濾,也可以使用函數返回值進行過濾。

1、表達式過濾

語法:

 
filter(expression)

說明:

參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式,說白了就是我們在前幾章所學到的選擇器。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li").filter("#red,#yellow").click(function () {
                $(this).css("color", "red");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li id="red">紅色red</li>
        <li>橙色orange</li>
        <li id="yellow">黃色yellow</li>
        <li>綠色green</li>
        <li>藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

默認情況下,在浏覽器預覽效果如下:

當我們點擊“紅色”、“黃色”這兩個列表項,預覽效果如下:

分析:

2、函數過濾

filter()方法除了表達式過濾之外,還有一種函數過濾的方式。

語法:

 
filter(fn)

說明:

fn表示函數。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li")
            .filter(function () {return $("span", this).length == 1;})
            .css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>紅色red</li>
        <li><span>橙色orange</span></li>
        <li><span><span>黃色yellow</span></span></li>
        <li>綠色green</li>
        <li>藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

filter(function () {return $("span", this).length == 1;})表示選擇在內部子元素中span長度為1的li元素,這裡只有“橙色orange”這一項符合。

雖然filter()方法非常強大,而且功能幾乎涵蓋我們前幾節所學的到的各種過濾方法。但是由於filter()方法內部封裝的東西太多,導致運行速度過慢。因此我們在實際開發中,能用其他的過濾方法,就盡量少用filter()方法。但是這句話並不是說filter()方法沒啥卵用哈,當實在沒辦法的時候,大家還是義不容辭地去用吧。

二、has()方法

在jQuery中,表達式過濾除了filter()方法之外還有一個has()方法。has()方法也是一個過濾方法,雖然沒有filter()方法那麼強大,但是運行速度比較快。在實際開發中,has()相對filter()用得更多一些。

語法:

 
$().has(expression)

說明:

參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式,說白了就是我們在前幾章所學到的選擇器。

has()方法用於選取符合條件的元素,符合的就保留,不符合的就刪除。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body{text-align:center;}
        #main
        {
            text-align:left;
            margin:100px auto;
            padding:15px;
            border:1px dashed gray;
            display:inline-block;
        }
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li").has("span").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>紅色red</li>
        <li><span>橙色orange</span></li>
        <li><span>黃色yellow</span></li>
        <li>綠色green</li>
        <li>藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

has()方法和filter()方法功能是相似的,不過has()方法沒有函數過濾的方式。實際上,我們可以把has()方法看成filter()方法的縮小版。

此外,has()方法類似於jQuery的“:has()”選擇器,跟eq()方法與:eq()選擇器一樣的道理,has()方法也是對jQuery選擇器的一種補充,使得我們更加方便靈活地操作元素。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved