JQuery學習之路(一)———六大功能

一。JQuery通路DOM節點

    1.JQ對象：架構對JS中的DOM對象進行封裝後的對象，讓其擷取方式更加簡單、直覺。

    使用$()方法就可以直接傳回JQ對象，其實質為一個字元串。

var $p = $('#imooc');      

通過$('#imooc')方法會得到一個$p的jQuery對象，$p是一個類數組對象。這個對象裡面包含了DOM對象的資訊，然後封裝了很多操作方法，調用自己的方法html與css，得到的效果與标準的JavaScript處理結果是一緻的。 

     通過标準的JavaScript操作DOM與jQuery操作DOM的對比，我們不難發現：

1. 通過jQuery方法包裝後的對象，是一個類數組對象。它與DOM對象完全不同，唯一相似的是它們都能操作DOM。
2. 通過jQuery處理DOM的操作，可以讓開發者更專注業務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同浏覽器的相容性問題，我們通過jQuery提供的API進行開發，代碼也會更加精短。

2.JQ對象轉換為DOM對象

當使用JQ對象時，需要用到DOM對象的某個方法而JQ對象卻沒有提供對應封裝的方法，就必須進行轉換。

轉換方法：（兩種）  [index] 索引      ，       get(index) 方法

var  jqObj = $("#xdl");

var DOMObj = jqObj.get(0);

var DOMObj = jqObj[0];      

3.DOM對象轉換為JQ對象

var DomObj = document.getElementById('xdl');

var jqObj = $(DomObj);      

**PS: JQ對象和DOM對象是兩個不同的對象。

二。JQ對頁面的處理時間

1.把所有對應的事件按照其名字封裝為JQ對象的方法和屬性。

2.JQ對象可以直接對集合DOM節點綁定事件，集合下的每個單獨節點都會生效。

三。JQ動态控制頁面CSS

1.直接為DOM節點添加CSS樣式

2.使用class類的增添和删除操作來控制頁面的層疊樣式

鍊式操作的補充： 當某個JQ對象調用了自己的牟哥方法後，如果該方法不是通路和操作DOM節點的時候，那麼該方法調用完畢後傳回這個JQ對象本身。

JQ庫操作DOM節點的class屬性： addClass() 為節點添加class類名

                                                     removeClass()為節點溢出class類名

                                                       toggleClass()為記得點切換class類名

4.JQ處理頁面動畫效果