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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
js Dialog 实践分享
Oct 22 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
MySQL适配器PyMySQL详解
2017/09/20 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
美容师的职业规划书
2013/12/27 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
教师见习报告范文
2014/11/03 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
六五普法学习心得体会
2016/01/21 职场文书