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中删除指定数组中指定的元素的代码
Feb 12 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js同源策略详解
May 21 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php查询whois信息的方法
2015/06/08 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
JS跨域总结
2012/08/30 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
js实现tab切换效果
2017/02/16 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
es6函数中的作用域实例分析
2020/04/18 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python 获取字符串MD5值方法
2018/05/29 Python
使用pip安装python库的多种方式
2019/07/31 Python
详解python对象之间的交互
2020/09/29 Python
python 实现aes256加密
2020/11/27 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
工作失职检讨书范文
2014/01/16 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
承诺书模板
2014/08/30 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
心得体会格式及范文
2016/01/25 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书