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动态操作table(新增,删除相关列信息)
May 23 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
js运动应用实例解析
Dec 28 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 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 adodb连接不同数据库
2009/03/19 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP输出日历表代码实例
2015/03/27 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
物业管理求职自荐信
2013/09/25 职场文书
六一儿童节主持词
2014/03/21 职场文书
意向书范文
2014/03/31 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
组织生活会发言材料
2014/12/15 职场文书
公司员工体检通知
2015/04/21 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
英语教学课后反思
2016/02/15 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
JavaScript执行机制详细介绍
2021/12/06 Javascript