總結(jié)：

? ? ?1、jQuery的代碼風(fēng)格；

? ? ?2、加載模式；

? ? ?3、對(duì)象互換；

? ? ?4、如何處理多個(gè)庫的沖突。

?

一、jQuery的代碼風(fēng)格

? ??在jQuery程序中，不管是頁面元素的選擇、內(nèi)置的功能函數(shù)，都是美元符號(hào)“$”來起始的。而這個(gè)“$”就是jQuery當(dāng)中最重要且獨(dú)有的對(duì)象：jQuery對(duì)象，所以我們?cè)陧撁嬖?/span>素選擇或執(zhí)行功能函數(shù)的時(shí)候可以這么寫：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(function () {}); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//執(zhí)行一個(gè)匿名函數(shù)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(‘#box’); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //進(jìn)行執(zhí)行的ID元素選擇
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(‘#box’).css(‘color’, ‘red’); ? ? ? ? ? ? ? ?//執(zhí)行功能函數(shù)

由于$本身就是jQuery對(duì)象的縮寫形式，那么也就是說上面的三段代碼也可以寫成如下形式：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery(function () {});
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery(‘#box’);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery(‘#box’).css(‘color’, ‘red’);
在執(zhí)行功能函數(shù)的時(shí)候，我們發(fā)現(xiàn).css()這個(gè)功能函數(shù)并不是直接被“$”或jQuery對(duì)象調(diào)用執(zhí)行的，而是先獲取元素后，返回某個(gè)對(duì)象再調(diào)用.css()這個(gè)功能函數(shù)。那么也就是說，
這個(gè)返回的對(duì)象其實(shí)也就是jQuery對(duì)象。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$().css(‘color’, ’red’); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//理論上合法，但實(shí)際上缺少元素而報(bào)錯(cuò)
值得一提的是，執(zhí)行了.css()這個(gè)功能函數(shù)后，最終返回的還是jQuery對(duì)象，那么也就是說，jQuery的代碼模式是采用的連綴方式，可以不停的連續(xù)調(diào)用功能函數(shù)。啊
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$('#box').css('color', 'red').css('font-size', '50px'); ? ? ? ? ? ? ? ? //連綴

jQuery中代碼注釋和JavaScript是保持一致的，有兩種最常用的注釋：單行使用“//...”，多行使用“/* ... */”。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//$('#box').css('color', 'red');

?

二、加載模式

? ? ? 我們?cè)谥暗拇a一直在使用$(function () {});這段代碼進(jìn)行首尾包裹，那么為什么必須要包裹這段代碼呢？原因是我們jQuery庫文件是在body元素之前加載的，我們必須等待所有的DOM元素加載后，延遲支持DOM操作，否則就無法獲取到。
在延遲等待加載，JavaScript提供了一個(gè)事件為load，方法如下：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?window.onload = function () {}; ? ? ? ? ? ? //JavaScript等待加載
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(document).ready(function () {}); ? ? ? ?//jQuery等待加載

?

load和ready區(qū)別

?window.onload?$(document).ready()

執(zhí)行時(shí)機(jī)	必須等待網(wǎng)頁全部加載完畢（包括 圖片等），然后再執(zhí)行包裹代碼 只需要等待網(wǎng)頁中的DOM結(jié)構(gòu) 加載完畢，就能執(zhí)行包裹的代碼	只需要等待網(wǎng)頁中的DOM結(jié)構(gòu) 加載完畢，就能執(zhí)行包裹的代碼
執(zhí)行次數(shù)	只能執(zhí)行一次，如果第二次，那么 第一次的執(zhí)行會(huì)被覆蓋	可以執(zhí)行多次，第N次都不會(huì)被上 一次覆蓋
簡(jiǎn)寫方案	?無	$(function () { });

在實(shí)際應(yīng)用中，我們都很少直接去使用window.onload，因?yàn)樗枰却龍D片之類的大型元素加載完畢后才能執(zhí)行JS代碼。所以，最頭疼的就是網(wǎng)速較慢的情況下，頁面已經(jīng)全
面展開，圖片還在緩慢加載，這時(shí)頁面上任何的JS交互功能全部處在假死狀態(tài)。并且只能
執(zhí)行單次在多次開發(fā)和團(tuán)隊(duì)開發(fā)中會(huì)帶來困難。

三、對(duì)象互換

?

? ? ? jQuery 對(duì)象雖然是jQuery 庫獨(dú)有的對(duì)象，但它也是通過JavaScript 進(jìn)行封裝而來的。我們可以直接輸出來得到它的信息。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert($); //jQuery 對(duì)象方法內(nèi)部

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert($()); //jQuery 對(duì)象返回的對(duì)象，還是jQuery

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert($('#box')); //包裹ID 元素返回對(duì)象，還是jQuery

從上面三組代碼我們發(fā)現(xiàn)：只要使用了包裹后，最終返回的都是jQuery 對(duì)象。這樣的好處顯而易見，就是可以連綴處理。但有時(shí)，我們也需要返回原生的DOM 對(duì)象，比如：?11
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(document.getElementById('box')); ? ? ? //[object HTMLDivElement]
jQuery 想要達(dá)到獲取原生的DOM 對(duì)象，可以這么處理：

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

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

?

四、如何處理多個(gè)庫的沖突

? ? ? 當(dāng)一個(gè)項(xiàng)目中引入多個(gè)第三方庫的時(shí)候，由于沒有命名空間的約束（命名空間就好比同一個(gè)目錄下的文件夾一樣，名字相同就會(huì)產(chǎn)生沖突），庫與庫之間發(fā)生沖突在所難免。那么，既然有沖突的問題，為什么要使用多個(gè)庫呢？原因是jQuery 只不過是DOM 操作為主的庫，方便我們?nèi)粘eb 開發(fā)。但有時(shí)，我們的項(xiàng)目有更多特殊的功能需要引入其他的庫，比如用戶界面UI 方面的庫，游戲引擎方面的庫等等一系列。而很多庫，比如prototype、還有我們JavaScript 課程開發(fā)的Base 庫，都使用“$”作為基準(zhǔn)起始符，如果想和jQuery 共容有兩種方法：
1.將jQuery 庫在Base 庫之前引入，那么“$”的所有權(quán)就歸Base 庫所有，而jQuery 可以直接用jQuery 對(duì)象調(diào)用，或者創(chuàng)建一個(gè)“$$”符給jQuery 使用。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var $$ = jQuery; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//創(chuàng)建一個(gè)$$的jQuery 對(duì)象
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(function () { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//這是Base 的$
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert($('#box').ge(0)); ? ? ? ? ? ? ? ? ? ? ? ? ? //這是Base 的$
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert($$('#box').width()); ? ? ? ? ? ? ? ? ? ? ?//這是jQuery 的$$
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});?

2.如果將jQuery 庫在Base 庫之后引入，那么“$”的所有權(quán)就歸jQuery 庫所有，而Base庫將會(huì)沖突而失去作用。這里，jQuery 提供了一個(gè)方法：

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

轉(zhuǎn)載于:https://www.cnblogs.com/mayi007/p/5016084.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的jQuery学习随笔（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。