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 相关文章推荐
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
前端面试知识点目录一览
Apr 15 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
angular.bind使用心得
2015/10/26 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
Python交换变量
2008/09/06 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python 图像增强算法实现详解
2021/01/24 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
安全承诺书格式
2014/05/21 职场文书
生产车间标语
2014/06/11 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
个人整改措施书面材料
2014/10/24 职场文书
离婚协议书样本
2015/01/26 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS