亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery對象與DOM對象

前言

編寫任何 JavaScript 程序我們要首先獲得對象,jQuery 選擇器能徹底改變我們平時獲取對象的方式,可以獲取幾乎任何語義的對象,比如“擁有 title 屬性并且值中包含 test 的元素”,完成這些工作只需要編寫一個 jQuery 選擇器字符串,學(xué)習(xí) jQuery 選擇器是學(xué)習(xí) jQuery 最重要的一步。

Dom 對象和 jQuery 包裝集

無論是在寫程序還是看 API 文檔,我們要時刻注意區(qū)分 Dom 對象和 jQuery 包裝集。

1. Dom 對象

在傳統(tǒng)的 JavaScript 開發(fā)中,我們都是首先獲取 Dom 對象,比如:

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

我們經(jīng)常使用document.getElementById方法根據(jù) id 獲取單個 Dom 對象,或者使用document.getElementsByTagName方法根據(jù) HTML 標(biāo)簽名獲取 Dom 對象集合。

另外在事件函數(shù)中,可以通過在方法函數(shù)中使用this引用事件觸發(fā)對象(但是在多播事件函數(shù)中 IE6 存在問題),或者使用event對象的target(Firefox)或srcElement(IE6)獲取到引發(fā)事件的 Dom 對象。

注意我們這里獲取到的都是 Dom 對象,Dom 對象也有不同的類型比如input,div,span等。Dom 對象只有有限的屬性和方法。

2. jQuery 包裝集

jQuery 包裝集可以說是 Dom 對象的擴(kuò)充。在 jQuery 的世界中將所有的對象,無論是一個還是一組,都封裝成一個 jQuery 包裝集,比如獲取包含一個元素的 jQuery 包裝集:

var jQueryObject = $("#testDiv");

jQuery 包裝集都是作為一個對象一起調(diào)用的。jQuery 包裝集擁有豐富的屬性和方法。

3. Dom 對象與 jQuery 對象的轉(zhuǎn)換

(1)Dom 轉(zhuǎn) jQuery 包裝集

如果要使用 jQuery 提供的函數(shù),就要首先構(gòu)造 jQuery 包裝集。我們可以使用本文即將介紹的 jQuery 選擇器直接構(gòu)造 jQuery 包裝集,比如:

$("#testDiv");

上面語句構(gòu)造的包裝集只含有一個 id 是 testDiv 的元素。

或者我們已經(jīng)獲取了一個 Dom 元素,比如:

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

上面的代碼中 div 是一個 Dom 元素, 我們可以將 Dom 元素轉(zhuǎn)換成 jQuery 包裝集:

var domToJQueryObject = $(div);

(2)jQuery 包裝集轉(zhuǎn) Dom 對象

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

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

注意, 通過索引器返回的不再是 jQuery 包裝集, 而是一個 Dom 對象!

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

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

如果我們要使用 jQuery 的方法操作 Dom 對象,怎么辦? 用上面介紹過的轉(zhuǎn)換方法即可:

$("#testDiv").each(function() {
  $(this).html("修改內(nèi)容")
});

小結(jié): 先讓大家明確 Dom 對象和 jQuery 包裝集的概念,將極大的加快我們的學(xué)習(xí)速度。只要能夠區(qū)分這兩者, 就能夠在寫程序時變得清清楚楚。

Weiter lernen
||
<!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中內(nèi)容改變 p.innerHTML = 'P1:php中文網(wǎng)是您自學(xué)php的正確途徑'; // 將元素p的內(nèi)容顏色改為紅色 p.style.color = 'red'; } </script> <!-- 使用jQuery語法 --> <script type="text/javascript"> $(document).ready(function() { /** * 通過jQuery語法獲取id為php2的元素獲得一個jQuery對象 * 調(diào)用該對象的html()方法進(jìn)行更改內(nèi)容 * 調(diào)用該對象的css()方法進(jìn)行更改顏色樣式 */ var $p = $('#php2'); $p.html('P2:php中文網(wǎng)是您自學(xué)php的正確途徑').css('color','red'); }); </script> </head> <body> <p id="php1"></p> <p id="php2"></p> </body> </html>
einreichenCode zurücksetzen