pgm官网

書名： jQuery EasyUI從零開始學
作者名：施堯
本章字數： 1057字
更新時間： 2019-12-06 14:09:03

3.1　DOM與事件對象

本節將介紹DOM與事件對象的使用方法。DOM可以用來動態地改變元素的位置，事件對象則提供了元素在觸發了某個事件時的一些參數。本節內容是實現拖放的基礎，讀者應重點掌握。

3.1.1　DOM

DOM（Document Object Model，文檔對象模型）是針對HTML和XML提供的一個API。DOM的主要目的是為了能以編程的方法操作HTML的內容（比如添加某些元素、修改元素的內容、刪除某些元素）。我們先來看一段簡單的HTML代碼：

01  <html>
02       <header>
03           <title>DOM示例</title>
04       </header>
05       <body>
06           <div id="element">
07                <a href="#">超鏈接</a>
08            </div>
09            <p>一段文字</p>
10       </body>
11  </html>

當瀏覽器將HTML代碼加載完畢后，DOM將HTML文檔表達為樹結構，如圖3.1所示。

圖3.1　DOM樹結構

讀者可以發現DOM其實只是HTML文檔的不同表現形式而已，讀者可以簡單理解為DOM對象就是它所代表的HTML元素，它將HTML文檔中的元素以樹形結構解析成一個個的對象，并為其提供了一系列的操作方法，通過這些方法我們可以動態地改變HTML文檔的結構，這個特征正是實現拖動效果的基礎。

通過圖3.1我們可以發現，這個DOM樹中有body元素對象、div元素對象等，那么我們該如何選擇這些對象呢？第一種方法是通過JavaScript的方法直接選擇HTML元素的DOM對象，例如：

var element  = document.getElementById("element");

這段代碼的含義是選擇id為element元素的DOM對象，其代表的是HTML代碼中的<div>標記。使用JavaScript操作DOM對象十分煩瑣，因此有人開發出jQuery框架，jQuery通過選擇器的方式選擇指定元素，并將其轉換成jQuery對象，例如：

var $element = $("#element");

提示

jQuery對象并非DOM對象，它們的轉換關系如下：

01 $element = $(element);//DOM對象轉換成jQuery對象
02 element = $element[0];//jQuery對象轉換成DOM對象
03 element = $element.get(0);//jQuery對象轉換成DOM對象

下面我們使用jQuery來動態改變HTML的結構，我們將圖3.1中的p元素刪除，并將其添加到div元素中，代碼如下：

01       $(function(){
02           $p = $("p");//選擇p標記
03           $p.remove();//刪除p標記
04           $div = $("#element");//選擇div標記
05           $div.append($p[0]);//在div標記中添加p標記，append方法接收的是一個DOM對
06  象，因此我們需要將p元素的jQuery對象轉換成對應的DOM對象
07       });

提示

$(function(){//內容});函數的意思是當文檔加載完畢后處理的程序，在DOM樹結構生成完畢后觸發。如果不使用該方法，我們可能無法選擇指定的元素，因為此時元素還未全部加載完畢。

此時文檔的DOM樹結構發生改變，如圖3.2所示。

圖3.2　改變后的DOM樹結構

3.1.2　事件對象

在觸發事件的函數里面我們會接收到一個event對象，在本書中使用參數e表示。我們可以通過event的屬性target來獲取需要的一些參數，例如此事件作用到哪個元素身上了。如果想阻止瀏覽器的默認事件行為，那么可以通過方法preventDefault()來進行阻止。

事件對象的屬性非常多，如果讀者想要了解事件對象的詳細使用方法，可以查閱相關資料或者使用2.1.2節中提供的writeObj方法打印指定事件對象的內容。下面將詳細講解事件對象中的data屬性，該屬性返回綁定事件時傳入的附加數據，其本身也是一個對象。在拖放事件中該data對象的屬性見表3.1。

表3.1　data對象主要屬性

官术网_书友最值得收藏!

jQuery EasyUI從零開始學

3.1 DOM與事件對象

3.1.1 DOM

3.1.2 事件對象

3.1　DOM與事件對象

3.1.1　DOM

3.1.2　事件對象