Jquery的學習（二）基礎核心

Jquery的學習（二）基礎核心

1.學習要點：

1.代碼風格
2.載入模式
3.對象互換

一.代碼風格：

在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載入和read載入的區別

	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 的，這樣可以在很多需要迴圈遍曆的處理上更加得心應手。