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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Vue.js对象转换实例
Jun 07 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
smarty自定义函数用法示例
2016/05/20 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
django ajax发送post请求的两种方法
2020/01/05 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Python爬虫教程知识点总结
2020/10/19 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
广告设计应届生求职信
2014/03/01 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
银行自荐信怎么写
2015/03/05 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Java异常处理try catch的基本用法
2021/12/06 Java/Android