首页 > 代码库 > Jquery过滤器
Jquery过滤器
1.表达式过滤
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $("div").filter(".red").css("background-color", "#495485"); $("p").filter(function (index) { return $("span", this).length == 2; }).css("background-color", "red"); $("p").has("span.red").css("background-color", "#652345"); }) </script> <style type="text/css"> div { position: absolute; width: 100px; height: 100px; } .blue { background-color: blue; left: 0px; } .red { background-color: red; left: 120px; z-index: 2; } .green { background-color: green; left: 240px; } .pos { top: 120px; } </style></head><body> <div class="blue"></div> <div class="green"></div> <div class="pos"></div> <div class="red pos">hhhhhhhhhhhhhhhhhhhhhhhhhhhhh广泛大概</div> <p><span class="red">hhhhhhhhhhhhhhhhhhhhhhhh第一段文本</span></p> <p><span>第二段文本</span><span></span></p></body></html>
2.查找
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $("#menu").children(".home").css("text-decoration", "underline"); }) </script></head><body> <ul id="menu"> <li class="home">首页</li> <li>论坛</li> <li>微博</li> <li>团购</li> <li>博客</li> </ul></body></html>
3.类过滤
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $("div").click(function () { if ($(this).hasClass("red")) $(this) .animate({ left: 120 }) .animate({ left: 240 }) .animate({ left: 0 }) .animate({ left: 240 }) .animate({ left: 120 }); }) }) </script> <style type="text/css"> div { position:absolute; width:100px; height:100px; } .blue { background-color:blue; left:0px; } .red { background-color:red; left:120px; z-index:2; } .green { background-color:green; left:240px; } .pos { top:120px; } </style></head><body> <div class="blue" ></div> <div class="green"></div> <div class="pos"></div> <div class="red pos" >广泛大概</div></body></html>
4.判断是否包含元素
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://www.mamicode.com/Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { $("p").has("span.red").css("background-color", "red"); if ($("div").has("p")) { alert("当前JQuery对象中包含span子元素。"); } }) </script></head><body> <p><span class="red">第一段文本</span></p> <p><span class="red">第2段文本</span><span></span></p> <p>第3段文本</p> <div class="blue"></div> <div class="red"></div> <div class="green"></div> <div class="black"></div></body></html>5.向下查找后代元素
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> $(function () { var j = $("body>div"); alert(j.children("div").length);//返回3个元素 alert(j.find("div").length);//返回5个元素 alert(j.contents().length);//返回7个元素，5个div,2个文本节点（空格） }) </script></head><body> <div> <div> <div></div> <div></div> </div> <div></div> <div></div> </div></body></html>
6.映射清洗截取
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-1.9.1.js"></script> <script type="text/javascript"> //映射 $(function () { $("p").append($("input").map(function () { return $(this).val(); }).get().join("、 ")); }); </script> <script type="text/javascript"> //清洗 $(function () { $("#menu li").not(".home").css("color", "red"); }) </script> <script type="text/javascript"> $(function () { $("#mn li").slice(2, 4).css("color", "red"); }) </script></head><body> <p><b>注册信息:</b></p> <input type="text" name="name" value="用户名"/> <input type="text" name="password" value="密码" /> <input type="text" name="url" value="http://baidu.com" /> <ul id="menu"> <li class="home">首页</li> <li>论坛</li> <li>微博</li> <li>团购</li> <li>博客</li> </ul> <ul id="mn"> <li class="home">首页2</li> <li>论坛2</li> <li>微博2</li> <li>团购2</li> <li>博客2</li> </ul></body></html>
Jquery过滤器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。