DOM和DOM元素

DOM是html文件的表現(xiàn)層，它包含了很多DOM元素，宏觀上來講，DOM元素可以被認為是web頁面的一個片段。DOM的形式有類型如<div>, <a>, 或者 <p>,還有許多屬性如：src, href, class 等等。

元素的屬性類似于js的object。屬性是js和頁面交換的唯一途徑。

Jquery對象

Jquery對象的優(yōu)點包括：

兼容性---跨瀏覽器和瀏覽器版本。例如：

var target = document.getElementById("target"); target.innerHTML = "<td>Hello <b>World</b>!</td>";

上述的功能是把<tr>元素的內(nèi)部html保存到target變量中，對大部分情況下，上述語句是奏效的，但對IE瀏覽器的大部分版本會失敗。

通過使用jquery對象封裝的targe對象就不會存在這個問題：

// Setting the inner HTML with jQuery var target = document.getElementById("target"); $( target ).html("<td>Hello <b>World</b>!</td>");

?

便利性—示例如下：

原生js如下：

// Inserting a new element after another with the native DOM API var target = document.getElementById("target"); var newElement = document.createElement("div"); target.parentNode.insertBefore( target.nextSibling, newElement )

?

使用jquery封裝對象后：

// Inserting a new element after another with jQuery var target = document.getElementById("target"); var newElement = document.createElement("div"); $( target ).after( newElement );

通過jquery對象獲取DOM元素

示例如下:

第一步：

// Selecting all 'h1' tags var headers = $("h1");

第二步：

// Viewing the number of 'h1' tags on the page var allHeaders = $("h1"); alert( allHeaders.length );

第三步：

// Selecting only the first 'h1' element on the page (in a jQuery object) var headers = $("h1"); var firstHeader = headers.eq( 0 );

小結：

?

// Selecting only the first 'h1' element on the page var firstHeaderElem = $("h1").get( 0 );或者 var firstHeaderElem = $("h1")[ 0 ];

?

DOM對象和jquery對象的比較

Jquery對象比較：

// Creating two jQuery objects for the same element var logo1 = $("#logo"); var logo2 = $("#logo"); // Comparing jQuery objects alert( $("#logo") === $("#logo") ); // alerts 'false'

dom對象比較：

// Comparing DOM elements var logo1 = $("$logo"); var logo1Elem = logo1.get( 0 ); var logo2 = $("#logo"); var logo2Elem = logo2.get( 0 ); alert( logo1Elem === logo2Elem ); // alerts 'true'

簡潔的寫法：

// Comparing DOM elements (with more readable variable names) var $logo1 = $("#logo"); var logo1 = $logo1.get( 0 ); var $logo2 = $("#logo"); var logo2 = $logo2.get( 0 ); alert( logo1 === logo2 ); // alerts 'true'

jquery對象不會自動更新

// Selecting all 'p' elements on the page var allParagraphs = $("p");

手動更新：

// Updating the selection allParagraphs = $("p");

小結

Jquery封裝了native dom，讓開發(fā)者可以忽略瀏覽器兼容性，并且使用更簡潔。

可以通過.get()方法或者數(shù)組來獲取dom對象。

轉(zhuǎn)載于:https://www.cnblogs.com/davidwang456/archive/2013/04/18/3029642.html

總結

以上是生活随笔為你收集整理的jquery学习手记（5）对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。