jQuery中filter()方法用法实例


Posted in Javascript onJanuary 06, 2015

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

语法结构一:
筛选出与指定表达式匹配的元素集合。

$(selector).filter(expr)

参数列表:

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

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>filter()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").filter(".js").css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

这段代码能够将类名为js的li中的字体颜色设置为蓝色。

语法结构二:

从元素集合中筛选出指定的jquery对象。

$(selector).filter(element)

参数列表:

参数 描述
element 用于匹配当前元素集合中元素的jQuery对象或者DOM对象。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>filter()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").filter(document.getElementById("js")).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li id="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>filter()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("li").filter($($("li")[0])).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li id="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

</div>

</body>

</html>

语法结构三:

筛选出与指定函数返回值匹配的元素集合。
filter()方法内部将对每个对象计算一次 (如$.each).。如果调用的function返回false则这个元素被删除,否则就会保留。

$(selector).filter(function())

参数列表:

参数 描述
function(index) 定义返回filter()匹配值的函数。index为当前元素在匹配元素集合中的索引值。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>filter()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("ul").filter(function(index){

    return $(".js",this).length==0;

  }).css("color","blue")

})

</script>

</head>

<body>

<div>

  <ul>

    <li>HTML专区</li>

    <li class="js">Javascript专区</li>

    <li>Div+Css专区</li>

    <li>Jquery专区</li>

  </ul>

  <ul>

    <li>字体要变蓝色了</li>

  </ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
超级退弹代码
Jul 07 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 #Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 #Javascript
jQuery中hasClass()方法用法实例
Jan 06 #Javascript
jQuery中last()方法用法实例
Jan 06 #Javascript
jQuery中first()方法用法实例
Jan 06 #Javascript
jquery解决客户端跨域访问问题
Jan 06 #Javascript
angular.foreach 循环方法使用指南
Jan 06 #Javascript
You might like
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php表单提交问题的解决方法
2011/04/12 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php数据序列化测试实例详解
2017/08/12 PHP
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
浅析Git版本控制器使用
2017/12/10 Python
Python实现求数列和的方法示例
2018/01/12 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python标识符命名规范原理解析
2020/01/10 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
入党推优材料
2014/06/02 职场文书
企业法人代表证明书
2014/09/27 职场文书
财务审计整改报告
2014/11/06 职场文书
优秀教师单行材料
2014/12/16 职场文书
礼貌问候语大全
2015/11/10 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python