源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery之过滤元素操作小结

  • 时间:2022-08-29 03:02 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery之过滤元素操作小结
[b]1:eq(index)方法[/b] 用于获取第N个元素,这个元素的位置从0开始算起,语法格式如下:eq(index) 获取第3个表格,并将它的背景色设置为"#FCF", 代码如下:$("td").eq(2).css("background", "#FCF"); [b]2:filter(expr)方法[/b] 用于筛选出与指定表达式匹配的元素集合,用于缩小匹配的范围,用逗号分隔多个表达式,那么多个表达式之间是“或”的关系, 语法如下:filter(expr) $("input").filter(".sel").css("backgroud", "#FCF");  //选取带有class属性值为sel的input元素,并设置它的背景色 $("input").filter(".sel, :first").css("background", "#FCF");  //选取带有class属性值的input元素或者选取当前领域中的第一个元素,并设置它们的背景色, 表达式之间用逗号分隔 [b]3:filter(fn)方法[/b] 用于筛选出与指定函数返回值匹配的元素集合,该函数内部将对每个对象计算一次(如$:each)。如果调用的函数返回false,则这个元素将被删除, 否则就会保留。语法格式如下:filter(fn)
[u]复制代码[/u] 代码如下:
<!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元素,并设置该元素的字体颜色为蓝色。 [img]http://files.jb51.net/file_images/article/201311/1332863314_6641.png[/img] [b]4:has(expr)方法[/b] 用于保留包含特定后代的元素,去掉那些不含有指定后代的元素,该方法将会从给定的jQuery对象中重新创建一组匹配的对象,提供的选择器会一一测试原先 那些对象的后代,含有匹配后代的对象将得以保留,语法格式如下: has(expr)
[u]复制代码[/u] 代码如下:
<!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>
[img]http://files.jb51.net/file_images/article/201311/1332863260_3101.png[/img] [b]5: hasClass(class)[/b] 用于检查当前的元素是否含有某个特定的类,如果有,则返回true
[u]复制代码[/u] 代码如下:
<!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>
[img]http://files.jb51.net/file_images/article/201311/1332863220_8153.png[/img] [b]6:map(callback)方法[/b] map(callback)方法用于将一组元素转换成其他数组(无论是否是元素数组), 可以用这个函数来建立一个列表,无论是值、属性还是CSS样式,或者其他特别形式, 都可以用$.map()来方便的建立,语法格式如下: map(callback)
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部