jQuery之过滤元素操作

原创 2012年03月27日 23:49:37

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元素,并设置该元素的字体颜色为蓝色。





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>



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>


6:map(callback)方法

     map(callback)方法用于将一组元素转换成其他数组(无论是否是元素数组), 可以用这个函数来建立一个列表,无论是值、属性还是CSS样式,或者其他特别形式,

都可以用$.map()来方便的建立,语法格式如下:

     map(callback)




利用Jquery对动态元素进行操作

今天写了一点jquery的代码,姑且先存放的博客上吧。  默认样式是这样的,需要的是click其中的td时实现对其内容的修改,而blur后显示的是修改后的内容:        ...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月09日 19:20
  • 1499

Jquery(第二操作html元素)

pageEncoding="UTF-8"%> Jquery操作html的DOM元素 /*text()、html() 以及 val() 的回调函数:  * 回调函数由两个参数组成,分别为:被...
  • jpp411
  • jpp411
  • 2016年09月21日 22:39
  • 289

Revit开发之元素过滤

Revit 二次开发API中提供了一个FilteredElementCollector 类,通过这个类我们可以方便的获取到 我们想要获取的Element。 这个类返回的是一个Element的集合, 他...
  • The_Eyes
  • The_Eyes
  • 2016年09月01日 09:42
  • 1137

jQuery对元素内容操作

jQuery提供了对元素的内容和值进行操作的方法,其中,元素的值是元素的一种属性,大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。 元素的内容是指定义元素的起始标记和结束标记中...
  • chengqiuming
  • chengqiuming
  • 2017年04月12日 10:53
  • 208

jQuery对DOM元素的向上、向下、同级遍历和过滤

jQuery的向下遍历例子:
  • xsj_blog
  • xsj_blog
  • 2016年11月22日 23:14
  • 1321

jQuery的DOM操作之添加元素和删除元素

添加元素: .append()——在目标元素之后添加元素; .prepend()——在目标元素之前添加元素; .after()——在目标元素之后换行添加元素; .before()——在目标元素...
  • bboyjoe
  • bboyjoe
  • 2015年08月10日 16:27
  • 2492

jQuery -> 获取元素的各种过滤器(filter)

通过顺序来选择 顺序选择的过滤器(filter)有 :first 第一个元素:last 最后一个元素:even 序号为偶数的元素:odd 序号为奇数的元素:eq(n) 序号等于n的元素 :lt(n)序...
  • FeeLang
  • FeeLang
  • 2014年05月22日 18:18
  • 6826

使用Jquery操作iframe中的元素

前几天,在原有功能上追加功能,jsp页面是已经存在了的,通过jquery获取元素总是获取不到,很奇怪,所以就仔细的看看了看jsp,原来那段代码是iframe里面的,虽然经常用jquery,但我一开始还...
  • sun5769675
  • sun5769675
  • 2015年12月16日 12:50
  • 6086

【JavaScript】使用jQuery操作DOM

本章需要掌握的技能目标 1、使用jQuery操作css样式。 2、使用jQuery操作文本与属性值内容 3、使用jQuery操作DOM节点 4、使用jQuery遍历DOM节点 5、使用jQuery操作...
  • mjianglei
  • mjianglei
  • 2016年11月26日 22:43
  • 851

Jquery 操作iframe中元素

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下:$('#objId', parent.document);// 搞定...在父页面 获取iframe子页面的元素...
  • forest_fire
  • forest_fire
  • 2016年03月21日 11:17
  • 1783
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery之过滤元素操作
举报原因:
原因补充:

(最多只允许输入30个字)