學習要點：

• 1.代碼風格
• 2.加載模式
• 3.對象互換
• 4.多個庫之間的沖突

本節簡單的介紹一下jQuery 一些核心的問題。

一．代碼風格

在jQuery程序中，不管是頁面元素的選擇、內置的功能函數，都是美元符號“$”來起始的。而這個“$”就是jQuery當中最重要且獨有的對象：jQuery對象，所以我們在頁面元素選擇或執行功能函數的時候可以這麽寫：

$(function () {}); //執行一個匿名函數
$(‘#box’); //進行執行的ID元素選擇
$(‘#box’).css(‘color’, ‘red’); //執行功能函數

由於$本身就是jQuery對象的縮寫形式，那麽也就是說上面的三段代碼也可以寫成如下形式：

jQuery(function () {});
jQuery(‘#box’);
jQuery(‘#box’).css(‘color’, ‘red’);

在執行功能函數的時候，我們發現.css()這個功能函數並不是直接被“$”或jQuery對象調用執行的，而是先獲取元素後，返回某個對象再調用.css()這個功能函數。那麽也就是說，這個返回的對象其實也就是jQuery對象。

$().css(‘color’, ’red’); //理論上合法，但實際上缺少元素而報錯

值得一提的是，執行了.css()這個功能函數後，最終返回的還是jQuery對象，那麽也就是說，jQuery的代碼模式是采用的連綴方式，可以不停的連續調用功能函數。

$(‘#box‘).css(‘color‘, ‘red‘).css(‘font-size‘, ‘50px‘); //連綴

jQuery中代碼註釋和JavaScript是保持一致的，有兩種最常用的註釋：單行使用“//...”，多行使用“/* ... */”。

二．加載模式

我們在之前的代碼一直在使用$(function () {});這段代碼進行首尾包裹，那麽為什麽必須要包裹這段代碼呢？

原因是我們jQuery庫文件是在body元素之前加載的，我們必須等待所有的DOM元素加載後，延遲支持DOM操作，否則就無法獲取到。
在延遲等待加載，JavaScript提供了一個事件為load，方法如下：

window.onload = function
 
 () {}; //JavaScript等待加載
$(document).ready(function () {}); //jQuery等待加載

load和ready區別

在實際應用中，我們都很少直接去使用window.onload，因為他需要等待圖片之類的大型元素加載完畢後才能執行JS代碼。所以，最頭疼的就是網速較慢的情況下，頁面已經全面展開，圖片還在緩慢加載，這時頁面上任何的JS交互功能全部處在假死狀態。

三．對象互換

jQuery 對象雖然是 jQuery 庫獨有的對象，但它也是通過 JavaScript 進行封裝而來的。可以直接輸出來得到它的信息。

alert($); //jQuery 對象方法內部
alert($()); //jQuery 對象返回的對象，還是 jQuery
alert($(‘#box‘)); //包裹 ID 元素返回對象，還是 jQuery

從上面三組代碼發現：只要使用了包裹後，最終返回的都是 jQuery 對象。這樣的好處顯而易見，就是可以連綴處理。但有時，我們也需要返回原生的 DOM 對象，比如：

alert(document.getElementById(‘box‘)); //[object HTMLDivElement]

jQuery 想要達到獲取原生的 DOM 對象，可以這麽處理：

alert($(‘#box‘).get(0)); //ID 元素的第一個原生 DOM

從上面 get(0)，這裏的索引看出，jQuery 是可以進行批量處理 DOM 的，這樣可以在很多需要循環遍歷的處理上更加得心應手。

四．多個庫之間的沖突

當一個項目中引入多個第三方庫的時候，由於沒有命名空間的約束，庫與庫之間發生沖突在所難免。那麽，既然有沖突的問題，為什麽要使用多個庫呢？原因是 jQuery 只不過是 DOM 操作為主的庫，方便我們日常 Web 開發。但有時，我們的項目有更多特殊的功能需要引入其他的庫，比如用戶界面 UI 方面的庫，遊戲引擎方面的庫等等一系列。而很多庫，比如 prototype，都使用“$”作為基準起始符，如果想和 jQuery 共容有兩種方法：
1.將 jQuery 庫在 prototype 庫之前引入，那麽“$”的所有權就歸 Base 庫所有，而 jQuery 可以直接用 jQuery 對象調用，或者創建一個“$$”符給 jQuery 使用。

var $$ = jQuery; //創建一個$$的 jQuery 對象
$(function () { //這是 prototype 的$
　　alert($(‘#box‘).ge(0)); //這是 prototype 的$
　　alert($$(‘#box‘).width()); //這是 jQuery 的$$
});

2.如果將 jQuery 庫在 prototype 庫之後引入，那麽“$”的所有權就歸 jQuery 庫所有，而 prototype庫將會沖突而失去作用。這裏，jQuery 提供了一個方法：

jQuery.noConflict(); //將$符所有權剔除
var $$ = jQuery;
$(function () {
　　alert($(‘#box‘).ge(0));
　　alert($$(‘#box‘).width());
});

Jquery2 基礎核心