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判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
javascript使用location.search的示例
Nov 05 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
vant中的toast轻提示实现代码
Nov 04 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学习之流程控制实现代码
2011/06/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Express.JS使用详解
2014/07/17 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
会计专业毕业生推荐信
2013/11/05 职场文书
教师演讲稿范文
2014/01/08 职场文书
2014年党建工作总结
2014/11/11 职场文书
颐和园导游词
2015/01/30 职场文书
贷款担保书范本
2015/09/22 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python