JQuery官方学习资料（译）：JQuery对象

    每当创建一个新的元素（或者选择一个已经存在的元素）时，JQuery将返回一个元素的集合。大部分的开发人员新接触JQuery的时候，都把这个集合当做数组。这个集合中的DOM元素有从零开始的索引，这集合也包含了数组常用的方法和length属性，但是JQuery对象是比这更加复杂的。

 

• DOM和DOM元素

    这里DOM表示的是一个HTML文档，它可能包含了许多的DOM元素，一个元素可以是一个页面内的一片东西，它包含了文本还有其他的DOM元素。也可以是一个单一的DOM元素由类型（标签）、属性等组成的。

    元素包含了许多的属性就像JavaScript对象那样，这些属性是唯一能进行网页交互的方式。

 

• 操作元素

    事实上直接去操作元素是比较困难复杂的，JQuery定义了去多方法可以帮助开发者去更方便的操作元素。

    我们可以使用DOM方法来操作元素。

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

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

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( target.nextSibling, newElement )

    但是由于浏览器兼容性问题，很多时候一些DOM方法会在某些浏览器中失效，这时我们可以使用JQuery的方法来操作元素，不但有效而且操作更加的方便。

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

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

var newElement = document.createElement( "div" );

$( target ).after( newElement );

 

• 获取元素到JQuery对象中

    当JQuery方法是通过CSS的选择被调用的时候，它将返回一个JQuery对象，包含了那些匹配选择器的元素。

// 选择所有的<h1>标签.

var headings = $( "h1" );

    这里的headings是一个JQuery对象包含了这个页面上所有的h1标签，可以通过length属性查看它拥有h1标签的数量。

// 查看当前页面<h1>标签的数量

var allHeadings = $( "h1" );

alert( allHeadings.length );

    如果页面中包含多个h1标签，则length显示的是h1标签的数量，如果页面中没有h1标签，则length为0。通过检查length属性可以确保选择器是否成功匹配了页面上的元素。

    如果我们想要的是多个元素中的第一个元素，那么我们有多种方法可以实现这一要求，例如使用.eq()方法。

// 选择第一个元素

var headings = $( "h1" );

var firstHeading = headings.eq( 0 );

    现在firstHeading是一个JQuery对象包含了页面上第一个h1标签，并且因为它是一个JQuery对象，可以使用JQuery的方法。其中有一个.get()方法，返回的是元素本身，而不是JQuery包裹的元素。

// 选择第一个元素

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

    因为JQuery对像是一个类数组，所以它也支持通过数组下标来获取子项。

// 选择第一个元素

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

    firstHeadingElem包含了本地的DOM元素，这意味着它也包含了DOM元素的属性和方法，不过相比下来JQuery的方法使用起来更加方便。

 

• JQuery对象不是按照===方式创建的

    需要注意的是每一个JQuery包裹的对象都是唯一的，即使对象是用相同的选择器创建或者引用相同的DOM元素。

// 创建两个JQuery对象拥有相同的元素。

var logo1 = $( "#logo" );

var logo2 = $( "#logo" );

    虽然他们按照相同的方式创建，但是他们却是不同的对象。

// 比较2个对象

alert( $( "#logo" ) === $( "#logo" ) ); // false

    无论如何，两个对象包含的是相同的元素，可以通过.get()方法进行比较，两者所包含的元素确实是相同的。

// 比较DOM元素

var logo1 = $( "$logo" );

var logo1Elem = logo1.get( 0 );

var logo2 = $( "#logo" );

var logo2Elem = logo2.get( 0 );

alert( logo1Elem === logo2Elem ); // true

    无论使用怎样的命名约定，非常重要的一点是JQuery对象和DOM元素有很大不同，原生的DOM方法和属性在JQuery对象上是不存在的，反之亦然。

 

• JQuery对象不是“活”的

    通过JQuery获取页面上所有的段落元素。

// 获取页面上所有的<p>元素

var allParagraphs = $( "p" );

    所选元素的集合可能会发送变化，增加或者减少。然而JQuery对象所包含的这个元素集合不会自动的随之变化，如果文档发生了变化，那么需要重新创建一个JQuery对象来获取元素。

// 更新选择器

allParagraphs = $( "p" );

 

• 包装

    虽然DOM提供的所有功能，可以创建出我们需要的交互式网页，但那样很麻烦。使用JQuery对象包装的元素就非常的容易。当使用JQuery来创建和选择元素时，元素都将被包装在一个新的JQuery对象中。如果需要使用本地DOM元素，可以使用.get()方法或数组下标的方式来获取元素。