jQuery對象與DOM對象LOGIN

jQuery對象與DOM對象

前言

編寫任何JavaScript 程式我們要先取得對象,jQuery 選擇器能徹底改變我們平常取得物件的方式,可以取得幾乎任何語意的對象,例如「擁有title 屬性並且值中包含test 的<a>元素”,完成這些工作只需要編寫一個jQuery 選擇器字串,學習jQuery 選擇器是學習jQuery 最重要的一步。

Dom 物件和 jQuery 包裝集

無論是在寫入程式還是看 API 文檔,我們要隨時注意區分 Dom 物件和 jQuery 包裝集。

1. Dom 物件

在傳統的JavaScript 開發中,我們都是先取得Dom 對象,例如:

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

我們經常使用document .getElementById方法根據id 取得單一Dom 對象,或使用document.getElementsByTagName方法根據HTML 標籤名取得Dom 物件集合。

另外在事件函數中,可以透過在方法函數中使用this引用事件觸發物件(但在多重播放事件函數中IE6 有問題),或是使用event物件的target(Firefox)或srcElement(IE6 )取得到引發事件的Dom 物件。

注意我們這裡取得到的都是 Dom 物件,Dom 物件也有不同的型別例如input,div,span等。 Dom 物件只有有限的屬性和方法。

2. jQuery 包裝集

#jQuery 包裝集可以說是 Dom 物件的擴充。在jQuery 的世界中將所有的對象,無論是一個還是一組,都封裝成一個jQuery 包裝集,例如取得包含一個元素的jQuery 包裝集:

var jQueryObject = $("#testDiv");

jQuery 包裝集都是作為一個對象一起調用的。 jQuery 包裝集擁有豐富的屬性與方法。

3. Dom 物件與 jQuery 物件的轉換

(1)Dom 轉 jQuery 包裝集

#

如果要使用 jQuery 提供的函數,就要先建構 jQuery 包裝集。我們可以使用本文即將介紹的 jQuery 選擇器直接建構 jQuery 包裝集,例如:

$("#testDiv");

上面語句建構的包裝集只含有一個 id 是 testDiv 的元素。

或我們已經取得了一個Dom 元素,例如:

var div = document.getElementById("testDiv");

上面的程式碼中div 是一個Dom 元素, 我們可以將Dom 元素轉換成jQuery 包裝集:

var domToJQueryObject = $(div);

(2)jQuery 包裝集轉Dom 物件

jQuery 包裝集是一個集合, 所以我們可以透過索引器存取其中的某一個元素:

var domObject = $("#testDiv")[0];

注意, 透過索引器傳回的不再是jQuery 包裝集, 而是一個Dom 物件!

jQuery 包裝集的某些遍歷方法,例如each()中, 可以傳遞遍歷函數, 在遍歷函數中的this 也是Dom 元素,例如:

$("#testDiv").each(function() {
  alert(this)
});

如果我們要使用jQuery 的方法操作Dom 物件,怎麼辦? 用上面介紹過的轉換方法即可:

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

小結: 先讓大家明確Dom 物件和jQuery 包裝集的概念,將極大的加快我們的學習速度。只要能夠區分這兩者, 就能夠在寫程序時變得清清楚楚。

下一節
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 使用JS原生语法 --> <script type="text/javascript"> window.onload = function(){ // 通过原生JS语法获取id为php1的元素p var p = document.getElementById('php1'); // 将元素p在html中内容改变 p.innerHTML = 'P1:php中文网是您自学php的正确途径'; // 将元素p的内容颜色改为红色 p.style.color = 'red'; } </script> <!-- 使用jQuery语法 --> <script type="text/javascript"> $(document).ready(function() { /** * 通过jQuery语法获取id为php2的元素获得一个jQuery对象 * 调用该对象的html()方法进行更改内容 * 调用该对象的css()方法进行更改颜色样式 */ var $p = $('#php2'); $p.html('P2:php中文网是您自学php的正确途径').css('color','red'); }); </script> </head> <body> <p id="php1"></p> <p id="php2"></p> </body> </html>
章節課件