【Jquery系列】詳解Jquery對象和Dom對象

問題描述

本篇文章主要講解Jquery對象和DOM對象，主要圍繞如下五個方面來介紹：

• Jquery對象和dom對象定義
• Jquery對象與dom對象區別
• Jquery對象及運用舉例
• dom對象及運用舉例
• Jquery對象與dom對象相互轉換

1   內容區

 1.1    Jquery對象和dom對象定義

jQuery對象：Jquery對象，通過jq選擇器獲取的對象;

dom對象：javascript對象，即通過js獲取的對象；

 1.2    Jquery對象與dom對象區別

jquery對象指通過jquery選擇器獲取的對象，格式：$(selector)；

dom對象指通過原聲js獲取對象，如document.getElementById()；

1.3     Jquery對象及運用舉例

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

1.4     dom對象及運用舉例

var DomObj = document.getElementById("id"); //dom對象

1.5    Jquery對象與dom對象相互轉換

由於jq對象只能調用jq封裝的方法，dom對象只能調用dom封裝的方法，若想要jq對象和dom對象相互調用彼此封裝的方法，首先必須將對象轉化為要調用方法的對象，再調用，如dom對象想要調用jq方法.html()，則dom對象必須先轉化為jq對象，再調用，否則出錯（jq調用dom也是一樣原理）；

1.5.1  jquery對象轉化為dom對象

jquery提供了兩種方法將一個jquery對象轉換成一個dom對象，即[index]和get(index)。

var JqObj=$("#id"); //jquery對象 
var DomObj = JqObj[0]; //dom對象 

//也可寫成如下
var DomObj=JqObj.get(0); 
alert(DomObj.checked); //是否選中checkbox

1.5.2  dom對象轉換成jquery對象

對於dom對象，用$()把dom對象包裹起來即可，格式為：$(dom對象);

var DomObj=document.getElementById("ElementID"); //dom對象 
var JqObj = $(DomObj); //轉換成jquery對象

2  版權區

• 感謝您的閱讀，若有不足之處，歡迎指教，共同學習、共同進步。
• 博主網址：http://www.cnblogs.com/wangjiming/。
• 極少部分文章利用讀書、參考、引用、抄襲、複製和粘貼等多種方式整合而成的，大部分為原創。
• 如您喜歡，麻煩推薦一下；如您有新想法，歡迎提出，郵箱：[email protected]。
• 可以轉載該博客，但必須著名博客來源。