- jQuery權威指南（第2版）
- 陶國榮 著
- 538字
- 2018-12-31 23:37:04
1.3 jQuery程序的代碼風格
1.3.1 “$”美元符的使用
在jQuery程序中，使用最多的莫過于“$”美元符了，無論是頁面元素的選擇、功能函數的前綴都須使用該符號，可以說它是jQuery程序的標志。例如下列代碼：
$("#tip").html("hello world").show(1000);
上述代碼表示1000毫秒后，在ID號為“tip”的元素中顯示“hello world”字樣。
1.3.2 事件操作鏈接式書寫
在編寫頁面某元素事件時，jQuery程序可以使用鏈接式的方式編寫該元素的所有事件。為了更好地說明該書寫方法的使用，我們通過一個示例加以闡述。
示例1-2 jQuery事件的鏈式寫法
（1）功能描述
在示例1-1基礎之上，增加兩個<div>元素，一個為框架，另一個為標題。示例1-1顯示的文字為內容，框架元素包含標題和內容元素。當頁面首次加載時，被包含的內容<div>標記是不可見的，當用戶單擊主題<div>標記時，改變自身的背景色，并將內容<div>標記顯示出來。
（2）實現代碼
新建一個HTML文件1-2.html,加入如下代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件的鏈式寫法</title>
<script src="JScript/jquery-1.8.2.min.js"
type="text/javascript"></script>
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px 0px;font-size:12px; text-align:center;display:none;}
.curcol{ background-color:#CCC}
</style>
<script type="text/javascript">
$(function() {
$(".content").html("您好！歡迎來到jQuery的精彩世界。");
$(".title").click(function() {
$(this).addClass("curcol")
.next(".content").css("display", "block");
});
});
</script>
</head>
<body>
<div class="iframe">
<div class="title">標題</div>
<div class="content"></div>
</div>
</body>
</html>
在上述文件的代碼中，加粗代碼就是鏈式寫法。
（3）頁面效果
執行HTML文件1-2.html，實現的頁面效果如圖1-3所示。
圖1-3 DIV元素單擊前后的頁面對比效果
（4）代碼分析
當用戶單擊Class名稱為“title”的元素時，自身增加名稱為“curcol”的樣式；同時，將接下來的Class名稱為“content”元素顯示出來。可以看出兩個功能的實現通過“.”符號鏈接在一起。