每当创建一个新的元素（或者选择一个已经存在的元素）时，JQuery将返回一个元素的集合。大部分的开发人员新接触JQuery的时候，都把这个集合当做数组。这个集合中的DOM元素有从零开始的索引，这集合也包含了数组常用的方法和length属性，但是JQuery对象是比这更加复杂的。
这里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方法是通过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包裹的对象都是唯一的，即使对象是用相同的选择器创建或者引用相同的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获取页面上所有的段落元素。
// 获取页面上所有的<p>元素
var allParagraphs = $( "p" );
|
所选元素的集合可能会发送变化，增加或者减少。然而JQuery对象所包含的这个元素集合不会自动的随之变化，如果文档发生了变化，那么需要重新创建一个JQuery对象来获取元素。
// 更新选择器
allParagraphs = $( "p" );
|
虽然DOM提供的所有功能，可以创建出我们需要的交互式网页，但那样很麻烦。使用JQuery对象包装的元素就非常的容易。当使用JQuery来创建和选择元素时，元素都将被包装在一个新的JQuery对象中。如果需要使用本地DOM元素，可以使用.get()方法或数组下标的方式来获取元素。