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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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编写和读取XML的几种方式
2013/01/12 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python 实现链表实例代码
2017/04/07 Python
python与C互相调用的方法详解
2017/07/14 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2014年计生工作总结
2014/11/21 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Python实现Hash算法
2022/03/18 Python