jquery初學與進一步學習2（官網學習），jquery初學

jquery初學與進一步學習2（官網學習），jquery初學
10、遍曆

遍曆分成三塊：parents, children, and siblings（兄弟）

parents:4個方法

    <div class="grandparent">        <div class="parent">            <div class="child">                <span class="subchild"></span>            </div>        </div>        <div class="surrogateParent1"></div>        <div class="surrogateParent2"></div>    </div>

以下幾種方法，需要好好琢磨

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

兩個方法：.children() 和 .find()

// 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，如果後代中p不返回。$( "div.grandparent" ).find( "div" );

Siblings

6個方法： .prev() .prevAll() .prevUntil() .next() .nextAll() .nextUntil() .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();

11、css樣式表擷取和設定，位置資訊的擷取

css，styling ， and dimensions

// Getting CSS properties.$("h1").css("fongtSize")// Returns a string such as "19px".$("h1").css("font-size")// Also works.// Setting CSS properties.$( "h1" ).css( "fontSize", "100px" ); // Setting an individual property.// Setting multiple properties.$( "h1" ).css({    fontSize: "100px",    color: "red"});

注意：並不建議使用css()去設定元素樣式，因為最好使樣式資訊與js分離，建議使用css類。

// Working with classes.var h1 = $( "h1" );h1.addClass( "big" );//向匹配的元素添加指定的類名。h1.removeClass( "big" );//從所有匹配的元素中刪除全部或者指定的類。h1.toggleClass( "big" );//從匹配的元素中添加或刪除一個類。if ( h1.hasClass( "big" ) ) {    ...}

設定和擷取dimension

// 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();

12、 資料方法（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()//在li 和 div 之間建立一個資料連線$( "#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//li通過資料連線訪問到data,簡接改變div的內容var firstLi = $( "#myList li:first" ); firstLi.data( "contentDiv" ).html( "new content" );

13、工具方法（$ 空間）

jQuery.map()：Translate all items in an array or object to new array of items.$.trim()：去除字串前後空格$.type()：Determine the internal JavaScript [[Class]] of an object.$.now():Return a number representing the current time.=(new Date).getTime().

14、迭代訪問

$.each()  .each   $.map()  .map()

題外話：
1、callback（回調）：

A callback is a function that is passed as an argumentto another function and is executed after its parent functionhas completed.

2、對於這兩個常用函數的另外用法。以後別又在花時間去整理搜尋了。

alert(position.left+"  "+position.top);console.log(position.left,position.top);

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。 http://blog.csdn.net/hu19921016/article/details/79187250