鋒利的 jQuery
一、JavaScript和JavaScript庫
JavaScript簡介
JavaScript是Netscape公司開發(fā)的一種腳本語言（scripting language）。JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時的、動態(tài)的和交互的關系，使網(wǎng)頁可以包含更多活躍的元素和更加精彩的內容
-
弊端
- 復雜的文檔對象模型（DOM）
- 不一致的瀏覽器實現(xiàn)和便捷的開發(fā)
- 調試工具的缺乏
JavaScript庫作用及對比
jQuery同樣是一個輕量級的庫，擁有強大的選擇器、出色的DOM操作、可靠的事件處理、完善的兼容性和鏈式操作等功能。
二、加入jQuery
jQuery簡介
由John Resig創(chuàng)建于2006年1月的開源項目?，F(xiàn)在的jQuery團隊主要包括核心庫、UI、插件和jQuery Mobile等開發(fā)人員以及推廣和網(wǎng)站設計、維護人員
jQuery的優(yōu)勢
- 輕量級：采用UglifyJS壓縮后，大小保持在30KB左右
-
強大的選擇器：
- 從CSS 1到CSS 3幾乎所有的選擇器
- jQuery獨創(chuàng)的高級而復雜的選擇器
- 支持XPath插件選擇器
- 開發(fā)者可以編寫屬于自己的選擇器
- 出色的DOM操作
-
可靠地事件處理：
- 在預留退路（graceful degradation）
- 循序漸進
- 非入侵式（Unobtrusive）
- 完善的Ajax：專心處理業(yè)務邏輯而無需關心復雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建和使用的問題
- 不污染頂級變量：jQuery只建立一個名為jQuery的對象，其所有的函數(shù)方法都在這個對象之下。其別名$也可以隨時交出控制權，絕對不會污染其他的對象。該特性使jQuery可以與其他JavaScript庫共存，在項目中放心地引用而不需要考慮到后期可能的沖突
- 出色的瀏覽器兼容
- 鏈式操作方式
- 隱形迭代
- 行為層與結構層分離
- 豐富的插件
- 完善的文檔
- 開源
三、jQuery代碼的編寫
配置jQuery環(huán)境
-
獲取jQuery最新版本
進入jQuery的官方網(wǎng)站下載
Tips : 獲取的方式有好多，補充兩個書中沒有提到的方式。
-
jQuery庫類型說明
- 生產版（最小化和壓縮版）
- 開發(fā)版（未壓縮版）
| 名稱 | 大小 | 說明 |
|---|---|---|
| 開發(fā)版 (jquery.js v3.2.1 ) | 約261KB | 完整無壓縮版本，主要用于測試、學習和開發(fā) |
| 生產版 (jquery.min.js v3.2.1 ) | 約84.6KB | 經過工具壓縮或經過服務器開啟Gzip壓縮 主要應用于產品和項目 |
-
jQuery環(huán)境配置
- jQuery也可以不需要下載，在
script標簽引入百度靜態(tài)資源公共庫對應鏈接(http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js) - 頁面中引入本地jquery
- jQuery也可以不需要下載，在
//使用公共庫
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
//在head標簽引入 jQuery，應該配合 window.onload() 方法使用
<head>
<script src='./js/jquery.min.js'></script>
</head>
//在<body>標簽最下方引入jQuery
<body>
<footer>頁腳</footer>
<script src='./js/jquery.min.js'></script>
</body>
編寫簡單的jQuery代碼
在jQuery庫中，$就是jQuery的一個簡寫形式，$("#foo")和jQuery("#foo")是等價的，$.ajax和jQuery.ajax是等價的。
$(document).ready(function(){
//
})
window.onload和 $(document).ready( )的對比
| window.onload | $(document).ready() | |
|---|---|---|
| 執(zhí)行時機 | 必須等待網(wǎng)頁中所有的內容加載完畢（包括圖片）才能執(zhí)行 | 網(wǎng)頁中所有的DOM結構繪制完畢就執(zhí)行，可能DOM元素關聯(lián)的東西還沒有加載完 |
| 編寫個數(shù) | 不能同時編寫多個只能輸出最后一個 | 能同時編寫多個互不影響 |
| 簡化寫法 | — | $(function(){}) |
jQuery代碼風格
-
優(yōu)秀代碼風格
- 對于一個對象不超過3個操作的，可以寫成一行
- 對于一個對象的較多操作，建議每行寫一個操作
- 對于多個對象的少量操作，可以每個對象寫一行，涉及子元素適當縮進
- 為代碼添加有意義的注釋，能夠培養(yǎng)良好的編碼習慣和風格，提高開發(fā)效率
四、jQuery對象和DOM對象
DOM對象和jQuery對象簡介
- DOM對象：DOM（Document Object Model，文檔對象模型），每一份DOM都可以表示成一棵樹
- jQuery對象：jQuery對象就是通過jQuery包裝DOM對象后產生的對象
Tips：在jQuery對象中無法使用DOM對象的任何方法
jQurey對象和DOM對象的相互轉換
-
jQuery對象轉成DOM對象
- 通過[index]的方法得到相應的DOM對象
- 通過get(index)方法得到相應的DOM對象
var $box = $("#box");
var box=$box[0];
var box=$box.get(0);
-
DOM對象轉成jQuery對象
- 用$()把DOM對象包裝起來，就可以獲得一個jQuery對象
var box =document.getElementById("box");
var $box=$(box);
解決jQuery和其他庫的沖突
默認情況下，jQuery用$作為自身的快捷方式
-
jQuery庫在其他庫之后導入
- 調用jQuery.noConflict()函數(shù)來將變量$的控制權移交給其他JavaScript庫
- 自定義一個快捷方式
- 不想自定義快捷方式，還使用$
//控制權移交給其他JavaScript庫
jQuery().noConflict();
jQuery(function(){
jQuery("p").click(function(){
})
})
//自定義一個快捷方式
var $j=jQuery().noConflict();
$j(function(){
$j("p").click(function(){
})
})
//不想自定義快捷方式，還使用$
//方式一
jQuery().noConflict();
jQuery(function($){ //使用jQuery設定頁面加載時執(zhí)行的函數(shù)
$("p").click(function(){ //在函數(shù)內部繼續(xù)使用$()
})
})
//方式二
jQuery().noConflict();//將變量$的控制權讓渡給其他庫
(function($){ //定義匿名函數(shù)并設置形參為$
$(function(){ //匿名函數(shù)內部的$均為jQuery
$("p").click(function(){ //繼續(xù)使用$()方法
})
})
})(jQuery)
- jQuery庫在其他庫之前導入
//直接使用jQuery,無需調用" jQuery().noConflict()" 函數(shù)
jQuery(function(){
jQuery("p").click(function(){
})
})
