jQuery對象與DOM對象

來源:互聯網
上載者:User

標籤: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對象

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.