jQuery的鏈式編程風格

時間 2021-07-22

標籤 javascript java 編程 ide 動畫 this spa code xml 欄目 JQuery 简体版

原文原文鏈接

首先本人經過一個案例來展現jQuery的鏈式編程風格。先寫一個頁面，展現一個列表，代碼以下：javascript

<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對象後，後面的全部方法、屬性的調用都經過「.」進行連續調用便可，這種模式就是鏈式操做。

爲了增長代碼的可讀性和可維護性，咱們將上面的鏈式代碼格式的修改以下：java

<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條格式規範。編程

http://www.ssnd.com.cn 化妝品OEM代加工ide

（1）對於同一個對象不超過3個操做，能夠直接寫成一行，代碼以下：動畫

<script type="text/javascript"> $(function() { $("li").show().unbind("click"); }); </script>

（2）對於同一個對象的較多操做，建議每行寫一個操做，代碼以下：ui

<script type="text/javascript"> $(function() { $(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast", 0.5) .fadeTo("fast", 1) .unbind("click") .click(function() { ....... }); }); </script>

（3）對於多個對象的少許操做，能夠每一個對象寫一行，若是涉及子元素，能夠考慮適當的縮進。代碼以下：this

<script type="text/javascript"> $(function() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); }); </script>

以上就是有關jQuery的鏈式編程風格。spa