第二十六篇 jQuery 學習8 遍歷-父親兄弟子孫元素
阿新 • • 發佈：2017-09-25
初學 菜單彈出 min 當前 返回 特效 bsp script 調用 
可以用jQuery特效效果，這些課學習的遍歷，來實現左側導航欄。其他的就簡單了，就是html+css靜態布局了。
jQuery 學習8 遍歷-父親兄弟子孫元素
jQuery遍歷，可以理解為“移動”，使用“移動”還獲取其他的元素。 什麽意思呢？老師舉一個例子： 班上30位同學，我是新來負責教這個班學生的老師，但我不認識所有學生，只認識上學期教過的幾位同學、比如小明。我們再用一小串代碼來作解釋：<body> <span id="ming">我是小明</span> <span>我坐在小明後面，我叫李四</span> </body>以上看的很清楚吧。他們是同級元素，兩位同學是平級的，只是小明坐在第一排，而李四則坐在第二排，意思很簡單。我(老師)上課提問題，但我不清楚小明後面的同學叫什麽名字，而又要抽他起來回答問題，在jQuery裏，我們知道他和小明的關系的時候，我們就可以用到next()方法(找到下一位同級元素)，這樣的話，我就知道小明後面坐著的同學了。我們在script裏測試一下代碼：
<script> alert($("#ming").next().html()); </script>找到小明的id，然後next()方法找到下一個兄弟元素，html()打印內容，alert()彈出提示。我們可以很清楚的看到，彈出的則是小明後面的李四。 來看一個完整的代碼演示：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery 學習8 遍歷-父親兄弟子孫元素</老師只演示了部分常用的： next() 方法返回被選元素的下一個同胞元素。 prev() 方法返回被選元素的上一個同胞元素。 children() 方法返回被選元素的所有直接子元素。 find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。 parent() 方法返回被選元素的直接父元素。 以上引用w3c教程 這裏只有五個遍歷方法。還有一部分，老師認為並不是經常使用到的，有興趣的同學可以去教程裏看一下。 那麽學到這裏，很多同學疑問，遍歷有什麽好的？老師這裏就說一下，比如你的導航欄，有一級和二級菜單，一級菜單點擊一下，彈出相應的二級菜單，其他的二級菜單隱藏。 老師以前寫呢，就是給每一個一級菜單給一個id，二級菜單一個id，然後點擊一級菜單彈出相應的二級菜單，老師很肯定的說，有很多初學的同學肯定也是這麽想的。那麽問題來了，客戶的需求，他的一級菜單有10個，20個甚至更多，難道我們就在頁面上一個一個的給id嗎？ 像這種，我們就完全可以運用今天所學的，遍歷，一級菜單找到下面的二級菜單彈出，用jQuery的元素查找，用class類來查找，然後再找到它的兒子或者兄弟，再做顯示或隱藏，幾行代碼高效且穩定的搞定一切，還能在這個基礎上再新加導航欄，js代碼不管，依舊能實現二級菜單。 下一篇，我們寫一個小項目，實戰一下，將這26篇，html+css+js+jQuery這些，所學，再加上自己擴展，寫一個簡單的頁面。 頁面(簡單點)：title> <!--使用jQuery一定不要忘記引用jQuery文件--> <script src="../js/jquery-1.12.2.min.js"></script> </head> <body> <div id="boss"> 我是最大的，爺爺 <div id="div1"> 我是老二唄 <p id="x">兄長</p> <p id="d">弟弟</p> </div> </div> <!--以上就給出最簡單的關系結構，爺爺、父親、倆兄弟--> <br/><br/> <button onclick="boss1()">獲取id為"boss"的兒子</button> <button onclick="boss2()">獲取id為"boss"的孫子並且id為"d"</button><br/><br/> <button onclick="div1()">獲取id為"div1"的父親</button> <button onclick="div2()">修改樣式id為"div1"的兒子</button> <button onclick="div3()">獲取id為"div1"的兒子且id為"x"</button><br/><br/> <button onclick="x1()">獲取id為"x"的下一個兄弟</button> <button onclick="x2()">獲取id為"x"的父親</button> <button onclick="x3()">獲取id為"x"的父親的父親，即為爺爺</button><br/><br/> <button onclick="d1()">獲取id為"d"的上一個兄弟</button> <!--以上是給出按鈕、給出事件，演示效果給同學們看--> <br/><br/> <!--給一個p元素，來看出效果--> <p id="zhi" style="color:red;"></p> <script> //以下就全是 點擊事件調用的函數 function boss1(){ //獲取id為"boss"的兒子 $("#zhi").html($("#boss").children().html()); //children()方法，返回被選元素的所有直接子元素 //因為boss的兒子下面還有孩子，所以它的孩子也會跟著。但不管怎麽樣，我們獲取了boss的兒子了 } function boss2(){ $("#zhi").html($("#boss").find("#d").html()); //find()方法必須帶參數，才能找到指定的孫子，可以用id、class、元素來指定，這裏用的是id //find()方法 返回被選元素的後代元素，一路向下直到最後一個後代。 } function div1(){ $("#zhi").html($("#div1").parent().html()); //parent()方法是找到當前元素的父親，父親只有一個，所以parent()方法不需要參數 } function div2(){ $("#div1").children().css("color","blue"); //獲取兒子只能獲取一個，即為最近的一個，所以老師這裏用修改樣式給大家看出，能修改所以直接兒子的樣式 } function div3(){ $("#zhi").html($("#div1").children("#x").html()); //父親可以有多個孩子，children()方法可以帶參數，就是過濾一些兒子，找到指定的兒子 } function x1(){ $("#zhi").html($("#x").next().html()); //next() 返回被選元素的下一個同胞元素 所以是不需要參數的喲 } function x2(){ $("#zhi").html($("#x").parent().html()); //獲取它的父親，父親的內容也會打印出兒子的內容，因為兒子是跟著父親的 } function x3(){ $("#zhi").html($("#x").parent().parent().html()); //這裏老師用了兩個parent()方法，就是找到，當前元素的父親的父親，即為爺爺。 //所以說，咱們自己擴展，其他的方法，也是可以這樣，兩個甚至多個使用來 找到其他元素 } function d1(){ $("#zhi").html($("#d").prev().html()); //prev() 即為返回上一個兄弟元素，和next()方法正好相反 } </script> </body> </html>
可以用jQuery特效效果，這些課學習的遍歷，來實現左側導航欄。其他的就簡單了，就是html+css靜態布局了。
第二十六篇 jQuery 學習8 遍歷-父親兄弟子孫元素