JavaScript essay 2 (JQuery)

1.jQuery Syntax

Tips:

Reference jquery through a CDN (content distribution Network): (Link's reference is best placed before the script reference)

<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 for the selection of HTML elements, and you can perform certain operations on elements.

The underlying syntax is:$ (selector). Action ()

• Dollar sign definition JQuery
• Selector (selector) "Query" and "find" HTML elements
• JQuery Action () performs an operation on an element

$ (document). Ready (in function) is intended 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") selects all the <p> elements of the class= "Intro".

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

• 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".

• CSS Selector

Change the background color of all p elements to red

$ ("P"). CSS ("Background-color", "Red");

3.jQuery Event Methods

$ (document). Ready (function)	Bind a function to a ready event for a document (when the document finishes loading)
$ (selector). Click (function)
$ (selector). DblClick (function)	trigger or bind a function to a double-click event of the selected element
$ (selector). focus (function)	triggers or binds a function to the Focusable event of the selected element
$ (selector ). MouseOver (function)

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

4.jQuery animation effects

• Hide/Show

Method:hide,show

Syntax: (speed means show/hide velocity , the value can be: "fast", "slow" or milliseconds ,callback represents the function that runs after execution )

$ (selector). Hide (Speed,callback);

$ (selector). Show (Speed,callback);

• Fade in and fade

Method:fadeIn ()"Fade in", FadeOut ()"Fade Out", Fadetoggle ()"Fade Interaction", FadeTo ()"Allow transparency Opacity"

Syntax: $ (selector). FadeIn (Speed,callback); (the first three methods are similar)

$ (selector). FadeTo (Speed,opacity,callback);

• Sliding

Method:Slidedown () "Slide",slideup () "Up",Slidetoggle () "Swipe up and down "

Syntax: $ (selector). Slidedown (Speed,callback); (similar to other methods)

• Animation

Tips: By default, the location of all HTML elements is static and cannot be moved. To manipulate the location, you first set the element's CSS position property to relative, fixed, or absolute.

Method:animate ()

Syntax: $ (selector). Animate ({params},speed,callback); (params is used to animate CSS properties, CSS uses "+ =" or "=" when using relative values)

• Animation stop

Method:Stop ()

Syntax: $ (selector). Stop (Stopall,gotoend); (Thestopall parameter specifies whether the animation queue should be cleared, the default is false;Gotoend parameter specifies whether to complete the current animation immediately, the default is False)

• jquery Method Links

Example: $ ("#p1"). CSS ("Color", "red"). Slideup (+). Slidedown (2000);

The effect of this method is that the "P1" element will first turn red, then swipe up, then swipe down

5.jQuery-Get content and properties

Get Content- text (),html () , and Val ():

• 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 a form field

1 $ ("#btn1"). Click (function() {2   alert ("Text:" + $ ("#test"). Text ()); 3 }); 4 $ ("#btn2"). Click (function() {5   alert ("HTML:" + $ ("#test"). html ()); 6 });

Get label Properties- attr ()

Get:

1 $ ("button"). Click (function() {2   alert ("#w3s"). attr ("href")); 3 });

Settings (single and multi-property settings):

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"Ten   }); One});

6.jQuery-Add/Remove elements

Add HTML content method:append ()"Add after",prepend () "Before add", after()"SELECT element to add",before ()"add before selected element"

1 functionAftertext ()2 {3 vartxt1= "<b>i </b>";//Create new elements in HTML4 vartxt2=$ ("<i></i>"). Text ("Love");//Create new elements with JQuery5 varTxt3=document.createelement ("big");//creating a new element from the DOM6Txt3.innerhtml= "jquery!";7$ ("img"). After (TXT1,TXT2,TXT3);//inserting a new element after IMG8$ ("P"). Append (TXT1,TXT2,TXT3);//Append new Element9 Ten}

Remove HTML element method:Remove (),empty ()

1 $ ("#div1"). Remove ();  // Delete the selected element and its child elements 2 3 $ ("P"). Remove (". Italic");  // Delete all P elements of class "italic"

1 $ ("#div1"). empty ();    // Delete the child elements of the selected element

7.jQuery-Get and set CSS classes

Ways to manipulate CSS:

• 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

External:

1<! DOCTYPE html>234<script src= "/jquery/jquery-1.11.1.min.js" >5</script>6<script>7$ (document). Ready (function(){8$ ("button"). Click (function(){9$ ("H1,h2,p"). Toggleclass ("Blue"));Ten   }); One }); A</script> -<style type= "Text/css" > - . Blue the { - Color:blue; - } -</style> + -<body> +  A at -<p> this is a paragraph. </p> -<p> this is another paragraph. </p> -<button> Toggle CSS Classes </button> -</body> -
  
Internal:

  
1 // set a single property 2 $ ("P"). CSS ("Background-color", "yellow"); 3 4 // setting multiple Properties 5 css ({"PropertyName": "Value", "PropertyName": "Value",...});
  

 

8.jQuery-Size

Ways to handle Dimensions:

• width () : Sets or returns the width of the element (excluding padding, borders, or margins).
• height () : Sets or returns the height of the element (excluding padding, Border or margin).
• innerwidth () : Returns the width of the element (including padding).
• innerheight () : Returns the height of the element, including the padding.
• outerwidth () : Returns the width of the element (including padding and borders).
• outerheight () : Returns the height of the element (including padding and borders).
• outerwidth (True) Returns the width of the element (including padding, borders, and margins).
• outerheight (True) Returns the height of the element (including padding, borders, and margins).

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 () to get the dimensions of the document and window

9.jQuery Traversal

How to traverse:

• parent (): Returns the immediate parent element of the selected element.
• parents (): Returns all the ancestor elements of the selected element, all the way up to the root element of the document (
• parentsuntil (): Returns all ancestor elements between <span> and <div> elements:

1 $ (document). Ready (function() {2   $ ("span"). Parentsuntil ("div" ); 3 });

• children () : Returns all the immediate child elements of the selected element, only down one level to the DOM Tree to traverse.
• find () : Returns the descendant elements of the selected element, All the way down until the last descendant.

 1  //  The following example returns   2  $ (document). Ready (function   () { 3  $ ("div"). Find ("span"  4  });  5  6  //   The following example returns all descendants of <div>:  7  $ ( Document). Ready (function   () { 8  $ ("div"). Find ("*"  9 }); 

• siblings (): Returns all the sibling elements of the selected element.
• Next (): Returns the next sibling element of the selected element.
• Nextall (): Returns all the following sibling elements of the selected element.
• nextuntil (): Returns all the following sibling elements between two given parameters.
• prev ()"The following three resemble above, traverse direction upward"
• Prevall ()
• Prevuntil ()
• EQ (): Returns the element with the specified index number in the selected element.
  
• filter (". Intro"): Method allows you to specify a standard. Elements that do not match this standard are removed from the collection, and the matching elements are returned.
• Not (". Intro"): Returns all elements that do not match the criteria.

JavaScript essay 2 (JQuery)