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 学习笔记 防止发生命名冲突
Jul 30 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
为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/04 日漫
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python实现自动装机功能案例分析
2020/10/22 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
strstr()的简单实现
2013/09/26 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
法律工作求职自荐信
2013/10/31 职场文书
工作会议欢迎词
2014/01/16 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
教师网络培训心得体会
2016/01/09 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL