標籤:blog 構建 mod 物件模型 put 提交 title 文件物件模型 family
DOM對象與jQuery對象簡介
很多人初學者會分不清楚這兩者的關係,在我剛學jQuery的時候也是這樣。
1、DOM對象
DOM(Document Object Model,文件物件模型),每一份DOM都可以表示成一棵樹,下面來構建一個非常基本的網頁,網頁代碼如下所示:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h3>例子</h3> <p title="選擇你最喜歡的水果.">你最喜歡的水果是?</p> <ul> <li>蘋果</li> <li>橘子</li> <li>香蕉</li> </ul></body></html>
我們就可以把上面的HTML結構描述成一顆DOM樹
在這顆DOM樹中,<h3>,<p>,<ul>以及<ul>的3個<li>子節點都是DOM元素節點。可以通過JavaScript中的getElementsByTagName或者getElementById來擷取元素節點。像這樣得到的DOM元素就是DOM對象。DOM對象可以使用JavaScript中的方法:
var domObj = document.getElemntById("id"); //擷取DOM對象var ObjHTML = domObj.innerHTML; //使用JavaScript中的屬性----innerHTML
2、jQuery對象
jQuery對象就是通過jQuery封裝DOM對象後產生的對象。
jQuery對象時jQuery專屬的。如果一個對象是jQuery對象,那麼久可以使用jQuery裡的方法:
$("#foo").html(); //擷取id為foo的元素內的html代碼。.html()是jQuery裡的方法
這段代碼等同於:
document.getElementById("foo").innnerHTML;
在jQuery對象中無法使用DOM對象的任何方法,同樣在DOM對象中也是不允許使用jQuery對象的任何方法的。
jQuery對象和DOM對象的相互轉換
在討論jQuery對象和DOM對象的相互轉化之前,先約定好定義變數的風格。如果擷取的對象是jQuery對象,那麼在變數前面加上 $,如下:
var $variable = jQuery對象;
如果擷取的是DOM對象,則定義如下:
var variable = DOM對象;
1、jQuery對象轉換成DOM對象
jQuery對象不能使用DOM中的方法,但如果對jQuery對象所提供的方法不熟悉,或者jQuery沒有封裝想要的方法,不能不使用DOM對象的時候,有以下兩種處理方法。
jQuery提供了兩種方法將一個jQuery對象轉換成DOM對象,即[index]和get(index)。
(1)jQuery對象是一個類似數組的對象,可以通過[index]的方法得到相應的DOM對象。
jQuery代碼如下:
var $cr = $("#cr"); //jQuery對象var cr = $cr[0]; //DOM對象alert(cr.checked) //檢測這個checkbox是否被選中了
(2)另一種方法是jQuery本身提供的,通過get(index)方法得到相應的DOM對象。
jQuery代碼如下:
var $cr = $("#cr"); //jQuery對象var cr = $cr.get(0); //DOM對象alert(cr.checked) //檢測這個checkbox是否被選中了
2、DOM對象轉換成jQuery對象
對於一個DOM對象,只需要用$()把DOM對象封裝起來,就可以擷取一個jQuery對象了。方式為$(DOM對象)。
jQuery代碼如下:
var cr = document.getElementById("cr"); //DOM對象var $cr = $(cr); //jQuery對象
執行個體示範
在很多網站的註冊頁面,需要勾選"同意以上內容"的複選框才能提交註冊資訊,是如何做到的呢?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script></head><body> <input type="checkbox" id="cr"/><label>我已經閱讀以上內容</label> <script> $(document).ready(function () { var $cr = $("#cr"); var cr = $cr[0]; $cr.click(function () { if(cr.checked){ alert(‘謝謝支援!‘) } }) }); </script></body></html>
DOM方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script></head><body> <input type="checkbox" id="cr"/><label>我已經閱讀以上內容</label> <script> $(document).ready(function () { var $cr = $("#cr"); $cr.click(function () { if($cr.is(":checked")){ alert(‘謝謝支援!‘) } }) }) </script></body></html>
jQuery方式
jQuery對象與DOM對象