總結(jié)：

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

? ? ?2、加載模式；

? ? ?3、對象互換；

? ? ?4、如何處理多個庫的沖突。

?

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(‘#box’); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //進行執(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 () {});這段代碼進行首尾包裹，那么為什么必須要包裹這段代碼呢？原因是我們jQuery庫文件是在body元素之前加載的，我們必須等待所有的DOM元素加載后，延遲支持DOM操作，否則就無法獲取到。
在延遲等待加載，JavaScript提供了一個事件為load，方法如下：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?window.onload = function () {}; ? ? ? ? ? ? //JavaScript等待加載
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(document).ready(function () {}); ? ? ? ?//jQuery等待加載

?

load和ready區(qū)別

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

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

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

三、對象互換

?

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

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

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

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

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

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

?

四、如何處理多個庫的沖突

? ? ? 當一個項目中引入多個第三方庫的時候，由于沒有命名空間的約束（命名空間就好比同一個目錄下的文件夾一樣，名字相同就會產(chǎn)生沖突），庫與庫之間發(fā)生沖突在所難免。那么，既然有沖突的問題，為什么要使用多個庫呢？原因是jQuery 只不過是DOM 操作為主的庫，方便我們?nèi)粘eb 開發(fā)。但有時，我們的項目有更多特殊的功能需要引入其他的庫，比如用戶界面UI 方面的庫，游戲引擎方面的庫等等一系列。而很多庫，比如prototype、還有我們JavaScript 課程開發(fā)的Base 庫，都使用“$”作為基準起始符，如果想和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());
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });

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

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

總結(jié)

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

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