JQuery learning notes, jquery

JQuery learning notes, jquery
Familiar with jQuery code is the core and foundation of jQuery's entire application. jQuery is an excellent js Development Library Class, especially its support for css and XPath, it makes writing JavaScript easier! Next, let's review the entire jQuery knowledge. If you have the javascript development foundation, it is very helpful to learn jQuery.

1. Familiar with basic JQuery use cases. If you are familiar with the Javascript sample code, you can use the following function code:
// The RESPONSE event code list after the page is loaded is as follows:
$ (Document). ready (function (){
$ ("P"). click (function (){
$ (This). hide ();
});
});

2. The jQuery syntax is compiled for the selection of HTML elements. You can perform some operations on the elements.
Basic Syntax: $ (selector). action ()
The dollar sign defines jQuery. The selector "query" and "Search" HTML elements and jQuery's action () perform operations on the elements. For example:
$ (This). hide ()-hide the current element
$ ("P"). hide ()-hide all paragraphs
$ (". Test"). hide ()-hide all elements of all classes = "test"
$ ("# Test"). hide ()-hide all id = "test" Elements

3. The core of the selector jQuery operation. All selector types are listed below:
JQuery element selector:
JQuery uses the CSS selector to select HTML elements.
$ ("P") Select the <p> element.
$ ("P. intro") select all <p> elements of class = "intro.
$ ("P # demo") select all <p> elements of id = "demo.
JQuery attribute selector:
JQuery uses an XPath expression to select an element with a given attribute.
$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") select all elements with an href value equal.
$ ("[Href! = '#'] ") Select all elements with an href value not equal.
$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.
For more selector and syntax rules, see jQuery syntax rules book: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

4. events are the core issue in jQuery. The following are the key points of the entire event:
$ (Document). ready (function) binds the function to the ready event of the document (when the document is loaded)
$ (Selector). click (function) triggers or binds a function to a click event of the selected element.
$ (Selector). dblclick (function) trigger or bind the function to the double-click event of the selected Element
$ (Selector). focus (function) triggers or binds the function to the get focus event of the selected element.
$ (Selector). mouseover (function) triggers or binds a function to the mouse hover event of the selected Element

5. Solve the jQuery name conflict problem. jQuery uses the $ symbol as the jQuery introduction method.
Some other functions in the JavaScript Library (such as Prototype) also use the $ symbol.
JQuery uses noConflict () to solve this problem.
Var jq = jQuery. noConflict () helps you replace the $ symbol with your own name (such as jq.

6. jQuery's action function: (the speed or duration parameter can be set with many different values, such as "slow", "fast", "normal", or millisecond .)
6.1-display and hide functions:
$ (Selector). hide (speed, callback); -- hide functions;
$ (Selector). show (speed, callback); -- display function;
The optional speed parameter specifies the hidden/display speed. The value can be "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after it is hidden or displayed.
6.2-functions for displaying and hiding two actions:
$ (Selector). toggle (speed, callback );
The optional speed parameter specifies the hidden/display speed. The value can be "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after the toggle () method is complete.
6.3-switching functions for fade-in, fade-out, and fade-in and fade-out;
$ (Selector). fadeIn (speed, callback); -- fade in Function
$ (Selector). fadeOut (speed, callback); -- fade out function
$ (Selector). fadeToggle (speed, callback); -- switching function for fade in and out
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after fading is complete.
6.4-jQuery fadeTo () method
The jQuery fadeTo () method allows gradient to be a given opacity (value between 0 and 1 ).
Syntax: $ (selector). fadeTo (speed, opacity, callback );
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The required opacity parameter in the fadeTo () method sets the fade-in and fade-out effect to a given opacity (value between 0 and 1 ).
The optional callback parameter is the name of the function executed after the function is completed.
6.5-Upper and Lower slide functions:
$ (Selector). slideDown (speed, callback); -- slide down;
$ (Selector). slideUp (speed, callback); -- slide up;
$ (Selector). slideToggle (speed, callback); -- switch between slideDown and slideUp;
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after sliding.
6.6-animation function:
The jQuery animate () method is used to create custom animations.
Syntax: $ (selector). animate ({params}, speed, callback );
The required params parameter defines the CSS attributes of the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after the animation is completed.
6.7-Stop Animation:
The jQuery stop () method is used to stop an animation or effect before they are completed.
The stop () method applies to all jQuery effect functions, including sliding, fade-in and fade-out, and custom animations.
Syntax: $ (selector). stop (stopAll, goToEnd );
The optional stopAll parameter specifies whether to clear the animation queue. The default value is false, that is, only the animation that stops the activity allows any animations that are placed in the queue to be executed backward.
The optional goToEnd parameter specifies whether the current animation is completed immediately. The default value is false.
Therefore, by default, stop () clears the current animation specified on the selected element.

7. jQuery method link call:
$ ("# P1" ).css ("color", "red"). slideUp (2000). slideDown (2000); -- first turns red and then slides up, and then slides down;

8. jQuery's ability to operate on DOM, while DOM is actually the basic core of jQuery,
A very important part of jQuery is its ability to operate the DOM. jQuery provides a series of DOM-related methods, which makes access and operation elements and attributes very easy. Get content-text (), html (), and val ()
Three simple and practical jQuery methods for DOM operations:
Text ()-set or return the text content of the selected Element
Html ()-set or return the content of the selected element (including HTML tags)
Val ()-set or return the value of a form field
The following example shows how to obtain content using jQuery text () and html () methods:
$ ("# Btn1"). click (function (){
Alert ("Text:" + $ ("# test"). text ());
});
$ ("# Btn2"). click (function (){
Alert ("HTML:" + $ ("# test" example .html ());
});

8. Set the property value: Set the property-attr ()
The jQuery attr () method is also used to set/change attribute values.
The following example shows how to change the value of the href attribute in the (SET) link:
$ ("Button"). click (function (){
$ ("# W3s"). attr ({
"Href": "http://www.w3school.com.cn/jquery ",
"Title": "W3School jQuery Tutorial"
});
});

9. jQuery's four prevention measures are used to add elements: (four jQuery methods for adding new content)
Append ()-insert content at the end of the selected Element
Prepend ()-insert content at the beginning of the selected Element
After ()-insert content after the selected Element
Before ()-insert content before the selected Element
For example, the following code snippet:
Var txt1 = "<p> Text. </p>"; // create a new element in HTML
Var txt2 = $ ("<p> </p>"). text ("Text."); // create a new element with jQuery
Var txt3 = document. createElement ("p"); // create a new element with DOM
Txt3.innerHTML = "Text .";
$ ("P"). append (txt1, txt2, txt3); // append a new element.

10. Delete elements/content. To delete elements and content, you can use the following two jQuery methods:
Remove ()-delete the selected element (and its child element)
Empty ()-delete a child element from the selected Element
Example: $ ("p"). remove (". italic ")

11. jQuery operations on CSS
AddClass ()-add one or more classes to the selected Element
RemoveClass ()-delete one or more classes from the selected Element
ToggleClass ()-Adds or deletes the selected element to/from the switch operation.
Css ()-set or return style attributes
Example: $ ("p" ).css ({"background-color": "yellow", "font-size": "200% "});

12. jQuery provides an important way to process multiple dimensions:
Width ();
Height ();
InnerWidth ();
InnerHeight ();
OuterWidth ();
OuterHeight ();

13. jQuery element traversal:
Traverse the DOM tree up: These jQuery methods are useful for traversing the DOM tree up:
Parent ()
Parents ()
ParentsUntil ()
Traverse the DOM tree down: below are two jQuery methods used to traverse the DOM tree down:
Children ()
Find ()
Horizontal traversal tree: There are many useful ways for us to perform horizontal traversal in the DOM tree:
Siblings ()
Next ()
NextAll ()
NextUntil ()
Prev ()
PrevAll ()
PrevUntil ()
Filtering Algorithm: abbreviation of the search Element range. It is the simplest and most basic filtering algorithm;
The three basic filtering methods are first (), last (), and eq (). They allow you to select a specific element based on its position in a group of elements.
Other filtering methods, such as filter () and not (), allow you to select elements that match or do not match a specified standard.

14. Ajax method support:
14.1 The jQuery load () method is a simple but powerful AJAX method. The load () method loads data from the server and puts the returned data into the selected element.
Syntax: $ (selector). load (URL, data, callback );
The required URL parameters specify the URL you want to load.
The optional data parameter specifies the set of query string key/value pairs sent together with the request.
The optional callback parameter is the name of the function executed after the load () method is complete.
14.2 jQuery $. get () method;
The $. get () method requests data from the server through http get requests.
Syntax: $. get (URL, callback );
The required URL parameters specify the URL you want to request.
The optional callback parameter is the name of the function executed after the request is successful.
The following example uses the $. get () method to retrieve data from a file on the server:
Instance:
$ ("Button"). click (function (){
$. Get ("demo_test.asp", function (data, status ){
Alert ("Data:" + data + "\ nStatus:" + status );
});
});
14.3 jQuery $. post () method, $. post () method request data from the server through http post request.
Syntax: $. post (URL, data, callback );
The required URL parameters specify the URL you want to request.
Optional data parameters are required together with the data sent by the request.
The optional callback parameter is the name of the function executed after the request is successful.
The following example uses $. post () to send data together with the request: