jQuery核心之jQuery Object及其相关的常用方法

1、jQuery Object 和 原生的DOM对象之间有许多方法是不一样的，用jQuery的方法大部分情况下返回的是jQuery Object，但是jQuery也提供了一些方法可以很轻松的获取原生的DOM对象。

先来看：获取jQuery Object之一，

// Selecting only the first <h1> element on the page (in a jQuery object)

 

var headings = $( "h1" );

 

var firstHeading = headings.eq( 0 );

这里主要是因为headings里面包含有多个jQuery Object，所以用这个方法来获取特定的jQuery Object。

获取DOM 对象：

法1、

// Selecting only the first <h1> element on the page.

 

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

法2、

// Selecting only the first <h1> element on the page (alternate approach).

 

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

通过这两种方法获取的对象是原生DOM 对象，所以它有innerHTML，appendChild，等原生的js方法，但是没有jQuery特有的html()，after()等方法

还得注意：每一个通过选择器获取的jQuery Object是独一无二的，也就是它们之间的===关系总是返回false.

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

但是：用get()方法却可以获取同一个DOM 元素 ，此时它们之间的===关系返回true.

alert( $( "#logo" ).get(0) === $( "#logo" ).get(0) );

为了更好的区分jQuery Object和 native DOM Object 可以把$加在jQuery Object面前来标识它，这样使得代码更加容易阅读

// 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" 

2、遍历

<div class="grandparent">

    <div class="parent">

        <div class="child">

            <span class="subchild"></span>

        </div>

    </div>

    <div class="surrogateParent1"></div>

    <div class="surrogateParent2"></div>

</div> 

parent方法（获取父级元素）：

// Selecting an element‘s direct parent:

 

// returns [ div.child ]

$( "span.subchild" ).parent();

 

// Selecting all the parents of an element that match a given selector:

 

// returns [ div.parent ]

$( "span.subchild" ).parents( "div.parent" );

 

// returns [ div.child, div.parent, div.grandparent ]

$( "span.subchild" ).parents();

 

// Selecting all the parents of an element up to, but *not including* the selector:

 

// returns [ div.child, div.parent ]

$( "span.subchild" ).parentsUntil( "div.grandparent" );

 

// Selecting the closest parent, note that only one parent will be selected

// and that the initial element itself is included in the search:

 

// returns [ div.child ]

$( "span.subchild" ).closest( "div" );

 

// returns [ div.child ] as the selector is also included in the search:

$( "div.child" ).closest( "div" ); 

children方法（获取子孙元素）：

// Selecting an element‘s direct children:

 

// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]

$( "div.grandparent" ).children( "div" );

 

// Finding all elements within a selection that match the selector:

 

// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]

$( "div.grandparent" ).find( "div" ); 

siblings方法（获取同级元素）：

注意元素里面的顺序

// Selecting a next sibling of the selectors:

 

// returns [ div.surrogateParent1 ]

$( "div.parent" ).next();

 

// Selecting a prev sibling of the selectors:

 

// returns [] as No sibling exists before div.parent

$( "div.parent" ).prev();

 

// Selecting all the next siblings of the selector:

 

// returns [ div.surrogateParent1, div.surrogateParent2 ]

$( "div.parent" ).nextAll();

 

// returns [ div.surrogateParent1 ]

$( "div.parent" ).nextAll().first();

 

// returns [ div.surrogateParent2 ]

$( "div.parent" ).nextAll().last();

 

// Selecting all the previous siblings of the selector:

 

// returns [ div.surrogateParent1, div.parent ]

$( "div.surrogateParent2" ).prevAll();

 

// returns [ div.surrogateParent1 ]

$( "div.surrogateParent2" ).prevAll().first();

 

// returns [ div.parent ]

$( "div.surrogateParent2" ).prevAll().last(); 

获取同级（除自己以外）的所有元素

// Selecting an element‘s siblings in both directions that matches the given selector:

 

// returns [ div.surrogateParent1, div.surrogateParent2 ]

$( "div.parent" ).siblings();

 

// returns [ div.parent, div.surrogateParent2 ]

$( "div.surrogateParent1" ).siblings(); 

3、CSS样式及其尺寸：

还有设置css的方法：

$("h1").css("color":"ffffff");

$("h1").css(

{

"background-color":"#6699cc";

}

)

等。

增加删除CSS样式类：

// Working with classes.

 

var h1 = $( "h1" );

 

h1.addClass( "big" );

h1.removeClass( "big" );

h1.toggleClass( "big" );

 

if ( h1.hasClass( "big" ) ) {

    ...

}

addClass() 增加样式类

removeClass() 删除样式类

toggleClass("a") 如果样式类a存在，那么就删除样式类a，如果它不存在，那么就增加样式类a（起到一个样式切换的效果）

尺寸：

// Basic dimensions methods.

 

// Sets the width of all <h1> elements.

$( "h1" ).width( "50px" );

 

// Gets the width of the first <h1> element.

$( "h1" ).width();

 

// Sets the height of all <h1> elements.

$( "h1" ).height( "50px" );

 

// Gets the height of the first <h1> element.

$( "h1" ).height();

 

 

// Returns an object containing position information for

// the first <h1> relative to its "offset (positioned) parent".

$( "h1" ).position(); 

4、数据方法（Data methods）

// Storing and retrieving data related to an element.

 

$( "#myDiv" ).data( "keyName", { foo: "bar" } );

 

$( "#myDiv" ).data( "keyName" ); // Returns { foo: "bar" }

// Storing a relationship between elements using .data()

 

$( "#myList li" ).each(function() {

 

    var li = $( this );

    var div = li.find( "div.content" );

 

    li.data( "contentDiv", div );

 

});

 

// Later, we don‘t have to find the div again;

// we can just read it from the list item‘s data

var firstLi = $( "#myList li:first" );

 

firstLi.data( "contentDiv" ).html( "new content" );

来自为知笔记(Wiz)

jQuery核心之jQuery Object及其相关的常用方法