一根资、代碼風(fēng)格
? ? ? ? 在jQuery程序中热芹，不管是頁面元素的選擇、內(nèi)置的功能函數(shù)荞雏，都是美元符號“$”來起始的。而這個“$”就是jQuery當(dāng)中最重要且獨有的對象：jQuery對象平酿，所以我們在頁面元素選擇或執(zhí)行功能函數(shù)的時候可以這么寫：
? ? ? ? ? ? ? ? ? ? $(function () {}); //執(zhí)行一個匿名函數(shù)
? ? ? ? ? ? ? ? ? ? $(‘#box’); //進(jìn)行執(zhí)行的ID元素選擇
? ? ? ? ? ? ? ? ? ? $(‘#box’).css(‘color’,‘red’); //執(zhí)行功能函數(shù)
? ? ? ?由于$本身就是jQuery對象的縮寫形式凤优，那么也就是說上面的三段代碼也可以寫成如下形式：
? ? ? ? ? ? ? ? ? ? ?jQuery(function () {});
? ? ? ? ? ? ? ? ? ? ?jQuery(‘#box’);
? ? ? ? ? ? ? ? ? ? ?jQuery(‘#box’).css(‘color’,‘red’);
? ? ? ? 在執(zhí)行功能函數(shù)的時候，我們發(fā)現(xiàn).css()這個功能函數(shù)并不是直接被“$”或jQuery對象調(diào)用執(zhí)行的蜈彼，而是先獲取元素后筑辨，返回某個對象再調(diào)用.css()這個功能函數(shù)。那么也就是說幸逆，這個返回的對象其實也就是jQuery對象棍辕。
? ? ? ? $().css(‘color’, ’red’); //理論上合法暮现，但實際上缺少元素而報錯值得一提的是，執(zhí)行了.css()這個功能函數(shù)后楚昭，最終返回的還是jQuery對象栖袋，那么也就是說，jQuery的代碼模式是采用的連綴方式抚太，可以不停的連續(xù)調(diào)用功能函數(shù)塘幅。
? ? ? ? $('#box').css('color',?'red').css('font-size', '50px'); //連綴
? ? ? ? jQuery中代碼注釋和JavaScript是保持一致的，有兩種最常用的注釋：
? ? ? ?單行使用“//...”尿贫，
? ? ? ?多行使用“/* ... */”电媳。
? ? ? ? //$('#box').css('color','red');
二、加載方式
? ? ? ? 我們在之前的代碼一直在使用$(function () {});這段代碼進(jìn)行首尾包裹庆亡，那么為什么必須要包裹這段代碼呢匾乓？原因是我們jQuery庫文件是在body元素之前加載的，我們必須等待所有的DOM元素加載后又谋，延遲支持DOM操作拼缝，否則就無法獲取到。
在延遲等待加載搂根，JavaScript提供了一個事件為load珍促，方法如下：
?window.onload = function () {}; //JavaScript等待加載
?$(document).ready(function () {}); //jQuery等待加載
? ? ? ? 在實際應(yīng)用中，我們都很少直接去使用window.onload剩愧，因為他需要等待圖片之類的大
型元素加載完畢后才能執(zhí)行JS代碼。所以娇斩，最頭疼的就是網(wǎng)速較慢的情況下仁卷，頁面已經(jīng)全
面展開，圖片還在緩慢加載犬第，這時頁面上任何的JS交互功能全部處在假死狀態(tài)锦积。并且只能
執(zhí)行單次在多次開發(fā)和團(tuán)隊開發(fā)中會帶來困難。
三歉嗓、對象互換
? ? ? ?jQuery對象雖然是jQuery庫獨有的對象丰介，但它也是通過JavaScript進(jìn)行封裝而來的。我們可以直接輸出來得到它的信息鉴分。
? ? ? ? ? ? ? ? ?alert($); //jQuery對象方法內(nèi)部
? ? ? ? ? ? ? ? ?alert($());
? ? ? ? ? ? ? ? //jQuery對象返回的對象哮幢，還是jQuery
? ? ? ? ? ? ? ? alert($('#box'));
? ? ? ? ? ? ? ?//包裹ID元素返回對象，還是jQuery
? ? ? ?從上面三組代碼我們發(fā)現(xiàn)：只要使用了包裹后志珍，最終返回的都是jQuery對象橙垢。這樣的好處顯而易見，就是可以連綴處理伦糯。但有時柜某，我們也需要返回原生的DOM對象嗽元，比如：
? ? ? ? ? ? ? ? ? ?alert(document.getElementById('box'));
? ? ? ? ? ? ? ? ? //[object HTMLDivElement]
? ? ? ?jQuery想要達(dá)到獲取原生的DOM對象，可以這么處理：
? ? ? ? ? ? ? ? ?alert($('#box').get(0)); //ID元素的第一個原生DOM
? ? ? ? ? 從上面get(0)喂击，這里的索引看出剂癌，jQuery是可以進(jìn)行批量處理DOM的，這樣可以在很多需要循環(huán)遍歷的處理上更加得心應(yīng)手翰绊。
四珍手、多個庫之間的沖突
? ? ? ? 當(dāng)一個項目中引入多個第三方庫的時候，由于沒有命名空間的約束（命名空間就好比同一個目錄下的文件夾一樣辞做，名字相同就會產(chǎn)生沖突）琳要，庫與庫之間發(fā)生沖突在所難免。那么秤茅，既然有沖突的問題稚补，為什么要使用多個庫呢？原因是jQuery只不過是DOM操作為主的庫框喳，方便我們?nèi)粘eb開發(fā)课幕。但有時，我們的項目有更多特殊的功能需要引入其他的庫五垮，比如用戶界面UI方面的庫乍惊，游戲引擎方面的庫等等一系列。而很多庫放仗，比如prototype润绎、還有我們JavaScript課程開發(fā)的Base庫，都使用“$”作為
基準(zhǔn)起始符诞挨，如果想和jQuery共容有兩種方法：
? ? ? ? ? ?1.將jQuery庫在Base庫之前引入莉撇，那么“$”的所有權(quán)就歸Base庫所有，而jQuery可以直接用jQuery對象調(diào)用惶傻，或者創(chuàng)建一個“$$”符給jQuery使用棍郎。
? ? ? ? ? var $$ = jQuery; //創(chuàng)建一個$$的jQuery對象
? ? ? ? ? $(function () { //這是Base的$
? ? ? ? ? ? ? ? ? ? ? alert($('#box').ge(0)); //這是Base的$
? ? ? ? ? ? ? ? ? ? ? alert($$('#box').width()); //這是jQuery的$$
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? 2.如果將jQuery庫在Base庫之后引入，那么“$”的所有權(quán)就歸jQuery庫所有银室，而Base庫將會沖突而失去作用涂佃。這里，jQuery提供了一個方法：
? ? ? ? ? ? ? ? ? ? ? ?jQuery.noConflict(); //將$符所有權(quán)剔除
? ? ? ? ? ? ? ? ? ? ? ?var $$ = jQuery;
? ? ? ? ? ? ? ? ? ? ?$(function () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert($('#box').ge(0));
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert($$('#box').width());
? ? ? ? ? ? ? ? ? ? ? ?});
? ?謝謝閱讀蜈敢！
?
