1.1 JavaScript和JavaScript庫

1.1.1 JavaScript簡介

JavaScript自身存在3個弊端，即復(fù)雜的文檔對象模型DOM，不致的瀏覽器實現(xiàn)和缺乏便捷的開發(fā)、調(diào)試工具。

1.2 加入jQuery

1.2.2 jQuery的優(yōu)勢

jQuery強調(diào)的理念是寫得少，做得多(write less， do more ) 。

• jQuery有以下優(yōu)勢：
  輕量級；
  強大的選擇器；
  出色的DOM操作的封裝；
  可靠的事件處理機制；
  完善的Ajax；
  不污染頂級變量；
  出色的瀏覽器兼容性；
  鏈式操作方式；
  隱式迭代；
  行為層與結(jié)構(gòu)層分離；
  插件支持；
  開源；

1.3 jQuery代碼的編寫

1.3.2 編寫簡單的jQuery代碼

$(document).ready()

這段代碼的作用類似于傳統(tǒng)JavaScript的window.onload方法·小過與window.onload還是有些區(qū)別。表格1-2對它們進行了簡單對比。

1.3.3 jQuery代碼風(fēng)格

4種代碼風(fēng)格總結(jié)
（1）對同一個對象不超過3個操作的，可以直接寫成一行代碼如下:
$("li").show().unbind("click");
（2）對一于同·個對象的較多操作，建議每行寫一個操作。代碼如下:

（3）對于多個對象的少量操作，可以每個對象寫一行，如果涉及子元素，叮以考慮適當?shù)乜s進。例如上面提到的代碼:

（4）對于多個對象的較多操作，建議結(jié)合第（2）條、第（3）條來做。

1.4 jQuery對象和DOM對象

• DOM對象
  DOM（文檔對象模型），每一份DOM都可以表示成一棵樹。
  獲取DOM對象：
  var domObj= document.getElementById("id");

• jQuery對象
  jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。
  jQuery對象是jQuery獨有的。如果一個對象是jQuery對象，那么就可以使用jQuery里的方法。例如:
  
  這段代碼等同于：
  

在jQuery對象中無法使用DOM對象的任何方法；同樣，DOM對象也不能使用jQuery里的方法。

1.4.2 jQuery對象和DOM對象的互相轉(zhuǎn)換

在討論jQuery對象和DOM對象的相互轉(zhuǎn)換之前，先約定好定義變量的風(fēng)格。如果獲取的對象是JQuery對象，那么在變量前面加$，例如:

var $variable = jQuery對象;

var variable = DOM對象;

jQuery對象轉(zhuǎn)換成DOM對象
jQuery提供了兩種方法將一個jQuery對象轉(zhuǎn)換成DOM對象，即[index]和get(index).
（1）jQuery對象是一個數(shù)組對象，可以通過[index]的方法得到相應(yīng)的DOM對象。
jQuery代碼如下:

var $cr = $("#cr");// jQuery對象

var cr = $cr.get(0);//DOM對象

alert(cr.checked);//檢測這個checkbox是否被選中了

（2）DOM對象轉(zhuǎn)換成jQuery對象
對于一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。
jQuery代碼如下：

var cr = document.getElementById("cr");//DOM對象

var $cr = $(cr);//jQuery對象

Note:
平時用到的jQuery對象都是通過$()函數(shù)制造出來的，$()函數(shù)就是一個jQuery對象的制造工廠。

1.5 解決jQuery和其他庫的沖突

• 1.jQuery庫在其他庫之后導(dǎo)入
  在其他庫和jQuery庫都被加載完畢后，可以在任何時候調(diào)用jQuery.noConflict()函數(shù)來將變量$的控制權(quán)移交給其他JavaScript庫。示例如下:
  

或者，可以自定義一個快捷方式：

如果不想給jQuery自定義這些備用名稱，還想使用$而不管其他庫的$()方法，同時又不想與其他庫相沖突，那么可以使用以下兩種解決方法。
其一：

其二：

這應(yīng)該是最理想的方式，因為可以通過改變最少的代碼來實現(xiàn)全面的兼容性；

• 2.jQuery庫在其它庫之前導(dǎo)入
  如果jQuery庫在其他庫之前就導(dǎo)入了，那么可以直接使用“jQuery”來做一些jQuery的工作。同時，可以使用$()方法作為其他庫的快捷方式。這里無需調(diào)用jQuery.noConflict()函數(shù)。示例如下:
  

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

總結(jié)

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

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