下面就为大家详细讲解“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技术站