jQuery之过滤元素操作小结


Posted in Javascript onNovember 30, 2013

1:eq(index)方法

用于获取第N个元素,这个元素的位置从0开始算起,语法格式如下:eq(index)

获取第3个表格,并将它的背景色设置为"#FCF", 代码如下:$("td").eq(2).css("background", "#FCF");

2:filter(expr)方法

用于筛选出与指定表达式匹配的元素集合,用于缩小匹配的范围,用逗号分隔多个表达式,那么多个表达式之间是“或”的关系,

语法如下:filter(expr)

$("input").filter(".sel").css("backgroud", "#FCF");  //选取带有class属性值为sel的input元素,并设置它的背景色

$("input").filter(".sel, :first").css("background", "#FCF");  //选取带有class属性值的input元素或者选取当前领域中的第一个元素,并设置它们的背景色,

表达式之间用逗号分隔

3:filter(fn)方法

用于筛选出与指定函数返回值匹配的元素集合,该函数内部将对每个对象计算一次(如$:each)。如果调用的函数返回false,则这个元素将被删除,

否则就会保留。语法格式如下:filter(fn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filter(fn)用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("p").filter(function(index){
        return $("ol", this).length == 0;
    }).css("color", "blue");
   })
</script>
</head>
<body>
     <p>
       <ol>
           <li>Hello</li>
       </ol>
     </p>
     <p>How are you?</p>
</body>
</html>

假设子元素中不含有ol元素,并设置该元素的字体颜色为蓝色。

jQuery之过滤元素操作小结

4:has(expr)方法

用于保留包含特定后代的元素,去掉那些不含有指定后代的元素,该方法将会从给定的jQuery对象中重新创建一组匹配的对象,提供的选择器会一一测试原先

那些对象的后代,含有匹配后代的对象将得以保留,语法格式如下:

has(expr)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>has(expr)用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("li").has("ul").css("color", "red");
   })
</script>
</head>
<body>
    <ul>
       <li id="menu_li">
          <ul id="menu_ul">
              <li>新闻</li>
              <li>网页</li>
              <li>知道</li>
          </ul>
       </li>
       <li>正文</li>
       <li>结尾</li>
    </ul>
</body>
</html>

jQuery之过滤元素操作小结

5: hasClass(class)

用于检查当前的元素是否含有某个特定的类,如果有,则返回true

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hasClass用法</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
     $("div").click(function() {
     if($(this).hasClass("protected")) {
      $(this).css("border", "1px solid blue");
     }
   });
   })
</script>
</head>
<body>
   <div class="protected">div元素</div>
   <div>div元素二</div>
</body>
</html>

jQuery之过滤元素操作小结

6:map(callback)方法

map(callback)方法用于将一组元素转换成其他数组(无论是否是元素数组), 可以用这个函数来建立一个列表,无论是值、属性还是CSS样式,或者其他特别形式,

都可以用$.map()来方便的建立,语法格式如下:

map(callback)

Javascript 相关文章推荐
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
Vue.js对象转换实例
Jun 07 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 #Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 #Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 #Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 #Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 #Javascript
js实现的折叠导航示例
Nov 29 #Javascript
javascript特殊用法示例介绍
Nov 29 #Javascript
You might like
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP打印输出函数汇总
2016/08/28 PHP
解密效果
2006/06/23 Javascript
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python map比for循环快在哪
2020/09/21 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
韩国商务邀请函
2014/01/14 职场文书
教师申诉制度
2014/01/29 职场文书
座谈会主持词
2014/03/20 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python