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操作DOM元素

  • 2015-08-01 11:44
  • 334KB
  • 下载

关于jquery清空div块中表单的值和操作元素是否可用

关于jquery清空div块中表单的值和操作元素是否可用

jquery查找元素,绑定事件,DOM操作

通过元素之间的关系来获取对应的元素 找到元素的父元素 $("#a").parent().css("background","yellow"); 找到祖先元素 $("#a").parents()...

使用jquery操作table元素:增加或删除一行

最近在做一个后台管理系统,需要做上传资源图片的功能,上传图片是默认只有一个上传控件,页面使用table布局,代码片段如下: ......  应用图片: ...

使用jquery选择器操作form元素

/***************************************/ //>jquery 关于包装集选择器的使用demo /*****************************...

jQuery学习笔记(二)—— 操作DOM元素

使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。...

10分钟-jQuery操作DOM元素

1.使用attr()方法控制元素的属性attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。例:调用at...

jQuery之操作DOM元素

操作DOM元素:控制元素、向元素内追加插入内容、复制添加删除元素等1. 使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元...

jQuery操作Form表单元素

Web开发中经常需要操作表单,form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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