jQuery遍历
2018-02-02 本文已影响33人
GA_
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery遍历</title>
<link rel="stylesheet" type="text/css" href="css/jQuery.css" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li>
<h1>大标题</h1>
<span>我是span</span>
<p class="p1">我是p 1</p>
<p >我是p 2</p>
</li>
</ul>
</div>
<div>
<button type="button" id="button1">祖先</button>
<button type="button" id="button2">后代</button>
<button type="button" id="button3">同胞</button>
<button type="button" id="button4">过滤</button>
</div>
<script>
$("#button1").click(function() {
// 001
// $("span").parents().css({
// "border": "2px solid red"
// });
// 002
// $("span").parents("ul").css({"background-color":"red"})
// 003
$("span").parentsUntil("ul").css({"border":"2px solid red"});
})
$("#button2").click(function() {
// 001
// $("div").children().css({"border":"2px solid red"});
// 002 children 只对子元素查找 查不到孙子
// $("div").children("ul").css({"border":"2px solid red"});
// 003 可以查儿子、孙子、曾孙子...
$("div").find("span").css({"border":"2px solid red"});
// 004 *所有后代
// $("div").find("*").css({"border":"2px solid red"});
})
$("#button3").click(function() {
// 001 同胞
// $("p").siblings().css({"border":"2px solid red"});
// 002 指定同胞
// $("p").siblings("span").css({"border":"2px solid red"});
// 003 下一个同胞
// $("span").next().css({"border":"2px solid red"});
// 004
// $("h1").nextAll().css({"border":"2px solid red"});
// 005
$("h1").nextUntil("p").css({"border":"2px solid red"});
})
$("#button4").click(function() {
// 001
// $("div p").last().css({"border":"2px solid red"});
// 002
// $("p").eq(1).css({"border":"2px solid red"});
// 003
// $("p").filter(".p1").css({"border":"2px solid red"});
// 004
$("p").not(".p1").css({"border":"2px solid red"});
})
</script>
</body>
</html>
