jQeury入门：jQuery对象

当创建新元素（或者选择当前已有的元素）的时候，jQuery返回在包装集中的元素。很多新的jQuery的开发者假设这个包装集是一个数组。它有一个DOM元素从0开始的索引序列，有一些常见的数组函数，和

.length

属性，等等。实际上，jQuery对象比这些要复杂得多。

DOM 和 DOM元素

文档对象模型（简写为DOM）是一个HTML文档的表示法。它可以包含任意数量的DOM元素。在高级别，一个DOM元素可以被认为是一个网页中的一个“块”。它可以包含文本和/或者其他DOM元素。DOM元素是类型的描述，比如

<div>

,

<a>

, 或者

<p>

，和大量的属性比如

src

,

href

,

class

等等。更详细的描述，参见来自W3C官方DOM规范。

元素如一些JavaScrip对象一样具备属性(properties)。在这些属性(properties)中有类似

.tagName

的属性（attributes）和类似

.appendChild()

的方法。这些属性(properties)是经由JavaScript影响页面的必由之路。

jQuery对象

事实证明，直接操作DOM元素是非常笨拙的。jQuery对象定义很多方法为开发者消除这些体验。jQuery对象的好处包括：

兼容性 – 元素方法实现了跨浏览器厂商及版本。下面的片断试图设置

<tr>

元素的HTML并存储在

target

中：

var target = document.getElementById( "target" );

target.innerHTML = "<td>Hello <b>World</b>!</td>";

这个在大部分情况下可以运行，但在IE的很多版本中会失败。在这种情况下，推荐的方法会替代纯的DOM方法。如果把

target

元素封装在一个jQuery对象中，这些边缘的情况都会被考虑到，并且会在所有的浏览器中获取预期的结果。

//用jQuery设置内部HTML

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );

便利性 – 也有很多常用的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对象

当jQuery函数被一个CSS选择器调用的时候，它会返回一个封装了匹配这个选择器的一些元素的jQuery对象。比如说，写：

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

headings

现在是包含页面中已经装载的所有

<h1>

标签的jQuery元素。这可以通过检查

headings

的

.length

属性来验证。

//查看页面中<h1>标签的数量。

var headings = $( "h1" );

alert( headings.length );

如果页面中

<h1>

标签数量大于一，这个数字也会大于一。如果这个页面没有

<h1>

标签，那

.length

属性会是零。检测

.length

属性是一种确定选择器成功匹配一个或多个元素的常用的方法。

如果目标是仅仅选择第一个头元素，需要另一个步骤。有很多方法可以完成这项工作，但最直接的方式是

.eq()

函数。

//只选择页面中的第一个<h1>元素（在jQuery对象中）

var headings = $( "h1" );

var firstHeading = headings.eq( 0 );

现在，

firstHeading

是一个仅包含页面中第一个

<h1>

元素的jQuery对象。因为

firstHeading

是一个jQuery对象，它有许多类似

.html()

和

.after()

这样的有用的方法。jQuery也有一个方法被叫做

.get()

，它提供了一个关联函数。不是返回一个jQuery封装的DOM元素，而是返回DOM元素本身。

// 仅选择页面中的第一个<h1>元素。

var firstHeadingElem = $( "h1" ).get( 0 );

还有另一种选择，因为jQuery对象是“类似数组”，它通过中括号支持数组下标：

//仅选择页面中第一个<h1>元素（可供选择的方法）。

var firstHeadingElem = $( "h1" )[ 0 ];

无论何种情况，

firstHeadingElem

包含的都是原生的DOM元素。这意味着它拥有类似.

innerHTML

的DOM属性和类似

.appendChild()

的方法，而不是类似

.html()

或

.after()

的jQuery方法。用

firstHeadingElem

元素来工作要困难一些，但也有某些情况下需要它。其中一种情况就是做比较。

并非所有的jQuery对象创建的都

===

（绝对相等）

一个非常重要的细节关于”封装”行为每一个封装的对象是独一无二的。这是真的即使对像是用同一个选择器创建的或包含的引用是确定相同的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"

这段代码的方法和上面的示例是相同的，但可读性会稍好。

无论应用哪种命名约定，区分jQuery对象和原生的DOM元素是非常重要的。原生的DOM方法和属性不能出现在jQuery对象中，反之亦然。错误信息像 “event.target.closest is not a function”和”TypeError: Object [object Object] has no method ‘setAttribute’”都表明出现了这种常见的错误。

jQeury对象不是”活的”

得到一个页面中所有段落元素的jQuery对象：

// 选择页面中所有的<p>元素。

var allParagraphs = $( "p" );

也许有人会认为这段内容会随着

<p>

元素从文档中的增加和删除来增长或缩小。jQuery对象不具备这种方式。被包含在jQuery对象之内的元素集合将不能改变除非明确的修改对象本身。这意味着包装集不是“活的”——当文档更改时它不能自动更新。如果文档在创建jQuery对象后做了更改，应该创建一个新的对象来更新包装集。这与重新运行相同的选择器一样容易：

// Updating the selection.

allParagraphs = $( "p" );

封装起来

虽然DOM元素提供了所有的创建交互页面所需要的方法，但它们工作起来有些麻烦。jQuery对象封装这些元素来平滑这些体验并简化常见任务。当用jQuery创建或选择元素的时候，结果将被封装到一个新的jQuery对象中。如果有需要原生DOM元素的情况，它们可以通过

.get()

方法 与/或 数组式下标来实现。

原文地址