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 EasyUI 对话框的使用方法
Oct 24 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 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
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
js opener的使用详解
2014/01/11 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
Node.js 的模块知识汇总
2017/08/16 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
pytyon 带有重复的全排列
2013/08/13 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
python字典排序的方法
2019/10/12 Python
python enumerate内置函数用法总结
2020/01/07 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
设计师求职信模板
2014/05/06 职场文书
安全横幅标语
2014/06/09 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
夏洛特的网观后感
2015/06/15 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技