jQuery - 使用要点 - jQuery对象

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013275171/article/details/85314560

jQuery对象

DOM & DOM Elements

文档对象模型(Document Object Model)是HTML文档的代理。最高层级的DOM元素，可以被想做网页块。

jQuery对象

兼容性：

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

上述的操纵方式大部分情况下，工作正常，例外的是在许多版本的Internet Explorer中会失败。解决方式是将target元素，封装入jQuery对象中。

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

便利性：避免冗长的DOM方法

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

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

取得jQuery对象中的元素

使用CSS选择器调用jQuery函数时，该函数会返回包含该选择器匹配的元素的jQuery对象。

// 选择所有<h1>标签
var headings = $( "h1" );

alert( headings.length ); // 通过.length属性，来确认是否正确选择到元素

var firstHeading = headings.eq( 0 );

var firstHeadingElem = $( "h1" ).get( 0 );
// 另一种方式
var firstHeadingElem = $( "h1" )[ 0 ];
/*
firstHeadingElem 只包含原生的DOM元素
不会包含jQuery方法，如：.html() .after()
*/

每个jQuery包装对象都是唯一的

var logo1 = $( "#logo" );
var logo2 = $( "#logo" );

// 比较两个jQuery对象
alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"

然而，上述的被创建对象包含相同的DOM元素。使用.get()方法来侦测上述两个对象是否包含相同的DOM元素。

// 比较DOM元素
 
var logo1 = $( "#logo" );
var logo1Elem = logo1.get( 0 );
 
var logo2 = $( "#logo" );
var logo2Elem = logo2.get( 0 );
 
alert( logo1Elem === logo2Elem ); // alerts "true"

许多开发人员在表示jQuery对象的变量名称前缀$，用以区别其他变量。

// 比较 DOM 元素 (使用更易读的变量名称)
 
var $logo1 = $( "#logo" );
var logo1 = $logo1.get( 0 );
 
var $logo2 = $( "#logo" );
var logo2 = $logo2.get( 0 );
 
alert( logo1 === logo2 ); // alerts "true"

jQuery对象不是“活的”

先前取得的jQuery对象，不会随着页面的变更，而自动更新自己。

// 选择页面上所有 <p> 元素
 
var allParagraphs = $( "p" );

// 若页面在选取元素之后改变，需要重新取得一边，以获得变更之后的值
// 更新选择集
allParagraphs = $( "p" );