標籤：jquery dom
初學jQuery時,經常分辨不清楚哪些是jQuery對象,哪些是DOM對象。這是十分不好的現象。必須明確區分何為jQuery對象、何為DOM對象,對於後續的學習、理解才更方便。
先從DOM對象開始,之後在談談jQuery對象(jq對象基於DOM對象)。
DOM、DOM對象DOM(Document Object Model,文件物件模型),DOM是W3C的標準。定義了訪問HTML和XML文檔的標準。
文件物件模型是中立於平台和語言的介面,允許程式和指令碼動態訪問和更新文檔的內容、結構以及樣式,更具體來說就是我們可以通過js、jQuery代碼動態更新某個html元素的樣式、屬性等。
W3C DOM標準分為3部分:
核心DOM-針對任何結構化文檔的標準模型。
XML DOM-針對XML文檔的標準模型。
HTML DOM-針對HTML文檔的標準模型。
這裡我們關注的是HTML DOM以及其是如何擷取、修改、添加或刪除html元素(DOM對象)的。
DOM節點根據W3C的HTML DOM標準,HTML文檔中的所有內容都是節點:
1、整個文檔是一個文檔節點
2、每個HTML元素是一個元素節點
3、每個HTML 屬性是一個屬性節點
4、注釋是注釋節點
HTML DOM節點樹HTML DOM將HTML文檔視作樹結構。這種結構成為節點樹:
一個執行個體：
關於DOM的介紹就這麼多了,詳細瞭解的話可查閱W3CSCHOOL手冊。
DOM對象簡單的來說通過JavaScript中的getElementsByTagName或者getElementById來擷取元素節點,得到的DOM元素就是DOM對象。DOM對象可以使用JavaScript中的方法,簡單一實例:
var obj = document.getElementById("id");//擷取DOM對象var ObjHTML = obj.innerHTML; //使用js方法
jQuery對象
jQuery對象就是通過jQuery封裝DOM對象所產生的對象。
需注意的是jQuery對象是jQuery專屬的。如果一個對象是jQuery對象,那麼就可以使用jQuery裡的方法。
一個簡單的例子:
$("#foo").html(); //擷取id為foo的元素內的html代碼.html()為jQuery裡的方法
該代碼等價於:
document.getElementById("id").innerHTML
相互轉換
核心提示:jQuery選取器得到的jquery對象和標準的DOM對象是兩種不同的對象,jquery對象不能使用DOM對象的屬性方法。同樣的DOM對象也不能使用jquery對象的方法、屬性。
不過前面瞭解到,jquery對象本來就是DOM對象封裝而來的,那麼兩者肯定是能夠進行轉換的。
在討論jQuery對象和DOM對象的相互轉換之前,先約定好定義變數的風格。jquery對象在前面加上$，例如:
var $test = jQuery 對象; //jquery變數var test = DOM 對象; //dom變數jQuery對象->DOM對象
jQuery對象是不能使用DOM中的方法的,但是如果對jQuery對象的方法不熟悉,或者jQuery對象沒有封裝想要的方法,不得不使用DOM對象的時候,可以通過以下兩種方式將jQuery對象轉換為DOM對象。
(1) jQuery對象是一個數組對象,可以通過[index]得到相應的DOM對象。
var $vars = $("#vars"); //jQuery對象var test = $vars[0]; //DOM對象console.info(test.checked); //檢查該對象是否選中
(2) 通過jQuery本身提供的get(index)方法返回DOM對象。
var $vars = $("#vars"); //jQuery對象var test = $vars.get(0); //DOM對象console.info(test.checked); //檢查該對象是否選中
DOM對象->jQuery對象
對於一個DOM對象,只需要用$()將DOM對象封裝起來就可以轉換為jQuery對象了。
var cr = document.getElementById("id"); //DOM對象var $cr = $(cr); //jQuery對象
轉換後,可以任意使用jQuery中的方法。
通過以上方法可以實現DOM對象和jQuery對象的相互轉換,但是一般情況下jQuery對象提供了一套更加完善的工具用於操作DOM,因此優選使用jQuery對象操作DOM是一個不錯的選擇。
樣本<html><head> <title>jQuery對象和DOM對象</title> <script src="js/jquery-1.9.1.js"></script> <style type="text/css"> body { text-align: center; } </style> <script>/*使用原生js代碼判斷複選框是否被選中*/$(function(){var $cr=$("#cr");var cr = $cr.get(0);$cr.on('click',function(){if(cr.checked){console.info("感謝您的支援,你可以繼續操作!");}});});/*使用jQuery的方式判斷複選框是否被選中*/$(function(){ var $cr = $("#cr");$cr.on('click',function(){if($cr.is(":checked")){alert("通過jQuery方式選中");}});}); </script></head><body> <input type="checkbox" id="cr"/> <label for="cr">我同意該服務條款</label></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
