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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
Js基础学习资料
Nov 23 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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者的疑难问答(2)
2006/10/09 PHP
php巧获服务器端信息
2006/12/06 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
详解React开发必不可少的eslint配置
2018/02/05 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
同乡会致辞
2015/07/30 职场文书
社区结对共建协议书
2016/03/23 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Python 多线程之threading 模块的使用
2021/04/14 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python