jquery Learning Notes

A. Some nonsense
Always do is the background code, the front-end design is still stuck in the JavaScript post, get phase. More than once, I wanted to look at jquery in a systematic way, not because of the interruption of the job, but because I didn't find the right tutorial to watch. Not to say that there is no good textbooks, only blame themselves to see too detailed or too much space for textbooks, it is a bit timid. Glass Heart, Glass heart.

This time accidentally search of the tutorial is W3school, each article is not many, there are online cases for everyone to debug, very suitable for beginners to learn to use.

It took a couple of days to finish the jquery, and make a summary.

Two. jquery Import
jquery is a JavaScript library, it will be some of the front-end common effects of the implementation of the syntax, in a relatively simple, intuitive, grammatical common way to integrate, so that we can not for a simple front-end effect, write a lot of front-end code. The introduction of jquery is also relatively simple, you can download the required version of jquery in http://jquery.com/download/, then put it in your project, and then use the <script type= "in the front page code" text/ JavaScript "src=" jquery.js "></script> statement Introduction, so that you can invoke the jquery function. Type= "Text/javascript" This property in most of the current browser can not add (verified Firefox, Google, IE9 can not add).

Do not want to store the JQuery library on your computer, or you can use <script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/ 1.4.0/jquery.min.js "></script> or <script type=" Text/javascript "src=" http://ajax.microsoft.com/ajax/ Jquery/jquery-1.4.min.js "></script>, or <script src=" http://ajax.aspnetcdn.com/ajax/jQuery/ Jquery-1.8.0.js "> The first one is Google's CDN, the latter two are Microsoft's CND. Since the "Ditch left China", Google's CND generally not in the country, or you can have a way to connect, but there is no guarantee that the people with your system can be connected, so it is recommended to use local or Microsoft CDN. As for the benefits of using a CDN, cite W3school's note: Users may have already loaded jQuery from Google or Microsoft when they visit other sites. When they visit your site, JQuery is loaded from the cache, which reduces the load time. At the same time, most cdns ensure that when a user requests a file, the response is returned from the server closest to the user, which can also increase the load speed.

Three. The structure of jquery
Before we introduce the specific function, we first say that we use jquery in the front-end code in the format:

                
Where selector is the element selector that implements the selected page element:
$ (this) selects the current HTML element;
$ ("P") select the <p> element;
$ ("P.intro") selects all <p> elements of the class= "Intro";
$ ("P#demo") Select all <p> elements of id= "demo"
There are also property selectors selected by attributes:
$ ("[href]") selects all elements with an HREF attribute;
$ ("[href= ' # ']") selects all elements with an HREF value equal to "#";
$ ("[href!= ' # ']") selects all elements with an HREF value that is not equal to "#";
$ ("[href$= '. jpg ']") selects all elements with an href value ending with ". jpg".
Additional Selector Examples:
$ ("ul Li:first") the first <li> element of each <ul>;
$ ("Div#intro. Head") id= all class= "head" elements in the <div> element of "intro";
$ ("[href$= '. jpg ']") all href attributes with attribute values ending with ". jpg".

Jqfunc is a function that refers to jquery, and there is no such function as "Jqfunc". The params is the parameter of the function, and the different functions do not require the same parameters.

About the ' $ ' symbol, it's jquery's introduction, in fact, all cases of ' $ ' replaced by ' jQuery ' (note case) can also run through.
Functions in some other JavaScript libraries, such as Prototype, also use the $ notation. JQuery uses a method called noconflict () to resolve the problem.
The $.noconflict () method frees the control of the $ identifier so that other scripts can use $. For example: Var jq=jquery.noconflict (), which helps you use your own name (such as JQ) instead of the $ (jQuery) notation.

Four. jquery Common functions
jquery function (the tutorial called them "events", it feels pretty good, I used the natives of the function) there are many, the tutorial has a detailed description of the case, do not do the porter: http://www.w3school.com.cn/jquery/jquery_ref_events.asp
Among them, the most commonly used slightly said, we can focus on the look:

1. Hide/Show
Hide () and show () implement the hidden and display functions of the selected element, respectively. The two functions can also add parameters, such as Hide (2000), to indicate a gradual concealment over a period of 2000 milliseconds. Too lazy to count the time, you can also use "slow"/"fast" as a parameter, indicating a slow or fast hidden/display element. In addition to the speed, you can add another parameter, such as Hide (2000,callback), where the callback is a callback function, "after the element is hidden, the function that needs to be called." For example, after hiding, want to pop up a prompt box, or other operations, as long as the legal function can be.
In addition, there is an interesting function, toggle (), which causes hidden elements to be displayed and displayed. The parameter problem is as above.
In addition, please remember toggle this word (the translation of the word is "toggle"), there are several other functions will contain the word.

2. Fade In/Fade out
FadeIn () and fadeout () respectively implement the fade-in and fade-out functions of the selected element. The two are very similar to the Hide/show, and the final result shows the same page as the parameter processing. The difference is that the Hide/show hidden/displayed effect is reduced or enlarged from bottom to top or from lower right to upper left, while the fade/fade effect of Fadeout/fadein is the overall fade or fade in.
Fadetoggle (two occurrences), similar to toggle, toggles between fading in and out. Parameters are handled the same.
In addition, there is a method for fading in FadeTo (), Syntax: $ (selector). FadeTo (Speed,opacity,callback); it "fades in or out of an element to the specified opacity", opacity The parameters set the fade effect to the given opacity (values between 0 and 1, 0-completely transparent not visible, 1-fully visible), can be simply understood as 0 when the equivalent fadeout effect, 1 is equivalent to the Fadein effect.

3. Slide
Slidedown and Slideup:
$ (selector). Slidedown (speed,callback) to slide the element down, which will slide to the height of the element setting
$ (selector). Slideup (Speed,callback) is used to slide the element up, which converges the element without displaying
The parameter effect is the same as the above two.
There is also a slidetoggle (three occurrences) method, Syntax: $ (selector). Slidetoggle (Speed,callback), the declining elements of the convergence are displayed, and the displayed elements on the slide converge to not appear.

The difference between the first three types of methods you can do some demo comparison, at a glance.
 
4. Animation effect
Animate functions for simple animation effects. Syntax: $ (selector). Animate ({params},speed,callback);
The latter two parameters are well understood, one is the speed of the null animation, and one is the callback function after the end of the animation. The first parameter is a set of CSS properties, which is the effect the animation will eventually achieve. This effect can be an absolute value or it can be relative.
The absolute value of the notation: {left: ' 250px ', opacity: ' 0.5 ', Height: ' 150px ', Width: ' 150px '}, the animation eventually moves to the ieft margin 250px, transparency 0.5, height 150px, width 150px, relative value notation: {left: ' +=50px ', opacity: '-=0.5 ', Height: ' +=50px ', Width: ' +=50px '}, animation final effect, margin on the bottom of the current margin value is increased by 50px, The transparency is reduced by 0.5 on the original basis, and the height is increased by 50px on the original basis, and the width increases by 50px. In addition, you can set the parameter to toggle (four occurrences) to achieve "from scratch, from there to nothing" change.

Five. Node traversal
This is a selector related to some of the functions, not much, also very good to remember:
1. Select the ancestor node of the current element (traverse up)
$ ("P"). parent ();//Select the direct parent element of <p>, can take parameter as filter condition;
$ ("P"). parents ();//Returns all ancestor elements of <p>, which go all the way up to the root of the document ($ ("P"). Parentsuntil ("ul");//Returns the ancestors of <p> until all nodes before <ul>, excluding P and UL;

2. Select the descendant node of the current element (traverse down)
$ ("P"). Children (); Returns all the immediate child elements of the <p> element, traversing the DOM tree only one level down; children () can take parameters as filter conditions;
$ ("div"). Find ("P") looks down on the descendant elements of the <div> element, all the way down until the <p> element is found (the entry parameter cannot be empty), and $ ("div"). Find ("*") indicates that all descendant elements of the div are found;

3. Select the sibling node of the current element (sibling traversal)
Siblings () returns all the sibling elements of the selected element, excluding itself (the same will be returned if you are another sibling that matches the conditional element);
Next () returns the next sibling element of the selected element;
Nextall () returns all the following sibling elements of the selected element;
Nextuntil (unit) is a sibling element that is all followed between the currently selected element and the unit element;
Prev () opposite the next effect;
Prevall () is opposite to the nextall effect;
Prevuntil (unit) is opposite to nextunitl effect;
All of the above functions can filter the selected elements by adding a filter condition.

4. Filter processing
In addition to filtering through function parameters, there are special functions to determine the conditions of the selected element.
$ ("div p"). First ();//Select the initial <p> element within the first <div> element;
$ ("div p"). Last (); Select the last <p> element in the last <div> element;
$ ("P"). EQ (1); Select the second <p> element (index number 1), the index number starts at 0, so the first element has an index number of 0;
$ ("P"). Filter (". Intro"); Returns all <p> elements with the class name "Intro";
$ ("P"). Not (". Intro"); Returns all <p> elements without the class name "Intro";
Six. Ajax
Before I learned two Ajax, I was frightened by the kind of browser type judgment, and now I see the AJAX implementation of jquery, it feels much easier.
Syntax: $ (selector). Load (url,data,callback);
URL (String): The URL address of the requested HTML page.
Data (MAP): (optional parameter) sends the Key/value to the server.
Callback (callback): (optional parameter) callback function when the request is complete (does not need to be success).
One load is done. The callback function callback has three parameters:
Responsetxt-Contains the contents of the result when the call succeeds
Statustxt-Contains the state of the call
XHR-Contains XMLHttpRequest objects
With these three parameters, the subsequent operation of Ajax is unified with the traditional approach:
    function (RESPONSETXT,STATUSTXT,XHR) {    if (statustxt== "success")      alert ("External content loaded successfully!") ");    if (statustxt== "error")      alert ("Error:" +xhr.status+ ":" +xhr.statustext);    }

The XHR parameter has three properties: status is the HTTP return code, success is OK when 200;statustext succeeds, the failure may be empty, responsetext property is consistent with the responsetxt of the callback function.

In addition to load, there are two methods for get and post to implement an asynchronous request. Grammar:
$.get (Url,callback);

For example:
    $ ("button"). Click (function () {  $.get ("demo_test.asp", function (data,status) {    alert ("Data:" + data + "\ Nstatus: "+ status");})  ;    $.post (Url,data,callback);

$.post (Url,data,callback);

For example:
                  $ ("button"). Click (function () {  $.post ("demo_test_post.asp",  {    name: "Donald Duck", City    : "Duckburg "  },  function (data,status) {    alert (" Data: "+ Data +" \nstatus: "+ status);  });


These are asynchronous requests, where load loads the content to the location of the selected element; Get is a GET request; Post is a POST request (a bit like crap). The underlying is implemented by $.ajax ([Settings]).
Seven. End of entry
At this point, the introduction of jquery is almost there, the rest is a variety of exercises + actual combat. As a "skilled worker", and then to delve into the advanced use of jquery, should not "timid"!
jquery Learning Notes