jQuery Beginner and Further Learning 2 (Official Website Learning)

10. Traverse

Traversal is divided into three parts: parents, children, and siblings (brothers)

parents: 4 ways

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

The following methods need to be carefully considered

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

Two methods: .children() and .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 methods: .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. Get and set css style sheet, get location information

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"
});

Note: It is not recommended to use css() to set element styles, because it is better to separate style information from js, and it is recommended to use css classes.

// Working with classes.
var h1 = $( "h1" );

h1.addClass( "big" );//向匹配的元素添加指定的类名。
h1.removeClass( "big" );//从所有匹配的元素中删除全部或者指定的类。
h1.toggleClass( "big" );//从匹配的元素中添加或删除一个类。
if ( h1.hasClass( "big" ) ) {
    ...
}

set and get 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. Tool method ($space)

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. Iterative access

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

Digression:
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. Additional usage of these two commonly used functions. Don't spend time sorting out searches again.

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