最近學了jQuery,感覺這個jQuery是真的挺不錯的，果然像他說的那樣，少些多做！ 剛一入手感覺真是不錯。 但是寫多了，就會發現這個代碼一行居然能寫那麼長。 而且可讀性還不好。 有幸自己買了一本鋒利的jQuery這本書。 我就整理了下。 到底在實際應用中怎麼讓自己的jQurey的代碼看起來可讀性強，而且還有美感。 我就用了了本書中的一個小例子。 來教教大家代碼應該怎麼寫菜好看！
廢話不多說，想把這個demo代碼奉上。 各位爺！ 您瞧好啊~
<!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編寫的規範。
留言列表
