Javascript 2 (JQuery), javascriptjquery

Javascript 2 (JQuery), javascriptjquery
1. jQuery syntax

Tips:
Using CDN (content delivery network) to reference JQuery :( the reference of link is best placed before the reference of script)
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="Tab.js"></script>
Get cdn url: http://cdn.code.baidu.com/
 

The jQuery syntax is compiled for the selection of HTML elements. You can perform some operations on the elements.

The basic syntax is:$ (Selector). action ()

• Dollar sign defines jQuery
• Selector: "query" and "Search" HTML elements
• JQuery action () executes operations on Elements

$ (Document). ready (function () ready is used to prevent the document from running jQuery code before it is fully loaded (ready.

 

2. jQuery Selector

• Element Selector

$ ("P") Select the <p> element.
$ ("P. intro") select all <p> elements of class = "intro.
$ ("P # demo") select all <p> elements of id = "demo.

• Attribute Selector

$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") select all elements with an href value equal.
$ ("[Href! = '#'] ") Select all elements with an href value not equal.
$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.

• CSS Selector

Change the background color of all p elements to red.
$("p").css("background-color","red");

 

3. jQuery event Method

 
 

  
  
 
   
 
    
$ (Document). ready (function)
 
    
Bind the function to the ready event of the document (when the document is loaded)
 
   
 
   
 
    
$ (Selector). click (function)
 
    
Click events that trigger or bind a function to the selected Element
 
   
 
   
 
    
$ (Selector). dblclick (function)
 
    
Double-click event that triggers or binds a function to the selected Element
 
   
 
   
 
    
$ (Selector). focus (function)
 
    
Events that trigger or bind a function to the retrieved focus of the selected Element
 
   
 
   
 
    
$ (Selector). mouseover (function)
 
    
A mouse hover event that triggers or binds a function to the selected element.
 
   
 
  
 
 

JQuery event full version see: http://www.w3school.com.cn/jquery/jquery_ref_events.asp

 

4. jQuery animation effect

• Hide/show

Method: hide, show
Syntax: (speed indicates the display/hide speed. The value can be "fast", "slow", or millisecond. callback indicates the function that runs after execution)
$ (Selector). hide (speed, callback );
$ (Selector). show (speed, callback );

• Fade in and out

Methods: fadeIn () [fade in], fadeOut () [fade out], fadeToggle () [fade in and fade out interaction], and fadeTo () [Allow opacity]
Syntax: $ (selector). fadeIn (speed, callback); (the first three methods are similar)
$ (Selector). fadeTo (speed, opacity, callback );

• Slide

Method: slideDown () [Slide], slideUp () [slide up], slideToggle () [slide up and down interaction]
Syntax: $ (selector). slideDown (speed, callback); (other methods are similar)

• Animation

Tips: by default, all HTML elements are static and cannot be moved. To operate the position, you must set the CSS position attribute of the element to relative, fixed, or absolute.
Method: animate ()
Syntax: $ (selector ). animate ({params}, speed, callback); (params is used to set CSS attributes of an animation. "+ =" or "-=" is available when CSS uses relative values ")

• Animation STOP

Method: stop ()
Syntax: $ (selector ). stop (stopAll, goToEnd); (the stopAll parameter specifies whether to clear the animation queue. The default value is false. The goToEnd parameter specifies whether to finish the current animation immediately. The default value is false)

• JQuery method Link

Example: $ ("# p1" ).css ("color", "red"). slideUp (2000). slideDown (2000 );
The effect of this method is: the "p1" element first changes to red, then slides up, and then slides down

 

5. jQuery-get content and attributes

Get content-text (), html (), and val ():
 
 
 

  
  
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
 
 
1 $("#btn1").click(function(){2   alert("Text: " + $("#test").text());3 });4 $("#btn2").click(function(){5   alert("HTML: " + $("#test").html());6 });
 
Get tag attributes-attr ()
Obtain:
 
1 $("button").click(function(){2   alert($("#w3s").attr("href"));3 });
Setting (single attribute setting and multi-attribute setting ):
 
 1 $("button").click(function(){ 2   $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); 3 }); 4  5  6 $("button").click(function(){ 7   $("#w3s").attr({ 8     "href" : "http://www.w3school.com.cn/jquery", 9     "title" : "W3School jQuery Tutorial"10   });11 });
 
 

 

6. jQuery-Add/delete Elements

How to add HTML content: append () [add after], prepend () [Add before], after () [add after selected element], before () [Add before selected element]
 
1 function afterText () 2 {3 var txt1 = "<B> I </B> "; // create a new element in HTML 4 var txt2 =$ ("<I> </I> "). text ("love"); // create a new element using jQuery 5 var txt3 = document. createElement ("big"); // create a new element 6 txt3.innerHTML = "jQuery! "; 7 $ (" img "). after (txt1, txt2, txt3); // Insert new elements after img 8 $ ("p "). append (txt1, txt2, txt3); // append new element 9 10}
 
 
Methods for deleting HTML elements: remove (), empty ()
1 $ ("# div1 "). remove (); // Delete the selected element and its child element 2 $ ("p "). remove (". italic "); // delete all p elements whose class is" italic"
1 $ ("# div1"). empty (); // Delete the child element of the selected Element
 

 

7. jQuery-Get and set the CSS class

How to operate CSS:
 
 

  
  
AddClass ()-add one or more classes to the selected Element
  
  
RemoveClass ()-delete one or more classes from the selected Element
  
  
ToggleClass ()-Adds or deletes the selected element to/from the switch operation.
  
  
Css ()-set or return style attributes
 
 
External:
1 <! DOCTYPE html> 2 
Internal:
1 // set a single property 2 $ ("p" ).css ("background-color", "yellow "); 3 4 // set multiple attributes 5 css ({"propertyname": "value", "propertyname": "value ",...});
 
 
8. jQuery-size
Processing size:
 
  

  
   
Width (): set or return the width of an element (excluding the padding, border, or margin ).
  
   
Height (): sets or returns the height of an element (excluding the padding, border, or margin ).
  
   
InnerWidth (): returns the width (including the padding) of the element ).
  
   
InnerHeight (): returns the height of the element (including the padding ).
  
   
OuterWidth (): returns the width of the element (including the padding and border ).
  
   
OuterHeight (): returns the height of the element (including the padding and border ).
  
   
OuterWidth (true) returns the width of the element (including the padding, border, and margin ).
  
   
OuterHeight (true) returns the height of the element, including the padding, border, and margin ).
 
  
1 $("button").click(function(){2   var txt="";3   txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";4   txt+="Outer height (+margin): " + $("#div1").outerHeight(true);5   $("#div1").html(txt);6 });
Tips:
$ (Document). height () and $ (window). height () can obtain the size of the document and window.
 
 
9. jQuery Traversal
Traversal method:
 
  

  
   
Parent (): returns the direct parent element of the selected element.
  
   
Parents (): returns all the ancestor elements of the selected element along the way to the root element of the document ( 
   
ParentsUntil (): returns all ancestor elements between <span> and <div>:
 
  
1 $(document).ready(function(){2   $("span").parentsUntil("div");3 });
 
  

  
   
Children (): return all the direct child elements of the selected element, and traverse the DOM tree at the lower level only.
  
   
Find (): returns the descendant element of the selected element, all the way down until the last descendant.
 
  
1 // The following example returns all <span> elements belonging to the <div> descendant: 2 $ (document ). ready (function () {3 $ ("div "). find ("span"); 4}); 5 6 // The following example returns all <div> descendants: 7 $ (document ). ready (function () {8 $ ("div "). find ("*"); 9 });
 
  

  
   
Siblings (): returns all siblings of the selected element.
  
   
Next (): returns the next compatriot element of the selected element.
  
   
NextAll (): returns all siblings of the selected element.
  
   
NextUntil (): returns all the following compatriot elements between two given parameters.
  
   
Prev () [the following three items are similar to the above, and the traversal direction is up]
  
   
PrevAll ()
  
   
PrevUntil ()
  
   
Eq (): returns the element with the specified index number in the selected element.

  
   
Filter (". intro"): The method allows you to specify a standard. Elements that do not match this standard will be deleted from the set, and matched elements will be returned.
  
   
Not (". intro"): returns all elements that do not match the standard.