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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php截取视频指定帧为图片
2016/05/16 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
模拟select的代码
2011/10/19 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python查看微信撤回消息代码
2018/06/07 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
超实用的 30 段 Python 案例
2019/10/10 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python如何读写二进制数组数据
2020/08/01 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
UNIX命令速查表
2012/03/10 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
白酒市场营销方案
2014/02/25 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
运动会加油稿20字
2014/11/15 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
nginx实现动静分离的方法示例
2021/11/07 Servers