jquery Knowledge Summary

1. Selector

$ ("P") $ ("#id") $ (". Class") $ ("[href= ' # ']") $ ("[href$= '. jpg ']"    )

2. Events

$ (document). Ready (function)    binds the functions to a document's readiness event (selector) when it finishes loading. Click (function     triggers or binds a function to the selected element's Click event $ (selector). DblClick (function)    triggers or binds a function to the selected element's double-click event $ ( Selector. Focus (function)    triggers or binds a function to the selected element's get-focused event $ (selector). MouseOver (  functions)    to trigger or bind a function to a mouse hover event of the selected element

3.jQuery effect

$ ("#hide"). Click (function(){  $("P"). Hide ();}); $("#show"). Click (function(){  $("P"). Show ();}); FadeIn () FadeOut () Fadetoggle () FadeTo () $ (selector). FadeIn (speed,callback); 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 fading completes. Slidedown () Slideup () Slidetoggle () $ (selector). Slidedown (speed,callback); 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 slide is completed. $ (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. $("button"). Click (function(){  $("Div"). Animate ({left: ' 250px ')});}); $ (selector). Stop (stopall,gotoend); The optional StopAll parameter specifies whether the animation queue should be cleared. Default isfalse, which stops only the active animation, allowing any queued animation to be executed backwards. The optional gotoend parameter specifies whether to complete the current animation immediately. Default isfalse. With JQuery, you can take action/method Link up.Chaining allows us to allow multiple jQuery methods (on the same element) in one statement. $("#p1"). CSS ("Color", "red"). Slideup (+). Slidedown (2000);

4.jQuery manipulating HTML

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 $ ("#btn1"). Click (function(){  $("#test1"). Text ("Hello world!"));}); $("#btn2"). Click (function(){  $("#test2"). HTML ("<b>hello world!</b>"));}); $("#btn3"). Click (function(){  $("#test3"). Val ("Dolly Duck"));}); Append ()-inserts content at the end of the selected element prepend ()-Insert content at the beginning of the selected element after ()-Insert content after selected element before ()-insert content before selected element remove ()-Delete the selected element (and its child elements) empty ()-removes a child element from the selected element addclass ()-add one or more classes to the selected element Removeclass ()-deletes one or more classes from the selected element Toggleclass ()-Toggle operation for adding/removing classes to selected elements css ()-Sets or returns the Style property of the CSS () method to set or return one or more style properties for the selected element. CSS ("PropertyName");$("P"). CSS ("Background-color")); CSS ("PropertyName", "Value");$("P"). CSS ("Background-color", "yellow")); CSS ({"PropertyName": "Value", "PropertyName": "Value",...}); $("P"). css ({"Background-color": "Yellow", "font-size": "200%"}); 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(){  varTxt= ""; 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. $("button"). Click (function(){  varTxt= ""; TXT+ = "Inner width:" + $ ("#div1"). Innerwidth () + "</br>"; TXT+ = "Inner Height:" + $ ("#div1"). Innerheight (); $("#div1"). html (TXT);}); O The Uterwidth () method returns the width of the element (including padding and borders). The Outerheight () method returns the height of the element, including padding and borders. $("button"). Click (function(){  varTxt= ""; TXT+ = "Outer width:" + $ ("#div1"). Outerwidth () + "</br>"; TXT+ = "Outer Height:" + $ ("#div1"). Outerheight (); $("#div1"). html (TXT);}); O Uterwidth (true) method returns the width of the element, including padding, borders, and margins. Outerheight (true) method returns the height of the element, including padding, borders, and margins. $("button"). Click (function(){  varTxt= ""; TXT+ = "Outer width (+margin):" + $ ("#div1"). Outerwidth (true) + "</br>"; TXT+ = "Outer height (+margin):" + $ ("#div1"). Outerheight (true); $("#div1"). html (TXT);});

$ ("button"). Click (function () {  $ ("#div1"). Width ($). Height (500);});

5.jQuery traversal

jquery Knowledge Summary