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获取dom的下一个节点方法
Sep 05 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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中的函数-- foreach()的用法详解
2013/06/24 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
实例讲解React 组件
2020/07/07 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python字符串,数值计算
2016/10/05 Python
使用Python对MySQL数据操作
2017/04/06 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Django用户身份验证完成示例代码
2020/04/03 Python
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
酒店应聘自荐信
2013/11/09 职场文书
发展部经理职责规定
2014/02/22 职场文书
2014年实习生工作总结
2014/11/27 职场文书
工作时间证明
2015/06/15 职场文书
公司档案管理制度
2015/08/05 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
python使用torch随机初始化参数
2022/03/22 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang