Introduction to the use of Jquery

I,

1. What is Jquery? What are the features?

JQuery is a JavaScript function library.

The jQuery Library has the following features:

HTML element selection, HTML element operations, CSS operations, HTML event functions, JavaScript special effects and animations, html dom traversal and modification, AJAX, Utilities

 

II,

2. Jquery-related syntax:

(1) With jQuery, you can hide and display the effects:

JQuery hide () and show ()

With jQuery, you can use the hide () and show () Methods to hide and display HTML elements:

Syntax:

$ (Selector). hide (speed, callback );

$ (Selector). show (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 it is hidden or displayed.

 

JQuery toggle ()

With jQuery, you can use the toggle () method to switch between the hide () and show () methods.

Show Hidden elements and hide the displayed elements:

Syntax:

$ (Selector). toggle (speed, callback); The Optional speed parameter specifies the hidden/displayed speed. You can take the following values: "slow", "fast", or millisecond.

The optional callback parameter is the name of the function executed after the toggle () method is complete.

 

(2) jQuery allows you to fade in and out elements.

JQuery fadeIn () shows hidden elements.

Syntax:

$ (Selector). fadeIn (speed, callback); 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.

 

The jQuery fadeOut () demo method is used to fade out visible elements.

Syntax:

$ (Selector). fadeOut (speed, callback); 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.

 

JQuery fadeToggle () demonstrates that the jQuery fadeToggle () method can be switched between fadeIn () and fadeOut () methods. If the element has faded out, fadeToggle () adds a fade-in effect to the element. If the element is fade in, fadeToggle () adds a fade out effect to the element.

Syntax:

$ (Selector). fadeToggle (speed, callback); 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.

 

JQuery fadeTo () demonstrates how 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.

 

(3) jQuery sliding method can make the elements slide up and down.

The jQuery slideDown () method is used to slide down an element.

Syntax:

$ (Selector). slideDown (speed, callback); 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.

 

The jQuery slideUp () method is used to move an element up.

Syntax:

$ (Selector). slideUp (speed, callback); 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.

 

The jQuery slideToggle () method can be switched between the slideDown () and slideUp () methods.

If the elements slide down, slideToggle () can slide them up.

If the elements slide up, slideToggle () can slide down them.

$ (Selector). slideToggle (speed, callback); 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.

 

(4) jQuery animate () allows you to create custom animations.

The jQuery animate () method is used to create custom animations.

Syntax:

$ (Selector). animate ({params}, speed, callback); required params parameter definitions form 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.

 

(5) jQuery stop () method is used to stop an animation or effect before it is completed.

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.

3. Jquery selector:

The previous article focuses on the use of Jquery selectors, so I will not list them one by one.

4. Jquery-related events:

Bind the Event function
$ (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

 

III,

JQuery DOM operations

 

A very important part of jQuery is its ability to operate the DOM.

JQuery provides a series of DOM-related methods, which makes it easy to access and manipulate elements and attributes.

 

1. Obtain the 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

2. Get attributes-attr ()

The jQuery attr () method is used to obtain the attribute value.

Set attributes-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:

Instance

$ ("Button"). click (function (){
$ ("# W3s"). attr ("href", "http://www.w3school.com.cn/jquery ");
});
 

The attr () method also allows you to set multiple attributes at the same time.

The following example shows how to set href and title attributes simultaneously:

Instance

$ ("Button"). click (function (){
$ ("# W3s"). attr ({
"Href": "http://www.w3school.com.cn/jquery ",
"Title": "W3School jQuery Tutorial"
});
});
Attr () callback function

The jQuery method attr () also provides callback functions. The callback function consists of two parameters: the subscript of the current element in the list of selected elements and the original (old) value. Then return the string you want to use with the new value of the function.

The following example demonstrates the attr () method with a callback function:

Instance

$ ("Button"). click (function (){
$ ("# W3s"). attr ("href", function (I, origValue ){
Return origValue + "/jquery ";
});
});
 

3. Using jQuery, you can easily add new elements/content.

The jQuery append () method inserts content at the end of the selected element.

The jQuery prepend () method inserts content at the beginning of the selected element.

The jQuery after () method inserts content after the selected element.

The jQuery before () method inserts content before the selected element.

4. Using jQuery, you can easily Delete existing HTML elements.

The jQuery remove () method deletes the selected element and its child element.

The jQuery empty () method deletes the child elements of the selected element.

5. Using jQuery, you can easily operate CSS elements.

To set the specified CSS attribute, use the following syntax:

Css ("propertyname", "value"); the following example sets the background-color value for all matching elements:

Instance

$ ("P" ).css ("background-color", "yellow ");

JQuery addClass () method
The following example shows how to add class attributes to different elements.

Instance

$ ("Button"). click (function (){
$ ("H1, h2, p"). addClass ("blue ");
$ ("Div"). addClass ("important ");
});
JQuery removeClass () method
The following example shows how to delete the class attribute from different elements.

Instance

$ ("Button"). click (function (){
$ ("H1, h2, p"). removeClass ("blue ");
});
JQuery toggleClass () method
The following example shows how to use the jQuery toggleClass () method. This method adds or deletes the selected element:

Instance

$ ("Button"). click (function (){
$ ("H1, h2, p"). toggleClass ("blue ");
});

6. dimensions:

JQuery innerWidth () and innerHeight () Methods

The innerWidth () method returns the width (including the padding) of the element ).

The innerHeight () method returns the height of the element (including the padding ).

JQuery outerWidth () and outerHeight () Methods

The outerWidth () method returns the width of the element (including the padding and border ).

The outerHeight () method returns the height of an element, including the padding and border ).