jquery初学与进一步学习2（官网学习）

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 argument
to another function and is executed after its parent function
has completed.

2、对于这两个常用函数的另外用法。以后别又在花时间去整理搜索了。

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