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 相关文章推荐
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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和ACCESS写聊天室(二)
2006/10/09 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
优秀中专生推荐信
2013/11/17 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
Win11软件图标固定到任务栏
2022/04/19 数码科技