jQuery之过滤元素操作小结

2020-05-24 21:30:14易采站长站整理

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对象中重新创建一组匹配的对象,提供的选择器会一一测试原先