1.每個HTML元素根據(jù)繼承屬性都有父parent元素。
舉個例子，h3 元素的父元素是 <div class="container-fluid">，<div class="container-fluid">的父元素是 body。
jQuery有一個方法叫parent()，它允許你訪問指定元素的父元素。

舉個例子：讓left-well 元素的父元素parent()的背景色變成藍色。
$("#left-well").parent().css("background-color", "blue")

試試讓#target1元素的父元素的背景色變成紅色。
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color","red");
});
</script>

image.png

2.每個人都繼承了自己的父母的一些屬性，譬如：DNA、相貌、血型、體型等等，HTML也不例外。
許多HTML元素都有children(子元素)，每個子元素都從父元素那里繼承了一些屬性。
舉個例子，每個HTML元素都是 body 的子元素， 你的 "jQuery Playground" h3 元素是 <div class="container-fluid"> 的子元素。

jQuery有一個方法叫children()，它允許你訪問指定元素的子元素。

舉個例子：讓left-well 元素的子元素children()的文本顏色變成藍色。
$("#left-well").children().css("color", "blue")

任務(wù)：讓#right-well元素的所有子元素的文本顏色都變成橙色（orange）。
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color","orange");
});
</script>

image.png

3.你已經(jīng)看到了當用jQuery選擇器通過id屬性來選取元素的時候是多么方便，但是你不能總是寫這么整齊的id。
幸運的是，jQuery有一些另外的技巧可以達到同樣的效果。
jQuery 用CSS選擇器來選取元素，target:nth-child(n) CSS選擇器允許你按照索引順序(從1開始)選擇目標元素的所有子元素。

示例：你可以給目標元素的第三個子元素添加bounce class。
$(".target:nth-child(3)").addClass("animated bounce");

任務(wù)：確保給目標元素的第二個子元素添加animated和bounce class，你可以通過target class來選獲得目標元素。
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$(".target:nth-child(2)").addClass("animated bounce");
});
</script>

image.png

4.示例：獲取class為target且索引為奇數(shù)的所有元素，并給他們添加class。

$(".target:odd").addClass("animated shake");

記住，jQuery里的索引是從0開始的，也就是說：:odd 選擇第2、4、6個元素，因為target#2(索引為1)，target#4(索引為3)，target6(索引為5。

任務(wù)：獲取class為target且索引為偶數(shù)的所有元素，也就是target#1(索引為0)，target#3(索引為2)，target5(索引為4)，并給它們添加class animated 和 shake。

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
});
</script>

5.我們已經(jīng)玩了這么久的jQuery游樂場，是時候結(jié)束這一節(jié)了。

我們讓整個body都有淡出效果(fadeOut)： $("body").addClass("animated fadeOut");

讓我們做一些更為激動人心的事情，給body添加class animated 和hinge 。

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");
$("body").addClass("animated hinge");
});
</script>