溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關jquery中有哪些代碼規范，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜單欄</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 280px;
background-color: red;
margin: 50px auto;
border: 1px solid #000;
}
.box .menu{
width: 100%;
height: 100%;
background-color: gold;
list-style: none;
}
.box .menu>.level1{
width: 100%;
height: auto;
line-height: 40px;
list-style: none;
}
.box .menu>.level1>a.current{
background-color: green;
color: #0a0a0a;
text-decoration: none;
}
.box .menu>.level1>a{
display: inline-block;
background-color: gray;
width: 100%;
text-align: center;
text-decoration: none;
}
.box .menu>.level1>.level2{
width: 100%;
height: 160px;
background-color: white;
display: none;
float: left;
}
.box .menu>.level1:nth-of-type(1)>.level2{
display: block;
}
.box .menu>.level1>.level2 li{
width: 100%;
height: 40px;
list-style: none;
background-color: gainsboro;
text-align: center;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
$(".level1>a").click(function () {
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
});
});
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#one" class="current">襯衫</a>
<ul class="level2">
<li>短袖襯衫</li>
<li>長袖襯衫</li>
<li>短袖襯衫</li>
<li>短袖襯衫</li>
</ul>
</li>
<li class="level1">
<a href="#one">衛衣</a>
<ul class="level2">
<li>開襟衛衣</li>
<li>開襟衛衣</li>
<li>開襟衛衣</li>
<li>開襟衛衣</li>
</ul>
</li>
<li class="level1">
<a href="#one">褲子</a>
<ul class="level2">
<li>短袖襯衫</li>
<li>褲子襯衫</li>
<li>短袖襯衫</li>
<li>褲子襯衫</li>
</ul>
</li>
</ul>
</div>
</body>
</html>童鞋們。請看這段代碼
$(".level1>a").click(function () {
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
});請問你第一眼看著個你能一下子看明白是怎么回事嗎？
哪怕是開發過幾年的大神。也不能一眼就看出來這行代碼要干啥。就是因為這行代碼太長了。每讀一次都要自講前面的串聯起來看。毫無美感，閱讀性。
雖然jQuery做到了行為和內容的分離，但jQuery代碼也應該擁有良好的層次結構機規范，這樣才能進一步改善代碼的可讀性和可維護性。
所以代碼應該寫出這種樣式
$(".level1>a").click(function () {
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
});將每一次對象執行的動作分割成單獨一行。這樣可讀性就大大提高了。
但也不要隨意分割，隨意分割那你還不如分割呢。所以總結了，以下三點
1.對于同一個對象不超過3個操作的，可以直接寫成一行
$(this).addClass("current").show();
2.對于同意對象的較多操作建議，每行寫一個操作
$(this).addClass("current")
.show()
.fadeTo("mouseover")
.fadeTo("fast",1)
.unbind("click")
.click(function(){
//do something
});3.對于多個對象的少量操作，可以每一個對象寫一行，如果涉及子元素，可以考慮適當的縮進，例如demo中的代碼
$(this).addClass("current")
.childer("li").show().end()
.siblings().removeClass()
.children("a").hide();還要強調一點，就是要為代碼添加注釋；
jQuery 以其強大的選擇器著稱，有時候很復雜的問題用一行選擇器就可以輕松解決，但是很容易寫出來下面的代碼
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red"); 哈哈，你能一眼認出來我嗎？
在編寫一個優秀的選擇器的時候，千萬不要忘記給這一段代碼加上注釋，這很重要，無論是自己日后閱讀還是與他人分享、合作開發，注釋都能起到良好的效果
//注釋：在一個id為table的表格的tbody中，如果每一行的一列中的checkbox沒有被禁用，則把這行的背景設為紅色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");
通過類似的有意義的注釋，能夠培養良好的編碼習慣和風格，提高開發效率。
----------------------------------------------------------更新---------------------------------------------------------
（1）jQuery對象和DOM對象的相互轉換
在jQuery對象和DOM對象相互轉換之前，先約定好定義變量的風格，如果獲取的對象是jQuery對象，那么在變量面前加上$
例如：
var $variable = jQuery對象
如果獲取的DOM對象；
var varible = DOM對象；
上述就是小編為大家分享的jquery中有哪些代碼規范了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
