接上一節(jié) jQuery從零開始-1.1 認(rèn)識(shí) jQuery
jQuery 項(xiàng)目 主要包括 jQuery Core (核心庫(kù))磕仅、 jQuery UI (界面庫(kù)〉、 Sizzle ( CSS 選擇器)、 jQuery Mobile CjQuery 移動(dòng)版〉和 QUnit C 測(cè)試套件) 5 個(gè)部分。
jQuery 2.1.1 版本之后, 全部升級(jí)為 jQuery 3.0尉辑。第三個(gè)版本兼容更廣泛的瀏覽器,提供更優(yōu)化的代 碼较屿。雖然 jQuery 3 將是jQuery 的未來(lái)隧魄,但是與 jQuery UI 和jQuery Mobile 還存在兼容性問(wèn)題。如果需 要支持 IE6-8 瀏覽器吝镣,或者兼容已經(jīng)開發(fā)的項(xiàng)目堤器,建議繼續(xù)使用最新版本 1.12。
安裝 jQuery
jQuery 庫(kù)不需要復(fù)雜的安裝末贾,只需要把下載的庫(kù)文件放到站點(diǎn)中闸溃,然后導(dǎo)入到頁(yè)面中即可。
【示例 1 】 導(dǎo)入 jQuery 庫(kù)文件可以使用相對(duì)路徑拱撵,也可以使用絕對(duì)路徑辉川,具體情況根據(jù)存放jQuery 庫(kù)文件的位置而定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
測(cè)試 jQuery
引入 jQuery 庫(kù)文件之后拴测, 就可以在頁(yè)面中進(jìn)行 jQuery 開發(fā)了乓旗。開發(fā)的步驟很簡(jiǎn)單,在導(dǎo)入 jQuery 庫(kù)文件的<script>標(biāo)簽行下面集索,重新使用<script>標(biāo)簽定義一個(gè) JavaScript 代碼段屿愚,然后就可以在<script> 標(biāo)簽內(nèi)調(diào)用 jQuery 方法,編寫 JavaScript 腳本务荆。
【示例 2】 本示例設(shè)計(jì)在頁(yè)面初始化完畢后妆距,調(diào)用 JavaScript 的 alert()方法與瀏覽者打個(gè)招呼.
//在這里用戶就可以使用 jQuery 編程了!
$(function(){
alert("HELLO,WORLD")
})
在jQuery 代碼中函匕,()等效于 jQuery ()。 jQuery ()函數(shù)是 jQuery 庫(kù)文件的接口 函數(shù)盅惜,所有 jQuery 操作都必須從該接口函數(shù)切入中剩。jQuery ()函數(shù)相當(dāng)于頁(yè)面初始化事件處理函數(shù), 當(dāng)頁(yè) 面加載完畢抒寂,會(huì)執(zhí)行jQuery ()函數(shù)包含的函數(shù)结啼, 所以當(dāng)瀏覽該頁(yè)面時(shí), 會(huì)執(zhí)行 alert("您好")屈芜,看到彈出的信息提示對(duì)話框妆棒。
如果使用jQuery操作DOM文擋,則必須確保在DOM載入完畢后開始執(zhí)行沸伏,應(yīng)該使用ready事件作為處理HTML文擋的開始糕珊。
$(document).ready(function(){
//JavaScript 或者 jQuery 代碼
}) ;
上面代碼的語(yǔ)義是匹配文檔中的 document 節(jié)點(diǎn),然后為該節(jié)點(diǎn)綁定 ready 事件處理函數(shù)毅糟。它類似于 JavaScript 的 事件處理函數(shù)红选,不過(guò)jQuery 的 ready 事件要先于onload事件被激活。
為了方便開發(fā)姆另, jQuery 框架進(jìn)一步簡(jiǎn)化了()方法來(lái)表示。
$(function() {
//JavaScript 或者 jQuery 代碼
})
考慮到頁(yè)面加載需要一個(gè)過(guò)程迹辐,所有 jQuery代碼建議都包含在() 函數(shù)中,這與 JavaScript 代碼應(yīng)該放在 事件處理函數(shù)中的道理是一樣的明吩。
今天本節(jié)結(jié)束间学,下一節(jié)jQuery實(shí)戰(zhàn)案例