Some methods of jquery and jquery dynamics

I. Understanding of jquery

1.jQuery is a JavaScript library.
JQuery greatly simplifies JavaScript programming.
The 2.jQuery library contains the following features:
? HTML element Selection
? HTML element manipulation
? CSS actions
? HTML Event functions
? JavaScript Effects and animations
? HTML DOM Traversal and modification
? Ajax
? Utilities
3. Add jQuery to the Web page with the following tag
<script type= "Text/javascript" src= "Jquery.js" ></script>
4. There are two versions of jQuery available for download:
? Production version-used in the actual website, has been streamlined and compressed.
? Development version-for testing and development (uncompressed, readable code)
5.CDN (content distribution network)
6. Alternative options
1?? Google CDN:
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" >
</script>
2?? Microsoft CDN:
<script src= "Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" >
</script>
7.jQuery Syntax Examples
$ (this). Hide ()
Demonstrates the JQuery hide () function, which hides the current HTML element.
$ ("#test"). Hide ()
Demonstrates the JQuery hide () function, which hides elements of the id= "test".
$ ("P"). Hide ()
Demonstrates the JQuery hide () function, hiding all <p> elements.
$ (". Test"). Hide ()
Demonstrates the JQuery hide () function, hiding all elements of the class= "test".
8. The underlying syntax is: $ (selector). Action ()
? Dollar sign definition JQuery
? Selector (selector) "Query" and "find" HTML elements
? JQuery Action () performs an operation on an element
The syntax used by 9.jQuery is a combination of XPath and CSS selector syntax
10. If the function is run before the document is fully loaded, the operation may fail. Here are two specific examples:
? Trying to hide an element that doesn't exist
? Get the size of an image that is not fully loaded
11. All jquery functions in the instance are in one document ready function to prevent the document from running JQuery code before it is fully loaded.
12.jQuery Events
Here are some examples of the event methods in JQuery:
Event function
Bind function to
$ (document). Ready (function)
bind a function to a document's Ready event (when the document finishes loading)
$ (selector). Click (function)
A Click event that triggers or binds a function to the selected element
$ (selector). DblClick (function)
A double-click event that triggers or binds a function to the selected element
$ (selector). focus (function)
trigger or bind a function to the Focusable event of the selected element
$ (selector). MouseOver (function)
mouse hover event that triggers or binds a function to the selected element
13. Conclusion
Because JQuery is specifically designed to handle HTML events, your code is more appropriate and easier to maintain when you follow these guidelines:
? Put all jQuery code in the event handler
? Place all event handlers in the document-ready event handler
? Put the JQuery code in a separate. js file
? Rename the JQuery library if there is a name conflict
14. Syntax

Describe
$ (This)
Current HTML Element
$ ("P")
All <p> elements
$ ("P.intro")
All <p> elements of class= "Intro"
$ (". Intro")
All elements of class= "Intro"
$ ("#intro")
id= Elements of "Intro"
$ ("ul Li:first")
The first <li> element of each <ul>
$ ("[href$= '. jpg ']")
All href attributes with attribute values ending with ". jpg"
$ ("Div#intro. Head")
id= all class= "head" elements in the <div> element of "Intro"

$ ("P"). CSS ("Background-color", "Red"); change the background color of all p elements to red

Ii. The dynamics of jquery

Syntax: $ (selector). Hide (Speed,callback);
1. SpeedThe parameter specifies the speed of the Hide/show, which can take the following values: "Slow", "fast", or milliseconds.
2.Callbackparameter is the name of the function that is executed when hide finishes


1.$ (document). Ready (function () {
$ ("P"). Click (function () {
$ (this). Hide ();//hides the contents of the P tag
$ ("P"). Show ();//Display the contents of P tags
})
})

3.$ (document). Ready (function () {
$ ("P"). Toggle (); //Toggle () method to toggle the Hide () and Show () methods。
})

4.$ (document). Ready (function () {
$ ("#div").FadeIn();//Fade in
$ ("#div").FadeOut();
$ ("#div").Fadetoggle();
$ ("#div").FadeTo("slow", 0.5);
Syntax: $ (selector). FadeTo (Speed,opacity,callback);
opacity set to transparency (values between 0 and 1)
})
5.
Sliding
jquery Slidedown () swipe down
jquery slideup () swipe up
Query Slidetoggle () toggle up/down swipe
6.
JQuery Callback function
When animation 100% is complete, the Callback function is called.
A typical syntax:
$ (selector). Hide (Speed,callback)
7.
Correct (with callback)
$ ("P"). Hide (1000,function () {
Alert ("The paragraph is now hidden");
});
8.
JQuery Stop () stops sliding
Syntax: $ (selector). Stop (Stopall,gotoend);
StopAll: Specifies whether the animation queue should be clear. The default is false, that is, stop the animation;
Gotoend: Specifies whether to complete the current animation immediately, the default is False
Instance: $ ("#id"). Click (function () {
$ ("P"). Stop ();
})
9.
Animation
Method:
jquery Animate ()
Grammar:
$ (selector). Animate ({params},speed,callback)
The params parameter defines the CSS property that forms the animation
Instance:
$ ("button"). Click (function () {
$ ("div"). Animate ({left: ' 250px '});
})
10.
Instance:
The following example links CSS (), Slideup (), and Slidedown () together. The "P1" element first turns red, then slides up, then slides:
$ ("#p1"). CSS ("Color", "red"). Slideup (+). Slidedown (2200);

Some methods of jquery and jquery dynamics