jQuery 过滤not()与filter()实例代码

下面就为大家详细讲解“jQuery 过滤not()与filter()实例代码”的攻略。

1. jQuery 过滤not()方法

1.1 not()方法的语法

not()方法用于从匹配元素集合中删除指定的元素。该方法的语法如下所示：

$(selector).not(filter)

1.2 not()方法的实例

假如有一个 HTML 页面，其中有多个段落元素和一个按钮元素。现需用 jQuery 选择器找到所有段落元素中，除了 id 为 "para1" 的元素之外的所有元素。那么，可以用 not() 方法来完成这个功能，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>not()方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

    <p id="para1">这是第一个段落</p>
    <p>这是第二个段落</p>
    <p>这是第三个段落</p>
    <p>这是第四个段落</p>

    <button id="btnNot">not()方法示例</button>

    <div id="result"></div>

    <script>
        $(document).ready(function () {
            $("#btnNot").click(function () {
                $("p").not("#para1").css({"background-color": "yellow", "font-size": "24px"});
            }); 
        });
    </script>

</body>
</html>

在上面的代码中，我们在按钮元素上绑定了 click 事件，当点击按钮时，执行选择器 $("p").not("#para1")，找到除了 id 为 "para1" 的段落元素之外的所有段落元素，并设置这些元素的背景色为黄色，字体大小为24px。

2. jQuery 过滤filter()方法

2.1 filter()方法的语法

filter()方法用于从匹配元素集合中筛选出符合指定条件的元素。该方法的语法如下所示：

$(selector).filter(filter)

2.2 filter()方法的实例

下面我们来看一个例子，假如有一个带有多个 div 元素的 HTML 页面，现需用 jQuery 选择器找到所有类名为 "fruit" 的 div 元素，然后再从这些 div 元素中选择出包含子元素 span 的 div 元素。代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>filter()方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

    <div class="fruit"><span>苹果</span></div>
    <div class="meat"><span>猪肉</span></div>
    <div class="fruit"><span>香蕉</span></div>
    <div class="meat">牛肉</div>

    <button id="btnFilter">filter()方法示例</button>

    <div id="result"></div>

    <script>
        $(document).ready(function () {
            $("#btnFilter").click(function () {
                var filter = ".fruit";
                var divsWithSpan = $(filter).filter(function() {
                                  return $(this).find("span").length > 0;
                              });
                divsWithSpan.css({"background-color": "yellow", "font-size": "24px"});
            }); 
        });
    </script>

</body>
</html>

在上面的代码中，我们在按钮元素上绑定了 click 事件，当点击按钮时，执行选择器 $(filter).filter(function(){...})，找到所有类名为 "fruit" 的 div 元素，再筛选出包含子元素 span 的 div 元素，并设置这些元素的背景色为黄色，字体大小为24px。

以上就是关于“jQuery 过滤not()与filter()实例代码”的完整攻略了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 过滤not()与filter()实例代码 - Python技术站