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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
微信小程序实现弹出菜单
Jul 19 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
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
菜鸟修复电子管记
2021/03/02 无线电
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP基础学习小结
2011/04/17 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python @property装饰器原理解析
2020/01/22 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
思想品德自我鉴定
2013/10/12 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
初三毕业评语
2014/12/26 职场文书
党员倡议书
2015/01/19 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android