jQuery filter()

发布时间:2020-03-26 04:29:11发布者:admin浏览数:

筛选出与指定表达式或者方法返回值相匹配的元素或者元素集合。

返回值是jQuery对象。

语法结构一:

[JavaScript] 纯文本查看 复制代码

$(selector).filter(expr)

参数解析:

expr:字符串值,用于筛选当前元素集合的选择器表达式。

jQuery1.0版本添加。

语法结构二:

[JavaScript] 纯文本查看 复制代码

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

筛选出与指定函数返回值匹配的元素集合。

filter()内部对每个对象计算一次 (如$.each)。如果function返回false则这个元素被删除,否则就会保留。

参数解析:

function:定义返回filter()匹配值的函数

(1).index为当前元素在匹配元素集合中的索引值。

(2).this是当前DOM元素。

jQuery1.0版本添加。

语法结构三:

[JavaScript] 纯文本查看 复制代码

$(selector).filter(element)

参数解析:

element:一个或多个DOM元素来匹配当前元素集合。

jQuery1.4版本添加。

语法结构四:

[JavaScript] 纯文本查看 复制代码

$(selector).filter(jQuery object)

参数解析:

jQuery object:jQuery对象,用于筛选当前元素集合。

jQuery1.4版本添加。

代码实例:

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">$(document).ready(function(){ $("li").filter(".ant").css("color","blue")})</script></head><body><p> <ul> <li>蚂蚁部落一</li> <li class="ant">蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> </ul></p></body></html>

上面的代码将类名为"ant"的li元素字体颜色设置为蓝色。

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">$(document).ready(function(){ $("ul").filter(function(index){ return $(".ant", this).length == 0; }).css("color","blue")})</script></head><body><p> <ul> <li>蚂蚁部落一</li> <li class="ant">蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> </ul> <ul> <li>蚂蚁部落</li> </ul></p></body></html>

上面的会将第二ul的字体颜色设置为蓝色,因为它内部的li元素没有具有"ant"样式类的。

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">$(document).ready(function () { var oli = document.getElementById("ant"); $("li").filter(oli).css("color", "blue")})</script></head><body><p> <ul> <li>蚂蚁部落一</li> <li id="ant">蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> </ul></p></body></html>

将第二个li元素字体颜色设置为蓝色。

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">$(document).ready(function () { var oli = document.getElementById("ant"); $("li").filter($("#ant")).css("color", "blue")})</script></head><body><p> <ul> <li>蚂蚁部落一</li> <li id="ant">蚂蚁部落二</li> <li>蚂蚁部落三</li> <li>蚂蚁部落四</li> </ul></p></body></html>

将第二个li元素字体颜色设置为蓝色。

程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航