Begginers Choice

To add an html element or some text right before an html element we use   before   method of jquery. This will add the given element/text right before the element which we are targeting. < input type ="button" value =" Add Before Div " onclick =" AddBeforeDiv() " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">     function AddBeforeDiv () {         $( "#myDiv" ).before( "<span>This is appended before div</span>" );     }; </ script >

To add an html element or some text right after an html element we use after method of jquery. This will add the given element/text right after the element which we are targeting. < input type ="button" value =" Add After Div " onclick =" AddAfterDiv() "   /> < div id ="myDiv" class ="myClass">     This is a div </ div >   < script type ="text/javascript">     function AddAfterDiv() {         $( "#myDiv" ).after( "<This is appended after div" );     };     </ script >

To call a method after key has been released after being pressed we can use keyup method. This method will be called after releasing the key. < input type ="text" id ="txtName" /> < script type ="text/javascript">     $( function () {         $( "#txtName" ).keyup( function () {             alert( "keyup event has fired" );         });     });     </ script >

To call a method when value of an input element is changed we use change method. This method is only applicable to input, textarea and select elements. < input type ="text" id ="txtName" /> < script type ="text/javascript">   $( function () {         $( "#txtName" ).change( function () {             alert( "Text has changed" );         });     }); </ script >

To call a function when a textbox loose focus we can use blur method. This method is called as soon as focus is lost. < input type ="text" id ="txtName" /> < script type ="text/javascript">   $( function () {      $( "#txtName" ).blur( function () {         alert( "Blur method has been called" );      });  });     </ script >

To add click event using jquery we use . click method of jquery. We can add click event on page load but we can also add event whenever needed. < input type ="button" value ="Click me" id ="btnBindClick" /> < script type ="text/javascript">     $( function () {         $( "#btnBindClick" ).click( function () {             alert( "Click is binded using jquery" );         });     });     </ script >

To replace existing contents/html of an html element using jquery we use html method. This method replaces existing contents/html of element with new html. < input type ="button" value ="Change Html" onclick =" ChangeHtml() " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">     function ChangeHtml() {         $( "#myDiv" ).html( "<h1>This is new html</h1>" );     }     </ script >

To append some text or an html element within an html element we use append method. This will append the given text/html to end of the element in which we are appending. < input type ="button" value ="Append To Div" onclick =" Append() " /> < div id ="myDiv" class ="myClass">     This is a div </ div >             < script type ="text/javascript">     function Append() {         $( "#myDiv" ).append( "<h1>This text is appended by jquery</h1>" );     }     </ script >

To show a hidden element we use show method. To hide an element we use hide method. < input type ="button" value ="Hide Div" onclick =" HideDiv () " /> < input type ="button" value ="Show Div" onclick =" ShowDiv () " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">     function ShowDiv() {         $( "#myDiv" ).show();     }     function HideDiv() {         $( "#myDiv" ).hide();     } </ script >

To add attribute on html element using jquery we use .attr method. This method has two parameters first is name of attribute and second is value of attribute. < input type ="button" value ="Add Attribute" onclick =" AddAttribute() " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">     function AddAttribute() {         $( "#myDiv" ).attr( "title" , "Title added by jquery" );     } </ script >

To remove attribute from html element using jquery we can use removeAttr method. This method accepts attribute name which we want to remove. < input type ="button" value ="Remove Attribute" onclick =" RmoveAttribute() " /> < div id ="myDiv" class ="myClass" title ="This is a div">     This is a div </ div > < script type ="text/javascript">     function RmoveAttribute() { $( "#myDiv" ).removeAttr( "title" );    //This will remove title from div          } </ script >

To switch two classes on an html element we use toggleClass. This will remove first class and add second class and vice versa. < style >     .myClass {     color : blue ;     }     .primary {     color : black ;     } </ style > < input type ="button" value ="Toggle class" onclick =" ToggleClass() " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">     function ToggleClass () {         $( "#myDiv" ).toggleClass( "primary" ); } </ script >

We can check if some html element has a specific class using jquery hasClass method. It returns Boolean value. < input type ="button" value ="Check class" onclick =" CheckClass() " /> < div id ="myDiv" class ="myClass">     This is a div </ div > < script type ="text/javascript">     function CheckClass() {         if ($( "#myDiv" ).hasClass( "myClass" ))             console.log( "Div has class myClass" );   } </ script >