jquery学习手记（5）对象

DOM和DOM元素

DOM是html文件的表现层，它包含了很多DOM元素，宏观上来讲，DOM元素可以被认为是web页面的一个片段。DOM的形式有类型如<div>, <a>, 或者 <p>,还有许多属性如：src, href, class 等等。

元素的属性类似于js的object。属性是js和页面交换的唯一途径。

Jquery对象

Jquery对象的优点包括：

兼容性---跨浏览器和浏览器版本。例如：

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

上述的功能是把<tr>元素的内部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，让开发者可以忽略浏览器兼容性，并且使用更简洁。

可以通过.get()方法或者数组来获取dom对象。