Quick review of JQuery's personal notes (summary)

Write in front: Learn any library or framework, not blindly learning, but to first understand the library or what the framework is doing, libraries and frameworks for different purposes to provide flexibility to use, rather than all, all projects are the same thing.

I studied jquery very early, but for a little white like me, a lot of things have not been done. and jquery as the most popular library of JS, decided to play in the summer vacation to do a review and comb jquery.

The role of 1.jQuery

First, for jquery, jquery has the following functions:

Operation of 1.HTML elements

Operation of 2.CSS elements

3.HTML event function (e.g., onclick event for HTML element)

4.Js Effects and animations

5.Ajax

6.Uitilities

Advantages of 2.jQuery

Know the use of jquery, then face the complexity of the JS front-end library, the advantages of jquery where?

1.jQuery offers a wide range of extensions and plugins

2.jQuery compatible with almost all browsers

3.jQuery greatly simplifies the syntax of JS itself, such as the selection of the HTML object statement is reduced very short

Basic syntax for 3.jQuery

$ (selector). Action ();

$: Represents the dollar sign to define jquery, which tells you that starting from here is the syntax of jquery.

Selector: selector, used to select HTML elements. This sentence is JS's document.getElementById (), such a statement.

Action: the action to perform

4. FILE-Ready Events

$ (document). Ready (function () {    //jquery code});

A form such as this is a file-ready event. Its purpose is to prevent the document from executing jquery code before it is loaded. For example, when we write JS, we use window.onload to make the entire page load the code that executes JS.

$ (function () {    //jquery code});

This is the abbreviated version above.

Selector for 5.jQuery

The jquery selector is a CSS-based selector, which, in Selector's position, allows you to conveniently use the jquery selector as you would with a CSS selector.

For example, select by ID:

$ (' #id '). Hide ();

This is where you find the ID-ID element and hide it (hide ()).

Events in 6.jQuery

What is an event, that is, the action, such as clicking a button, pressing your keyboard is called the event.

Common events for jquery:

　　

Mouse Events	Keyboard Events	Form Events	Document/Window events
Click	KeyPress	Submit	Load
DblClick	KeyDown	Change	Resize
MouseEnter	KeyUp	Focus	Scroll
MouseLeave		Blur	Unload

The syntax for jquery events:

$ (' #id '). Click (function () {  $ (' id '). hide ();});

The above code, for example, is that when you click on an element with ID ID, the ID is hidden.

Effect of 7.jQuery

Common effects of jquery support are: Appearing, hiding, fading in, fading out, sliding, animation, etc.

1. Appearing and hiding

Basic syntax:

Hide (Speed,callback); show (Speed,callback);

The two optional parameters are speed (either Fast,slow or specific milliseconds), callback (the function to execute after hide or show).

Instance

$ (' P '). Click (function () {    $ (' P '). hide ();});

Use the Toggle () method to simplify the operation: sometimes we set the button to switch back and forth between the two appearing and hiding states, then we can use toggle.

$ (' P '). Click (function () {    $ (' P '). Toggle ();});

2. Fade in and fade out

The basic syntax forms and parameters for fading in and out are the same as above, and we look directly at the examples:

$ (' P '). Click (function () {    $ (' P '). FadeIn ();     Use slow or fast description to add ""});

The same fadetoggle is the two forms of switching that implement Fadein and fadeout.

$ (' P '). Click (function () {    $ (' P '). Fadetoggle ();});

There is also a multi-Fadeto () method, which is used to lighten the color if your element needs to be set to a color.

It has a opacity in its basic syntax, with a value range of 0-1, which represents transparency.

$ (' P '). Click (function () {    $ (' P '). FadeTo ("fast" 0.7);});

PS: Here, speed is required and must be set to length.

3. Slide

jquery's slide is the same as above, because it is summed up here and no longer.

　　

4. Animations

First, we look at the basic grammar of animation;

$ (selector). Animate ({params},speed,callback);

One of the required params is to provide a CSS style that will change relative to the original element. Speed and callback are optional options as before.

Instance

$ (' div '). Animate ({left: ' 300px '});

The meaning of the above code is that the position of the HTML element of the DIV tag is relative to the original position, and 300px is transformed. (PS: Position need to be set here). The params part is written in the form of a key-value pair.

Instance-performs multiple animations simultaneously on the same object (e.g., changing the width, transparency, and position) at the same time, just by "," separating

$ ("div"). Animate ({left    : ' 250px ',    opacity: ' 0.5 ',    height: ' 150px ',    width: ' 150px '  });

Ps:jquery animations can manipulate almost all properties of CSS, but you must use the camel notation when writing. Margin-left in CSS, for example, is marginleft in jquery.

Example: calculations in animations

$ ("div"). Animate ({left    : ' 250px ',    height: ' +=150px ',    width: ' +=150px '  });

　　

Example: Use the animation's queue feature. If you want to implement animations sequentially, jquery also provides the functionality of the queue.

$ ("button"). Click (function () {  var div=$ ("div");  Div.animate ({height: ' 300px ', opacity: ' 0.4 '}, "slow");  Div.animate ({width: ' 300px ', opacity: ' 0.8 '}, "slow");  Div.animate ({height: ' 100px ', opacity: ' 0.4 '}, "slow");  

　　

5. Animation stops

(Drunk browser crashes, the following content is not saved, later re-fill)

　　　　　　

　　　　　　　　

Quick review of JQuery's personal notes (summary)