jQuery學習筆記——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是保持一致的，有兩種最經常使用的註釋：單行使用「//...」，
多行使用「/* ... */」。
//$('#box').css('color', 'red');

• 加載模式

咱們在以前的代碼一直在使用$(function () {});這段代碼進行首尾包裹，那麼爲何必須
要包裹這段代碼呢？緣由是咱們jQuery庫文件是在body元素以前加載的，咱們必須等待所
有的DOM元素加載後，延遲支持DOM操做，不然就沒法獲取到。
在延遲等待加載，JavaScript提供了一個事件爲load，方法以下：
window.onload = function () {};
//JavaScript等待加載
$(document).ready(function () {});
//jQuery等待加載
load和ready區別
window.onload
$(document).ready()
執行時機
必須等待網頁所有加載完畢（包括
圖片等），而後再執行包裹代碼
只須要等待網頁中的DOM結構
加載完畢，就能執行包裹的代碼
執行次數
只能執行一次，若是第二次，那麼
第一次的執行會被覆蓋
能夠執行屢次，第N次都不會被上
一次覆蓋
簡寫方案
無
$(function () {
});
在實際應用中，咱們都不多直接去使用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、還有咱們 JavaScript 課程開發的 Base 庫，都使用「$」做爲
基準起始符，若是想和 jQuery 共容有兩種方法：
1.將 jQuery 庫在 Base 庫以前引入，那麼「$」的全部權就歸 Base 庫全部，而 jQuery 可
以直接用 jQuery 對象調用，或者建立一個「$$」符給 jQuery 使用。
var $$ = jQuery;
//建立一個$$的 jQuery 對象
$(function () {
//這是 Base 的$
alert($('#box').ge(0));
//這是 Base 的$
alert($$('#box').width());
//這是 jQuery 的$$
});
2.若是將 jQuery 庫在 Base 庫以後引入，那麼「$」的全部權就歸 jQuery 庫全部，而 Base
庫將會衝突而失去做用。這裏，jQuery 提供了一個方法：
jQuery.noConflict();
//將$符全部權剔除
var $$ = jQuery;
$(function () {
alert($('#box').ge(0));
alert($$('#box').width());
});