jquery鏈式調用 - 層級菜單示例
jquery對象的方法會在執行完後返回這個jquery對象，所有jquery對象的方法可以連起來寫：
$('#div1') // id爲div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent() //跳到ul的父元素，也就是id爲div1的元素
.siblings() //跳到div1元素平級的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast'); //高度實際高度變換到零來隱藏ul元素
層級菜單
下面是最終的實現效果，如下：
那麼下面來逐步編寫，首先將靜態頁面先寫出來，如下：
使用ul>(li>a{水果}+(ul>li{蘋果}*3))*5按Tab鍵，就可以快速生成需要的HTML代碼。
那麼下面就是編寫樣式了。
使用jquery的鏈式寫法，設置層級菜單的收縮
完整代碼如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu a").click(function(){
// alert($(this).html());
// alert($(this).siblings().html());
// $(this).siblings().toggle(1,'swing');
// $(this).siblings().slideUp();
// $(this).siblings().slideDown().parent().siblings().children('ul').slideUp();
// $(this).siblings().addClass("active").slideDown().parent().siblings().children('ul').removeClass("active").slideUp();
$(this).siblings().addClass("active").stop().slideToggle().parent().siblings().children('ul').removeClass("active").slideUp();
})
})
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Microsoft Yahei';
color: #fff;
}
.menu_warp{
width: 310px;
}
.menu_warp a{
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-indent: 14px;
background-color: rgb(51,102,201);
border-bottom: 1px solid #fff;
}
.menu li ul li {
height: 45px;
line-height: 45px;
text-indent: 28px;
background-color: rgb(122,161,239);
border-bottom: 1px solid #fff;
}
.menu ul{
display: none;
}
.menu .active{
display: block;
}
</style>
</head>
<body>
<!-- div.menu_warp>ul.menu>(li>a{水果}+(ul>li{蘋果}*3))*5 -->
<div class="menu_warp">
<ul class="menu">
<li>
<a href="#">水果</a>
<ul class="active">
<li>蘋果</li>
<li>蘋果</li>
<li>蘋果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>蘋果</li>
<li>蘋果</li>
<li>蘋果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>蘋果</li>
<li>蘋果</li>
<li>蘋果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>蘋果</li>
<li>蘋果</li>
<li>蘋果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>蘋果</li>
<li>蘋果</li>
<li>蘋果</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
注意：在寫這個代碼的過程中，發現如果a標籤的href = ""，這種情況下監聽click方法是無法正常觸發jquery的特效的，需要設置href=“#”，纔可以正常使用jquery特效。
jquery鏈式操作的正確使用方法
jQuery實現方法的鏈式操作是非常容易的。這裏給出正確的使用方法
糟糕的使用方法
代碼如下:
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
建議使用方法
代碼如下:
$second.html(value);
$second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
jQuery鏈式操作實例分析
這篇文章主要介紹了jQuery鏈式操作,實例分析了jQuery基於鏈式操作動態改變頁面元素樣式的相關技巧,具有一定參考借鑑價值,需要的朋友可以參考下
從過去的實例中，我們知道jQuery語句可以鏈接在一起，這不僅可以縮短代碼長度，而且很多時候可以實現特殊的效果。
<script type="text/javascript">
$(function() {
$("div").addClass("css1").filter(function(index) {
return index == 1 || $(this).attr("id") == "fourth";
}).addClass("css2");
});
</script>
以上代碼爲整個<div>列表增加樣式css1,然後再進行篩選，再爲篩選的元素單獨增加css2樣式。如果不採用jQuery，實現上述的效果將非常麻煩。
在jQuery鏈中，後面的操作都是以前面的操作結果爲對象的，如果希望操作對象爲上一步的對象，則可以使用end()方法。
用end()方法來控制jQuery鏈。
<script type="text/javascript">
$(function() {
$("p").find("span").addClass("css1").end().addClass("css2");
});
</script>
<p>Hello,<span>how</span>are you?</p>
<span>very nice,</span>Thank you.
以上代碼在<p>中搜索<span>標記，然後添加風格css1，利用end()方法將操作對象往回設置爲$("p")並添加樣式風格css2.
另外，還可以通過andSelf()將前面兩個對象進行組合後共同處理。
用andSelf()方法控制jQuery鏈。
<script type="text/javascript">
$(function() {
$("div").find("p").addClass("css1").andSelf().addClass("css2");
});
</script>
<div>
<p>第一段</p>
<p>第二段</p>
</div>
以上jQuery代碼首先在<div>中搜索<p>標記，添加css1，這個風格只對<p>標記有效，然後利用andSelf()方法將<div>和<p>組合在一起，然後添加樣式css2,這個風格對<div>和<p>均有效。
運行效果如下：
<div class="css2">
<p class="css1 css2">第一段</p>
<p class="css1 css2">第二段</p>
</div>
