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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
10个新的最有前途的JavaScript框架
Mar 12 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
node.js实现上传文件功能
Jul 15 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php生成短网址示例
2014/05/05 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Python continue继续循环用法总结
2018/06/10 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
详解Python学习之安装pandas
2019/04/16 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
在校学生职业规划范文
2014/01/08 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
保护环境建议书
2014/03/12 职场文书
经济担保书范文
2014/04/02 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
优秀教研组申报材料
2014/12/26 职场文书
先进个人推荐材料
2014/12/29 职场文书
开除员工通知
2015/04/22 职场文书
python基础之类属性和实例属性
2021/10/24 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python