1.1 JavaScript和JavaScript庫

1.1.1 JavaScript簡介

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

1.2 加入jQuery

1.2.2 jQuery的優勢

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

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

1.3 jQuery代碼的編寫

1.3.2 編寫簡單的jQuery代碼

$(document).ready()

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

1.3.3 jQuery代碼風格

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

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

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

1.4 jQuery對象和DOM對象

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

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

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

1.4.2 jQuery對象和DOM對象的互相轉換

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

var $variable = jQuery對象;

var variable = DOM對象;

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

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

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

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

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

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

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

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

1.5 解決jQuery和其他庫的沖突

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

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

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

其二：

這應該是最理想的方式，因為可以通過改變最少的代碼來實現全面的兼容性；

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

轉載于:https://www.cnblogs.com/myitroad/p/7402162.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。