每当创建一个新的元素(或者选择一个已经存在的元素)时,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 )
|
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" );
|
// 查看当前页面<h1>标签的数量
var allHeadings = $( "h1" );
alert( allHeadings.length );
|
如果我们想要的是多个元素中的第一个元素,那么我们有多种方法可以实现这一要求,例如使用.eq()方法。
// 选择第一个元素
var headings = $( "h1" );
var firstHeading = headings.eq( 0 );
|
// 选择第一个元素
var firstHeadingElem = $( "h1" ).get( 0 );
|
// 选择第一个元素
var firstHeadingElem = $( "h1" )[ 0 ];
|
- JQuery对象不是按照===方式创建的
需要注意的是每一个JQuery包裹的对象都是唯一的,即使对象是用相同的选择器创建或者引用相同的DOM元素。
// 创建两个JQuery对象拥有相同的元素。
var logo1 = $( "#logo" );
var logo2 = $( "#logo" );
|
// 比较2个对象
alert( $( "#logo" ) === $( "#logo" ) ); // false
|
// 比较DOM元素
var logo1 = $( "$logo" );
var logo1Elem = logo1.get( 0 );
var logo2 = $( "#logo" );
var logo2Elem = logo2.get( 0 );
alert( logo1Elem === logo2Elem ); // true
|
- JQuery对象不是“活”的
通过JQuery获取页面上所有的段落元素。
// 获取页面上所有的<p>元素
var allParagraphs = $( "p" );
|
// 更新选择器
allParagraphs = $( "p" );
|
- 包装
虽然DOM提供的所有功能,可以创建出我们需要的交互式网页,但那样很麻烦。使用JQuery对象包装的元素就非常的容易。当使用JQuery来创建和选择元素时,元素都将被包装在一个新的JQuery对象中。如果需要使用本地DOM元素,可以使用.get()方法或数组下标的方式来获取元素。