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与CSS复习(二)
Jun 29 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
Java中Timer的用法详解
Oct 21 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
为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
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
Javascript的一种模块模式
2008/03/22 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python如何生成树形图案
2018/01/03 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
iPython pylab模式启动方式
2020/04/24 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
五四青年节演讲稿
2014/05/26 职场文书
二人合伙经营协议书
2014/09/13 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
法人身份证明书
2014/10/08 职场文书
创业计划书介绍
2019/04/24 职场文书