JQuery官方学习资料(译):JQuery对象

时间:2024-01-09 16:29:02
    每当创建一个新的元素(或者选择一个已经存在的元素)时,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()方法或数组下标的方式来获取元素。