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 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
解析php5配置使用pdo
2013/07/03 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python Requests安装与简单运用
2016/04/07 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
绩效管理实施方案
2014/03/19 职场文书
负责人任命书范本
2014/06/04 职场文书
小学数学课题方案
2014/06/15 职场文书
2014年销售部工作总结
2014/12/01 职场文书
感恩节寄语2015
2015/03/24 职场文书