jQuery的鏈式編程風格
首先本人通過一個案例來展示jQuery的鏈式編程風格，先寫一個頁面，展示一個串列，代碼如下：
<body> <div> <ul class="menu"> <li class="level1"> <a href="#">水果</a> <ul class="level2"> <li><a href="#">蘋果</a></li> <li><a href="#">菠蘿</a></li> <li><a href="#">香瓜</a></li> </ul> </li> <li class="level1"> <a href="#">主食</a> <ul class="level2"> <li><a href="#">面條</a></li> <li><a href="#">饅頭</a></li> <li><a href="#">米飯</a></li> </ul> </li> </ul> </div> </body> <script type="text/javascript"> $(function() { $(".level1 > a").click(function() { $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide(); return false; }); }); </script>
代碼執行后的效果如下圖所示：
上述代碼的擴展效果就是通過jQuery的鏈式操作實作的，所有增加current類的操作、查詢子元素的方法呼叫、影片方法的呼叫等都是對同一個元素進行的，所以在開始獲取到一個jQuery物件后，后面的所有方法、屬性的呼叫都通過 “.” 進行連續呼叫即可，這種模式就是鏈式操作，
為了增加代碼的可讀性和可維護性，我們將上面的鏈式代碼格式的修改如下：
<script type="text/javascript"> $(function() { $(".level1 > a").click(function() { // 給當前的元素添加current樣式 $(this).addClass("current") // 下一個元素顯示 .next().show() // 父元素的同輩元素的子元素a移除current樣式 .parent.siblings().children("a").removeClass("current") // 他們的下一個元素隱藏 .next().hide(); return false; }); }); </script>
經過規范格式的調整后，增加了代碼的易讀性，更加方便后期的維護，
與此同時，我們對于同一個jQuery物件進行鏈式操作時，主要遵循下面3條格式規范，
（1）對于同一個物件不超過3個操作，可以直接寫成一行，代碼如下：
<script type="text/javascript"> $(function() { $("li").show().unbind("click"); }); </script>
（2）對于同一個物件的較多操作，建議每行寫一個操作，代碼如下：
<script type="text/javascript"> $(function() { $(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast", 0.5) .fadeTo("fast", 1) .unbind("click") .click(function() { ....... }); }); </script>
（3）對于多個物件的少量操作，可以每個物件寫一行，如果涉及子元素，可以考慮適當的縮進，代碼如下：
<script type="text/javascript"> $(function() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); }); </script>
以上就是有關jQuery的鏈式編程風格，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285923.html
標籤：jQuery