JQuery入門(mén)—JQuery程序的代碼風(fēng)格詳細(xì)介紹

更新時(shí)間：2013年01月03日 15:38:21 作者：

良好的代碼風(fēng)格可以有效的增加可讀性，本節(jié)為大家介紹jQuery程序的代碼風(fēng)格,感興趣的朋友可以參考下

《jQuery權(quán)威指南》第1章jQuery開(kāi)發(fā)入門(mén)，本章通過(guò)循續(xù)漸進(jìn)的方式，先從jQuery的基礎(chǔ)概念入手，介紹jQuery庫(kù)的下載，引入簡(jiǎn)單應(yīng)用方法；后部分側(cè)重于jQuery控制DOM對(duì)象和頁(yè)面CSS樣式的介紹，通過(guò)一些簡(jiǎn)單的小示例，使讀者對(duì)jQuery在頁(yè)面中的功能應(yīng)用有一個(gè)大致的了解，為下一章節(jié)進(jìn)一步學(xué)習(xí)jQuery庫(kù)的詳細(xì)對(duì)象和方法奠定基礎(chǔ)。本節(jié)為大家介紹jQuery程序的代碼風(fēng)格。

1.1.5　jQuery程序的代碼風(fēng)格
1．“$”美元符的使用
在jQuery程序中，使用最多的莫過(guò)于“$”美元符了，無(wú)論是頁(yè)面元素的選擇、功能函數(shù)的前綴，都必須使用該符號(hào)，可以說(shuō)它是jQuery程序的標(biāo)志。
2. 事件操作鏈接式書(shū)寫(xiě)
在編寫(xiě)頁(yè)面某元素事件時(shí)，jQuery程序可以使用鏈接式的方式編寫(xiě)該元素的所有事件。為了更好地說(shuō)明該書(shū)寫(xiě)方法的使用，我們通過(guò)一個(gè)示例加以闡述。
示例1-2　jQuery事件的鏈?zhǔn)綄?xiě)法
（1）功能描述
在頁(yè)面中，有一個(gè)<div>標(biāo)記，在該標(biāo)記內(nèi)，包含二個(gè)<div>標(biāo)記，一個(gè)為主題，另一個(gè)為內(nèi)容，頁(yè)面首次加載時(shí)，被包含的內(nèi)容<div>標(biāo)記是不可見(jiàn)的，當(dāng)用戶單擊主題<div>標(biāo)記時(shí)，改變自身的背景色，并將內(nèi)容<div>標(biāo)記顯示出來(lái)。
（2）實(shí)現(xiàn)代碼
新建一個(gè)HTML文件1-2.html，加入如代碼清單1-2所示的代碼。
代碼清單1-2　jQuery事件的鏈?zhǔn)綄?xiě)法

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery事件的鏈?zhǔn)綄?xiě)法</title> 
<script language="javascript" type="text/javascript" 
src="Jscript/jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
.divFrame{width:260px;border:solid 1px #666; 
font-size:10pt} 
.divTitle{background-color:#eee;padding:5px} 
.divContent{padding:5px;display:none} 
.divCurrColor{ background-color:Red} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$(".divTitle").click(function(){ 
$(this).addClass("divCurrColor") 
.next(".divContent").css("display","block"); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="divFrame"> 
<div class="divTitle">主題</div> 
<div class="divContent"> 
<a href="#">鏈接一</a><br /> 
<a href="#">鏈接二</a><br /> 
<a href="#">鏈接三</a> 
</div> 
</div> 
</body> 
</html> 

在上述文件的代碼中，加粗的代碼是鏈?zhǔn)綄?xiě)法。
代碼功能說(shuō)明：當(dāng)用戶單擊Class名稱為"divTitle"的元素時(shí)，自身增加名稱為"divCurrColor"的樣式；同時(shí)，將接下來(lái)的Class名稱為"divContent"元素顯示出來(lái)?？梢钥闯觯瑑蓚€(gè)功能的實(shí)現(xiàn)通過(guò)"."符號(hào)鏈接在一起。
（3）頁(yè)面效果
執(zhí)行HTML文件1-2.html，實(shí)現(xiàn)的頁(yè)面效果如圖1-3所示。