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 TextBox自动完成条
Jul 22 Javascript
javascript call方法使用说明
Jan 11 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
js实现拖拽效果
Feb 12 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue封装数字翻牌器
Apr 20 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
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python optparse模块使用实例
2015/04/09 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python中count函数知识点浅析
2020/12/17 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
财务会计实习报告体会
2013/12/20 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
校庆口号
2014/06/20 职场文书
孟佩杰观后感
2015/06/17 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers