Home > Developer > Web Develop

Summary of the basic knowledge of jquery

Source: Internet
Author: User
Tags button type tag name jquery library
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

jquery Syntax: The jQuery syntax is for the selection of HTML elements, and you can perform certain operations on elements. This is the point, beginners must know what you learn the purpose is to do something. The underlying syntax is: $ (selector). Action ().all jquery is done around this, selecting the elements of the page and then doing something about the elements. Example$ (this). Hide ()-hides the current element Document-Ready functions:is to prevent the document from running JQuery code before it is fully loaded (ready). By the Convention of jquery, all JavaScript code is best placed in this area. 
$ (document). Ready (function () {});
jQuery element Selector and property selector:They allow you to select HTML elements by tag name, property name, or content.corresponds to the first half of the $ (selector) action (). jQuery element selector:$ ("P") select the <p> element.

$ ("P.intro") selects all the <p> elements of the class= "Intro".

$ ("P#demo") selects all <p> elements of the id= "demo". JQuery Property Selector:

$ ("[href]") selects all elements with an href attribute.

$ ("[href= ' # ']") selects all elements with an HREF value equal to "#".

$ ("[href!= ' # ']") selects all elements with an HREF value that is not equal to "#".

$ ("[href$= '. jpg ']") selects all elements with an href value ending with ". jpg". jQuery CSS selector:$ ("P"). CSS ("Background-color", "Red"); reference manual for complete jquery selector: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp jQuery event function: corresponds to the second half of the $ (selector) action (). The event handler refers to the method that is called when certain events occur in the HTML. 

 
 
 
  
   
   
 
    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 
   
 
   
 
 
Full jquery event: http://www.w3school.com.cn/jquery/jquery_ref_events.asp
 
  
 Conventions:
 
 
    
  
  
       
   
    • 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
      •  
  
    
 
 

 
  
  jQuery effect :corresponds to the second half of the $ (selector) action (). Hide, show, toggle, swipe, fade, and animate with jQuery, you can use the Hide () and show () methods to hide and display HTML elements $ (selector). Hide (Speed,callback);

$ (selector). Show (Speed,callback);
The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after the hide or display is complete. <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("Button#yincang"). Click (function () {
$ ("P#id"). Hide (1000,function () {alert (' Bye ')});
});
});
$ (document). Ready (function () {
$ ("Button#xian"). Click (function () {$ ("P#id"). Show (function () {1000,alert (' Hello ')}); });
});
</script>
<body>
<button type= "button" id= ' Xian ' > Display </button>
<button type= "button" id= ' Yincang ' > Hidden </button>
<p id= "id" > this is a paragraph. </p>
<p> this is another paragraph. </p>
</body><script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). Toggle ();
});
});
</script>
<body>
<button type= "button" > Toggle </button>
<p> this is a paragraph. </p>
<p> this is another paragraph. </p>
</body>
  
 JQuery Fade MethodWith JQuery, you can implement the fade-out effect of elements.
JQuery has the following four methods of fade:

 
 
    
  
  
       
   
    • FadeIn ()
      •  
   
    • FadeOut ()
      •  
   
    • The Fadetoggle () JQuery Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method.
      •  
   
    • The FadeTo () FadeTo () method allows the final result of the gradient to be a given opacity (values between 0 and 1, 0 is transparent, and 1 is opaque).
      •  
  
    
 
 

 
  
 JQuery Sliding method
With JQuery, you can create slide effects on elements.
JQuery has the following sliding methods:

 
 
    
  
  
       
   
    • Slidedown ()
      •  
   
    • Slideup ()
      •  
   
    • Slidetoggle ()
      •  
  
    
 
 

 
  
 jquery Animation-Animate () method the jquery animate () method is used to create a custom animation.
$ (selector). Animate ({params},speed,callback);
The required params parameter defines the CSS property that forms the animation.
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after the animation is completed.To operate the location, remember to first set the element's CSS position property to relative, fixed, or absolute! you can manipulate all CSS properties using the Animate () method, one important thing to remember: when using animate (), you must use the Camel notation to write all property names, for example, you must use Paddingleft instead of padding-l EFT, using MarginRight instead of margin-right, and so on. It moves the <div> element to the left until it equals 250 pixels: <! DOCTYPE html><script src= "/jquery/jquery-1.11.1.min.js" >
</script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("div"). Animate ({left: ' 250px '});
});
});
</script>

<body>
<button> Start Animation </button>
<div style= "background: #98bf21; height:100px;width:100px;position:absolute;" >
</div>

</body>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");
Div.animate ({width: ' 100px ', opacity: ' 0.8 '}, ' slow ');}); You can use this format instead of Div.animate ({height: ' 300px ', opacity: ' 0.4 '}, ' slow '). Animate ({width: ' 300px ', opacity: ' 0.8 '}, "slow");
 
  
 The JQuery Stop () method is used to stop animations or effects before they are finished. $ (selector). Stop (Stopall,gotoend);
The optional StopAll parameter specifies whether the animation queue should be cleared. The default is false, which stops only active animations, allowing any queued animation to be executed backwards.
The optional gotoend parameter specifies whether to complete the current animation immediately. The default is False. <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("#flip"). Click (function () {
$ ("#panel"). Slidedown (5000);
});
$ ("#stop"). Click (function () {
$ ("#panel"). Stop ();
});
});
</script>

<style type= "Text/css" >
#panel, #flip
{
padding:5px;
Text-align:center;
Background-color: #e5eecc;
Border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
Display:none;
}
</style>

<body>

<button id= "Stop" > Stop sliding </button>
<div id= "Flip" > Click here to slide the panel down </div>
<div id= "Panel" >hello world!</div>

</body>
  
 The Callback function executes after the current animation 100% is complete. $ (selector). Hide (Speed,callback) $ ("P"). Hide (1000,function () {
Alert ("The paragraph is now hidden");});full animation: http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
 
  
 JQuery has a powerful way to manipulate HTML elements and attributes. JQuery DOM Operations: DOM = Document Object model, "the Document Object model is independent of the Platform and language interface, allowing programs and scripts to dynamically access and update the content, structure, and style of the document." ”get the values in the DOM:Three simple and practical jQuery methods for DOM manipulation:
 
 
    
  
  
       
   
    • Text ()-Sets or returns the text content of the selected element
      •  
   
    • HTML ()-Sets or returns the contents of the selected element (including HTML tags)
      •  
   
    • Val ()-Sets or returns the value of the form field $ ("#btn1"). Click (function () {
      Alert ("Text:" + $ ("#test"). Text ());
      });
      $ ("#btn2"). Click (function () {
      Alert ("HTML:" + $ ("#test"). html ());
      }); $ ("#btn1"). Click (function () {
      Alert ("Value:" + $ ("#test"). Val ());
      }); $ ("button"). Click (function () {
      Alert ($ ("#w3s"). attr ("href"));
      });
      •  
  
    
 
 
To set the DOM value:$ ("#btn1"). Click (function () {
$ ("#test1"). Text ("Hello world!");
});
$ ("#btn2"). Click (function () {
$ ("#test2"). HTML ("<b>hello world!</b>");
});
$ ("#btn3"). Click (function () {
$ ("#test3"). Val ("Dolly Duck");});the callback function for text (), HTML (), and Val (),The callback function consists of two parameters: the subscript of the current element in the selected element list, and the original (old) value. The returned content of the function return is then used as the new value. $ ("#btn1"). Click (function () {
$ ("#test1"). Text (function (i,origtext) {
Return "Old text:" + origtext + "New Text:hello world!
(Index: "+ i +") ";
});
});

$ ("#btn2"). Click (function () {
$ ("#test2"). HTML (function (I,origtext) {
Return "Old HTML:" + Origtext + "New Html:hello <b>world!</b>
(Index: "+ i +") ";
});}); $ ("button"). Click (function () {
$ ("#w3s"). attr ("href", function (I,origvalue) {
return origvalue + "/jquery";
});});
 
  
 to add a new value to the DOM:
 
 
    
  
  
       
   
    • Append ()-inserts content at the end of the selected element
      •  
   
    • Prepend ()-Inserts content at the beginning of the selected element
      •  
   
    • After ()-Inserts the content after the selected element
      •  
   
    • Before ()-insert content before selected element
      •  
  
    
 
 
$ ("P"). Append ("Some appended text."); $ ("P"). Prepend ("Some prepended text."); $ ("img"). After ("Some text after");

$ ("img"). Before ("Some text before");
 
  
 to delete an element in the DOM:
To delete elements and content, you can typically use the following two JQuery methods:

 
 
    
  
  
       
   
    • Remove ()-Deletes the selected element (and its child elements)
      •  
   
    • Empty ()-Removes child elements from the selected element
      •  
  
    
 
 
$ ("#div1"). Remove (); $ ("#div1"). empty ();
The JQuery Remove () method can also accept a parameter that allows you to filter the deleted element.
This parameter can be the syntax of any jQuery selector. <script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). Remove (". Italic");
});
});
</script>

<body>

<p>this is a paragraph in the div.</p>
<p class= "Italic" ><i>this is another paragraph in the div.</i></p>
<p class= "Italic" ><i>this is another paragraph in the div.</i></p>
<button> Delete all P elements of class= "italic" </button>

</body>
  
 JQuery Operation CSS
JQuery has several methods for working with CSS. We will study the following:

 
 
    
  
  
       
   
    • AddClass ()-adds one or more classes to the selected element
      •  
   
    • Removeclass ()-deletes one or more classes from the selected element
      •  
   
    • Toggleclass ()-switch operation to add/Remove classes for selected elements
      •  
   
    • CSS ()-Set or return style properties
      •  
  
    
 
 
<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script>
<script>
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("H1,h2,p"). AddClass ("Blue");
$ ("div"). AddClass ("important");
});
});
</script>
<style type= "Text/css" >
. Important
{
Font-weight:bold;
Font-size:xx-large;
}
. Blue
{
Color:blue;
}
</style>
<body>

<p> this is a paragraph. </p>
<p> this is another paragraph. </p>
<div> This is very important text! </div>
<br>
<button> adding classes to elements </button>

</body>$ ("#div1"). AddClass ("Important blue");
}); the JQuery css () method CSS () method sets or returns one or more style properties for the selected element. To return the value of the specified CSS property, use the following syntax $ ("P"). CSS ("Background-color"); If you want to set the specified CSS property, use the following syntax: $ ("P"). CSS ("Background-color", " Yellow "); If you want to set multiple CSS properties, use the following syntax: $ (" P "). CSS ({" Background-color ":" Yellow "," font-size ":" 200% "});
 
  
 jquery processing element size:With JQuery, it's easy to handle the dimensions of elements and browser windows.
 
 
    
  
  
       
   
    • Width ()
      •  
   
    • Height ()
      •  
   
    • Innerwidth ()
      •  
   
    • Innerheight ()
      •  
   
    • Outerwidth ()
      •  
   
    • Outerheight ()
      •  
  
    
 
 
The width () method sets or returns the widths of elements (excluding padding, borders, or margins).
The height () method sets or returns the heights of the elements (excluding padding, borders, or margins). $ ("button"). Click (function () {
var txt= "";
txt+= "width:" + $ ("#div1"). Width () + "</br>";
txt+= "Height:" + $ ("#div1"). Height ();
$ ("#div1"). HTML (TXT);});
The Innerwidth () method returns the width of the element, including the padding.
The Innerheight () method returns the height of the element, including the padding.
The Outerwidth () method returns the width of the element (including padding and borders).
The Outerheight () method returns the height of the element, including padding and borders.
The Outerwidth (True) method returns the width of the element (including padding, borders, and margins).
The Outerheight (True) method returns the height of the element (including padding, borders, and margins).The following example sets the width and height of the specified <div> element:$ ("button"). Click (function () {$ ("#div1"). Width ($). Height (500);});
 
  
 the movement of jquery:JQuery traversal, meaning "move", is used to "find" (or pick) HTML elements based on their relationship to other elements. Start with an option and move along the selection until you reach the desired element. Through JQuery traversal in a family tree, you can start from the selected (current) element, easily move up (ancestors) in the family tree, Move down (descendants), move horizontally (compatriots). This movement is known as a traversal of the DOM. JQuery provides a variety of ways to traverse the DOM. The largest type of traversal method is tree traversal (tree-traversal). Walk up the DOM tree
These jQuery methods are useful for traversing up the DOM tree:

 
 
    
  
  
       
   
    • Parent ()
      •  
   
    • Parents ()
      •  
   
    • Parentsuntil ()
      •  
  
    
 
 
The parent () method returns the immediate parent element of the selected element. The method will only traverse the DOM tree up one level. $ (document). Ready (function () {
$ ("span"). parent ();
});p the Arents () method returns all the ancestor elements of the selected element, all the way up to the root element of the document (
You can also use optional parameters to filter the search for ancestor elements.
The following example returns all ancestors of all <span> elements, and it is a <ul> element: $ (document). Ready (function () {
$ ("span"). Parents ("ul");
});
The Parentsuntil () method returns all ancestor elements between two given elements, excluding the beginning and ending.
The following example returns all ancestor elements between <span> and <div> elements: $ (document). Ready (function () {
$ ("span"). Parentsuntil ("div");
}); traverse the DOM tree down
Here are two jQuery methods for traversing the DOM tree down:

 
 
    
  
  
       
   
    • Children ()
      •  
   
    • Find ()
      •  
  
    
 
 
The JQuery Children () Method Children () method returns all the immediate child elements of the selected element. The method will only traverse the DOM tree down one level. You can also use optional parameters to filter the search for child elements.     $ (document). Ready (function () {$ ("div"). Children ("p.1"); Class is a P-element of 1}); the Find () method returns the descendant elements of the selected element, all the way down to the last descendant. The following example returns all <span> elements that belong to <div> descendants: $ (document). Ready (function () {
$ ("div"). Find ("span");
}); The following example returns all descendants of <div>: $ (document). Ready (function () {
$ ("div"). Find ("*");});
There are many useful ways for us to traverse the DOM tree horizontally:

 
 
    
  
  
       
   
    • Siblings ()
      •  
   
    • Next ()
      •  
   
    • Nextall ()
      •  
   
    • Nextuntil ()
      •  
   
    • Prev ()
      •  
   
    • Prevall ()
      •  
   
    • Prevuntil ()
      •  
  
    
 
 
The siblings () method returns all the sibling elements of the selected element. does not include itself. You can also use optional parameters to filter the search for sibling elements. $ (document). Ready (function () {
$ ("H2"). Siblings ("P");
}); the next () method returns the next sibling element of the selected element. This method returns only one element. $ (document). Ready (function () {
$ ("H2"). Next ();
}); the Nextall () method returns all the following sibling elements of the selected element. Returns all the elements that follow. The Nextuntil () method returns all the following sibling elements between two given arguments. Does not include elements at both ends. The prev (), Prevall (), and Prevuntil () methods work in a similar way to the previous method, except in the opposite direction: they return the previous sibling element (in the DOM tree, backward through the sibling element, rather than forward).
 
  
 The three most basic filtering methods are: First (), Last (), and EQ (), which allow you to select a specific element based on its position within a set of elements. Other filtering methods, such as filter () and not (), allow you to select elements that match or do not match a specified criterion. The first () method returns the initial element of the selected element. <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" >
</script>
<script>
$ (document). Ready (function () {
$ ("div p"). First (). CSS ("Background-color", "yellow");
});
</script>
<body>


<div>
<p> This is another paragraph in the Div. </p>
</div>

<p> This is also the paragraph. </p>

The </body><script src= "/jquery/jquery-1.11.1.min.js" >
</script>
<script>
$ (document). Ready (function () {
$ ("P"). EQ (1). CSS ("Background-color", "yellow");
});
</script>
<body>

<p> my best friend is Mickey Mouse (index 3). </p>

The </body><script src= "/jquery/jquery-1.11.1.min.js" >
</script>
<script>
$ (document). Ready (function () {
$ ("P"). Filter (". Intro"). CSS ("Background-color", "yellow");
});
</script>
<body>

<p> I'm Donald Duck. </p>
<p class= "Intro" > I live in Duckburg. </p>
<p class= "Intro" > I love Duckburg. </p>
<p> my best friend is Mickey. </p>

The </body>
Summary of the basic knowledge of jquery

                

                    
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

                

            


                            
Related Keywords:
                    

                                                    pmi book of knowledge pdf
                                                    example of knowledge web pages
                                                    data management body of knowledge
                                                    cissp common body of knowledge
                                                    common body of knowledge cbk
                                                    basic function of seed
                                                    opposite of append jquery
                                            

                

                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
Contact Us

            
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
                products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
                content of the page makes you feel confusing, please write us an email, we will handle the problem
                within 5 days after receiving your email.

            

                If you find any instances of plagiarism from the community, please send an email to:
                info-contact@alibabacloud.com
                and provide relevant evidence. A staff member will contact you within 5 working days.
            

            



                

            

            
What's Trending

            
        

    


                                    

            

            
Top 10 Tags

                            datastax
                            versions
                            naming convention
                            zookeeper client
                            class definition
                            md5
                            microsoft sql server 2005
                            data structures
                            exception handling
                            error handling
                    

    


                    

            

            
Top 10 Keywords

                            microsoft download center down
                            wordpress address url site address url
                            wordpress address url
                            windows installer 4 0 download
                            302 not found
                            web address url definition
                            site address url wordpress
                            db2 integer
                            mac os installation step by step pdf
                            abbreviation for return
                    

    


                                

                    










  
      
  
            
                
                
            
  
      
  








                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •