jQuery之过滤元素操作

来源：互联网发布：股票收盘价数据下载编辑：程序博客网时间：2024/05/22 09:32

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)