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>
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>
3.你已經(jīng)看到了當(dāng)用jQuery選擇器通過id屬性來選取元素的時候是多么方便南蹂，但是你不能總是寫這么整齊的id。
幸運的是念恍，jQuery有一些另外的技巧可以達到同樣的效果六剥。
jQuery 用CSS選擇器來選取元素，target:nth-child(n) CSS選擇器允許你按照索引順序(從1開始)選擇目標(biāo)元素的所有子元素峰伙。
示例：你可以給目標(biāo)元素的第三個子元素添加bounce class疗疟。
$(".target:nth-child(3)").addClass("animated bounce");
任務(wù)：確保給目標(biāo)元素的第二個子元素添加animated和bounce class，你可以通過target class來選獲得目標(biāo)元素瞳氓。
<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>
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>
