Jquery beginners and further learning 2 (official website) and jquery beginners

Jquery beginners and further learning 2 (official website) and jquery beginners
10. Traverse

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

Parents: Four Methods

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

Consider the following methods

// 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] // The returned result is a son, not a grandson, Zeng sun, etc. $ ("div. grandparent "). children ("div"); // Finding all elements within a selection that match the selector: // returns [div. child, div. parent, div. surrogateParent1, div. surrogateParent2] // The returned result is all descendant div, if the descendant p does not return. $ ("Div. grandparent"). find ("div ");

Siblings

Six 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. Getting and setting css style sheets and obtaining 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: We do not recommend that you use css () to set the element style, because it is best to separate the style information from js. We recommend that you use the css class.

// Working with classes. var h1 = $ ("h1"); h1.addClass ("big"); // Add the specified class name to the matched element. H1.removeClass ("big"); // delete all or specified classes from all matching elements. H1.toggleClass ("big"); // add or delete a class from a matched element. If (h1.hasClass ("big ")){...}

Set and obtain dimension

// Basic dimensions methods.// Sets the width of all 

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 () // establish a data connection between li and 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 accesses data through a data connection, and simply changes the div content var firstLi = $ ("# myList li: first "); firstLi. data ("contentDiv" ).html ("new content ");

13. Tool methods ($ space)

JQuery. map (): Translate all items in an array or object to new array of items. $. trim (): removes spaces before and after the string $. 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()

Digress:
1. callback (callback ):

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

2. Additional usage of these two common functions. In the future, don't spend time sorting out the search.

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

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger. Http://blog.csdn.net/hu19921016/article/details/79187250