WEB前端第四十六課——jQuery框架（四）關係節點
1.children()方法
該方法用於選中某一個元素的所有直接子元素。
語法：$("selector").children("subSelector");
children()方法中的引數為可選項，有引數事表示搜尋符合引數選擇器的子元素。
2.find()方法
由於children()方法只針對子元素進行查詢，如果是子元素以下的後代是搜尋不到的，
因此，jQuery提供了“find()”方法，用於查詢指定元素的所有符合條件的後代節點。
語法：$("selector").find("subSelector");
不同於children()方法，find()方法中的引數為必填項！
3.parent()方法
用於查詢當前節點的直屬父節點。
語法：$("selector").parent();
不同於find()方法，parent()方法中不需要寫任何引數！
該方法只能獲取直接父節點（唯一性）。
4.parents()方法
用於查詢當前節點的所有祖先節點，直到 body以及 html為止。
語法：$("selector").parents("senSelector");
與children()方法相同，parents()中的引數為可選項。
5.siblings()方法
用於訪問當前節點的所有兄弟節點（不包括自身）。
語法：$("selector").siblings
與children()方法相同，siblings()中的引數為可選項。
6.其他常用關係
①next()，後一個兄弟節點，不加引數
②prev()，前一個兄弟節點，不加引數
③nextAll()，後面的所有兄弟節點，可加引數
④prevAll()，前面的所有兄弟節點，可加引數
7.手風琴案例
① is(":visible")，檢測指定元素是否可見
is()方法，根據引數指定的“選擇器、DOM元素或jq物件”查詢符合條件的元素集合，
如果其中至少有一個元素符合條件，就返回“true”，否則返回“false”
語法：$("selector").is("引數");
is()方法的引數可以是選擇器也可以是函式，作為檢測條件。
:visible選擇器，選取當前可見的每一個元素，一般而言除一下幾種情況之外的元素都是可見的
①設定為“display：none”的元素
②帶有“type='hidden' ”的表單元素
③width和height設定為 0的元素
④ “父元素設定為隱藏”的子元素
②box-sizing，預設情況下元素的“width/height”屬性值不包括“padding”和“border”屬性值。
box-sizing:content-box，
表示寬度（width）和高度（height）都應用到元素的內容框，
在元素的寬度和高度之外繪製邊框（border）和內邊距（padding）。
box-sizing:border-box，
表示為元素的邊框（border）和內邊距（padding）都在元素的寬度和高度內繪製，
元素內容框的寬度和高度等於設定的寬度（width）和高度（height）減去邊框和內邊距。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>accordion</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="IconFont/iconfont.css">
<script src="IconFont/iconfont.js"></script>
<style>
*{margin: 0;padding: 0;}
.box{
width: 600px;margin: 50px auto;
}
.box ul{list-style: none}
.box ul li{
width: 100%;margin: 10px;border-left: 1px solid #df5000;
box-shadow: 1px 2px 4px rgba(220,75,100,.3);
}
.box ul li h3{
width: 100%;height: 50px;padding: 0 10px;line-height: 50px;
box-sizing:border-box;position: relative;cursor: pointer;
}
.box ul li h3 i{
font-size: 25px;color: #55a532;font-weight: lighter;
position: absolute;right: 10px;
}
.box ul li div{
width: 100%;padding: 15px;box-sizing: border-box;display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<h3>Section One<i class="iconfont"></i></h3>
<div>
Hooray! It's snowing! It's time to make a snowman.James runs out.He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat.
He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening,James opens the door. What does he see? The snowman is moving! James invites him in.
The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air!
They are flying! What a wonderful night!The next morning, James jumps out of bed.He runs to the door.He wants to thank the snowman. But he's gone.
</div>
</li>
<li>
<h3>Section Two<i class="iconfont"></i></h3>
<div>
Internet is the ocean of knowledge. In this ocean youwill find beautiful pearls of knowledge.Also you mustnot forget the lethal sharks (x rated sites) in thisocean, especially when you
allow your innocentchildren to surf on it. The children are morevulnerable when they are using the Internet withoutclose vigil of their parents.
</div>
</li>
<li>
<h3>Section Three<i class="iconfont"></i></h3>
<div>
The Internet is gift for knowledge hungry people; it'salso a good tool for communication and learning. If you use the Internet for doing research & study thenit's a gift for you
but if you use Internet forsurfing pornographic sites or chatting withanti-social elements,it will become a curse for youespecially for your unescorted children.
</div>
</li>
</ul>
</div>
<script>
var $spreadBtn=$(".box h3 i");
$spreadBtn.click(function () {
// 判斷文字內容的div是否可見
if ($(this).parent().siblings("div").is(":visible")){
// 如果是可見狀態，則其父元素（h3）的兄弟元素（div）隱藏，且圖示切換為“+”
$(this).parent().siblings("div").slideUp();
$(this).html("");
}else {
// 如果是隱藏狀態，則其父元素（h3）的兄弟元素（div）顯示，且圖示切換為“-”
$(this).parent().siblings("div").slideDown();
$(this).html("");
// 其父元素的兄弟元素（div）顯示的同時，隱藏其他處於顯示狀態的div，且圖示切換為“+”
$(this).parents("li").siblings().find("div").slideUp();
$(this).parents("li").siblings().find("i").html("");
}
});
</script>
</body>
</html>