当创建新元素(或者选择当前已有的元素)的时候,jQuery返回在包装集中的元素。很多新的jQuery的开发者假设这个包装集是一个数组。它有一个DOM元素从0开始的索引序列,有一些常见的数组函数,和.length
属性,等等。实际上,jQuery对象比这些要复杂得多。
文档对象模型(简写为DOM)是一个HTML文档的表示法。它可以包含任意数量的DOM元素。在高级别,一个DOM元素可以被认为是一个网页中的一个“块”。它可以包含文本和/或者其他DOM元素。DOM元素是类型的描述,比如
,和大量的属性比如 src
, href
, class
等等。更详细的描述,参见来自W3C官方DOM规范。
事实证明,直接操作DOM元素是非常笨拙的。jQuery对象定义很多方法为开发者消除这些体验。jQuery对象的好处包括:
兼容性 – 元素方法实现了跨浏览器厂商及版本。下面的片断试图设置元素的HTML并存储在target
中:
var target = document.getElementById( target );
target.innerHTML = Hello World!;
//用jQuery设置内部HTML
var target = document.getElementById( target );
$( target ).html( Hello World! );
便利性 – 也有很多常用的DOM操作的应用案例完全用纯DOM方法很笨拙。例如,插入一个元素在target
元素之后,存储于newElement
中,需要相当冗长的DOM方法:
//在另一个元素后用原生的DOM API插入一个新的原素
var target = document.getElementById( target );
var newElement = document.createElement( div );
target.parentNode.insertBefore( newElement, target.nextSibling );
将target
元素封装于一个jQuery对象,同样的任务会变得简单很多:
//用jQuery在另一个元素后插入一个新元素。
var target = document.getElementById( target );
var newElement = document.createElement( div );
$( target ).after( newElement );
在大多数情况下,这些细节是站在你和你的目标之间的简单“陷阱”。
当jQuery函数被一个CSS选择器调用的时候,它会返回一个封装了匹配这个选择器的一些元素的jQuery对象。比如说,写:
//选择所有的
标签。 var headings = $( h1 );
headings
的 .length
属性来验证。
//查看页面中
标签的数量。 var headings = $( h1 ); alert( headings.length );
.length
属性会是零。检测.length
属性是一种确定选择器成功匹配一个或多个元素的常用的方法。
如果目标是仅仅选择第一个头元素,需要另一个步骤。有很多方法可以完成这项工作,但最直接的方式是.eq()
函数。
//只选择页面中的第一个
元素(在jQuery对象中) var headings = $( h1 ); var firstHeading = headings.eq( 0 );
firstHeading
是一个jQuery对象,它有许多类似 .html()
和 .after()
这样的有用的方法。jQuery也有一个方法被叫做.get()
,它提供了一个关联函数。不是返回一个jQuery封装的DOM元素,而是返回DOM元素本身。
// 仅选择页面中的第一个
元素。 var firstHeadingElem = $( h1 ).get( 0 );
还有另一种选择,因为jQuery对象是“类似数组”,它通过中括号支持数组下标:
//仅选择页面中第一个
元素(可供选择的方法)。 var firstHeadingElem = $( h1 )[ 0 ];
===
(绝对相等)一个非常重要的细节关于”封装”行为每一个封装的对象是独一无二的。这是真的即使对像是用同一个选择器创建的或包含的引用是确定相同的DOM元素。
// 用相同的元素创建两个jQuery对象。
var logo1 = $( #logo );
var logo2 = $( #logo );
虽然logo1
和 logo2
用相同方法创建(封装了相同的DOM元素),它们不是相同的对象。例如:
//比较jQuery对象
alert( $( #logo ) === $( #logo ) ); // alerts false
虽然两个对象包含同样的DOM元素。.get()
方法可用来测试两个jQuery对象是否有相同的DOM元素的。
// 比较DOM元素。
var logo1 = $( #logo );
var logo1Elem = logo1.get( 0 );
var logo2 = $( #logo );
var logo2Elem = logo2.get( 0 );
alert( logo1Elem === logo2Elem ); // alerts true
很多开发者用$
做为包含jQuery对象的变量名的前缀来帮助区分(于一般JS变量)。这个实践并不神奇——它仅仅是帮助人们记录变量包含的(对象)有什么不同。上面的示例能用下面的约定重新来写:
// 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
// 选择页面中所有的
元素。 var allParagraphs = $( p );
// Updating the selection.
allParagraphs = $( p );