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="../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>