Basic jQuery and basic jquery tutorials

Basic jQuery and basic jquery tutorials

JQuery can efficiently operate on page elements.

Page element selection for DOM and CSS:

$ ("Span"); // All span Elements

$ ("# Elem"); // The element whose id is elem

$ (". Classname"); // elements whose class is classname

$ ("Div # elem"); // The <div> element whose id is elem

$ ("Ul li a. menu"); // <a> label whose class is "menu"

$ ("P> span"); // The direct sub-element span of p

$ ("Input [type = password]"); // specifies the type of input element.

$ ("P: first"); // the first section of the page

$ ("P: even"); // All even paragraphs

 

$ (": Header"); // Title element (h1 to h6)

$ (": Button"); // All button Elements

$ (": Radio ");

$ (": Checkbox ");

$ (": Checked"); // select box or segment selection box in the selected status

• Html () gets the HTML content of an element or a group of elements, similar to innerHTML of JavaScript, and obtains all HTML (including text ).

var htmlContent=$("#elem").html();

$ ("# Elem" mirror.html ("<p> Here is some new content. </p>");/* modify content */

• Text () only obtains the text content of the element. The obtained and modified content is as follows:

Var textContent = $ ("# elem "). text (); $ ("# elem "). text ("new content"); // modify the content $ ("# elem "). append ("<p> Here is some new content. </p> ") // Add text content

• Attr () returns a specific attribute value of an element. When used in a group, the value of the first element is returned.

Var title = $ ("# elem "). attr ("title"); // returns the attribute value $ ("# elem "). attr ("title", "new title"); // modify the attribute value

• Show () // display element $ ("div"). show ();
• Hide () // hide the element. The slow value is about 600 milliseconds.

$ ("# Elem"). hide ("slow", function (){

// Hidden operation

});

 Element Animation

1. fade in and out, such:

$ ("# Elem"). fadeOut ("slow", funtion (){

// Operation after fading out

});

　　

$ ("# Elem"). fadeIn (500, function (){

// The operation after the fade in

});

　　

$ ("# Elem"). fadeTo (3000, 0.5, function (){

// Operation after fade in or fade out. 0.5 indicates opacity, indicating that the final opacity fades in or out is 0.5

});

 

2. Slide, similar to fade in and out

SlideDown ();

SlideUp ();

SlideToggle ();

 

3. Animation

Animate () can be applied to many CSS styles. For example, you can hide the element after changing the height and width.

$("#elem").animate(    {        width:400px;        height:400px;       },1500,function(){               $(this).fadeOut("slow");                }  );

Command chain

　There is no limit on the length of the jQuery command chain. You can perform many operations on the same group of elements consecutively:

$ ("# Elem"). text ("Hello from jQuery"). fadeOut (). fadeIn ();