jQuery Cheat Sheet – A Basic Guide to jQuery

Last Updated : 14 Jun, 2022

Read

Discuss

What is jQuery?

jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML & CSS document, Document Object Model (DOM), and JavaScript. With the help of jQuery, the multiple lines of code can be wrapped into methods, which in turn, can be called with a single line of code to perform a particular task. This, in turn, jQuery makes it easier to use Javascript on the website, along with enhancing the overall performance of the website.

What is jQuery Cheat Sheet?

The jQuery Cheat Sheet will give quick ideas related to the topics like Selectors, Attributes, Manipulation, Traversing, Events, Effects & many more, which will provide you a gist of jQuery with basic implementation. The purpose of the Cheat Sheet is to provide you with the content at a glance with some quick accurate ready-to-use code snippets that will help you to build a fully-functional webpage.

jQuery Basics: jQuery is a lightweight, feature-rich Javascript library that helps to simplify the overall complexity of the code by implementing the Selectors, Attributes, Events, Effects, etc, with the use of the required API to perform the particular task.

CDN Link:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <!-- CDN link of jQuery --> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
   </script> 
   <!-- Basic Example code --> 
   <script> 
      $(document).ready(function() { 
          $("h1").hover(function() { 
              $(this).css("color", "green"); 
          }, function() { 
              $(this).css("color", "aliceblue"); 
          }); 
      }); 
   </script> 
</head> 
<body> 
   <center> 
      <h1>GeeksforGeeks</h1> 
   </center> 
</body> 
</html> 

jQuery Selectors: The selector in jQuery is a function that selects nodes i.e. elements from the Document Object Model. In simple words, it is a function, that is used to select/manipulate one or more HTML elements using jQuery. The list of selectors with their basic description & syntax is given below:

Selectors	Description	Syntax
*	It selects all the elements in the document, including HTML, body, and head.	$(“*”)
.class	It specifies the class for an element to be selected.	$(“.class”)
element	It is used to select and modify HTML elements based on the element name.	$(“element_name”)
#id	It specifies an id for an element to be selected.	$(“#id”)
:hidden	It selects hidden elements to work upon.	$(“:hidden”)
:visible	It is used to select all the elements that are currently visible in the document.	$(“:visible”)
parent > child	This selector is used to select all elements that are the direct child of their parent element.	(“parent > child”)
ancestor-descendant	This selector selects every element which is a descendant of a specific(parent) element.	$(“parent descendant”)
:animated	This is an inbuilt method in jQuery which is used to change the state of the element with CSS style.	(selector).animate({styles}, para1, para2, para3);
:first	It is used to select the first element of the specified type.	$(“:first”)
:last	It is used to select the last element of the specified type.	$(“:last”)
:even	It is used to select an even number index from the elements.	$(“:even”)
:odd	It is used to select an odd number index from the elements.	$(“:odd”)
:input	It is used to select input elements. This selector also used with button element.	$(“:input”)
:button	It selector selects button elements and input elements with type=”button”.	$(“:button”)
:parent	It is used to select all elements that are the parent of another element, including text nodes.	$(“:parent”)
:contains()	It is used to select elements containing the specified string.	$(“:contains(text)”)
:first-child	It is used to select every element that is the first child of its parent.	$(“:first-child”)
:nth-child()	It selects all elements that are the nth-child of their parent.	$(“Element:nth-child(Index/even/odd/equation)”)
[name!=”value”]	It is used to select each element that doesn’t have the specified attribute and value.	$(“[attribute!=’value’]”)
prev~siblings	It is used to select all elements that are siblings of the specified element.	(“element ~ siblings”)
prev + next	This selector is used to select the just “next” element of the specified “element”.	$(“element + next”)

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script> 
   <script> 
      $(document).ready(function() { 
          $("*").css("background-color", // Universal(*) 
              "green"); 
          $(".geeks").css("font-family", "sans-serif"); // class  
          $("#w1:parent").css("color", "white"); // parent 
          $("h4:contains(Course)").css("font-family", "cursive"); // contains 
      }); 
      $(document).ready(function() { 
          $("button").click(function() { // element 
              $("ul").toggle(); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#wrap").css("font-weight", "bold"); // id  
      }); 
      $(document).ready(function() { 
          $("h1:hidden").show(1000); // hidden  
      }); 
      $(document).ready(function() { 
          $("a:visible").css( // visible 
              "color", "aqua"); 
      }); 
      $(document).ready(function() { 
          $("div > span").css( // parent > child  
              "background-color", "violet"); 
      }); 
      $(document).ready(function() { 
          $("div span").css("color", // ancestor-descendant  
              "white"); 
      }); 
      $(document).ready(function() { 
          $("#btn1").click(function() { 
              $("#box").animate({ // animate 
                  width: "300px"
              }); 
              $("#box").animate({ 
                  height: "300px"
              }); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#lid:first").css( // first 
              "font-size", "large").css("list-style-type", "none"); 
          $("#lid2:last").css("color", "white"); // last 
      }); 
      $(document).ready(function() { 
          $("tr:even").css("font-family", // even 
              "Times New Roman"); 
          $("tr:odd").css("color", // odd 
              "white"); 
      }); 
      $(document).ready(function() { 
          var allInputs = $(":input"); // input 
          $("#GFG").text("Found " 
          + allInputs.length 
          + " elements selected."); 
          $("#clkbtn").css("font-weight", "bold"); // button 
      }); 
      $(document).ready(function() { 
          $("h4:first-child").css( // first-child 
              "color", "white"); 
          $("h4[id!='sid2']").css( // [attribute!=value] 
              "color", "white"); 
      }); 
      $(document).ready(function() { 
          $("h5:nth-child(2n-1)").css("font-family", // :nth-child() 
              "system-ui"); 
          $(document).ready(function() { 
              $("div ~ h5").css("color", "blue"); // element ~ siblings 
          }); 
          $("div + h4").css("word-spacing", // element + next 
              "15px"); 
      }); 
   </script> 
   <style>
      #box { 
      width: 100px; 
      height: 100px; 
      border: 2px solid black; 
      } 
   </style> 
</head> 
<body class="geeks"> 
   <h1 style="display:none;"> 
       jQuery Universal(*) Selector 
   </h1> 
   <h4>Course List:</h4> 
   <ul type="circle"> 
      <li id="w1">jQuery Parent Selector</li> 
      <li>Web Technology</li> 
      <li>Data Structures & Algorithms</li> 
      <li>Apttitude & Reasoning Course</li> 
   </ul> 
   <p id="wrap">jQuery id Selector</p> 
   <a href="https://www.geeksforgeeks.org/"> 
   Click Here 
   </a>jQuery visible Selector 
   <br> 
   <button>Click me to hide</button> 
   <br> 
   <div style="border:1px solid pink;"> 
      <p>GeeksforGeeks 
         <br>  
         <span> 
         jQuery parent > child Selector 
         </span> 
      </p> 
   </div> 
   <br> 
   <div style="border:1px solid pink;"> 
      <p>GeeksforGeeks</p> 
      <span> 
      jQuery parent > child Selector 
      </span>  
   </div> 
   <hr> 
   <div id="box">jQuery Animate Selector</div> 
   <br> 
   <button id="btn1"> 
   Click Here ! 
   </button> 
   <hr> 
   <ol> 
      <li id="lid">jQuery first Selector</li> 
      <li>jQuery selectors</li> 
      <li id="lid2">jquery Last Selectors</li> 
   </ol> 
   <hr> 
   <table border="1"> 
      <tr> 
         <th>Company</th> 
         <th>Country</th> 
      </tr> 
      <tr> 
         <td>reliance</td> 
         <td>India</td> 
      </tr> 
      <tr> 
         <td>flipkart</td> 
         <td>India</td> 
      </tr> 
      <tr> 
         <td>walmart</td> 
         <td>American</td> 
      </tr> 
   </table> 
   <hr> 
   <input type="text"
      value="jQuery input Selector"> 
   <button id="clkbtn"
      type="button">  
    button Selector 
   </button> 
   <br> 
   <select> 
      <option>Option</option> 
   </select> 
   <textarea></textarea> 
   <h4 id="GFG"></h4> 
   <hr> 
   <div> 
      <h4 id="sid">GeeksforGeeks</h4> 
      <h4 id="sid2">Learning Platform</h4> 
      <h4>First Child Selector</h4> 
   </div> 
   <hr> 
   <h5>GeeksforGeeks</h5> 
   <h5>GeeksforGeeks</h5> 
   <h5>GeeksforGeeks</h5> 
   <h5>GeeksforGeeks</h5> 
</body> 
</html> 

jQuery Methods: The methods in jQuery can be utilized to set or return the DOM attributes for the specific elements. The list of methods with their description & syntax is given below:

Methods	Descriptions	Syntax
.prop()	This is an inbuilt method in jQuery which is used to set or return properties and values for the selected elements.	$(selector).prop(parameters)
.removeAttr()	This is an inbuilt method in jQuery that is used to remove one or more attributes from the selected elements.	$(selector).removeAttr(attribute)
.removeProp()	This is an inbuilt method in jQuery that is used to remove the property set by the prop() method.	$(selector).removeProp(property)
.val()	This is an inbuilt method in jQuery that is used to returns or set the value of attribute for the selected elements.	$(selector).val()
.removeData()	This is an inbuilt method in jQuery that is used to remove those data which are previously set with the data() method.	$(selector).removeData(args);
jQuery.data()	This is an inbuilt method in jQuery that is used to attach data or get data for the selected elements.	$(selector).data(parameters);
jQuery.hasData()	It is used to determine whether an element has any jQuery data associated with it.	jQuery.hasData(element)
.height()	This is an inbuilt method that is used to check the height of an element but it will not check the padding, border, and margin of the element.	$(“param”).height()
.innerHeight()	It is used to check inner height of the element including padding.	$(“param”).innerHeight()
.outerHeight()	This is used to find the outer height of the specified element, which includes padding and border of an element.	$(selector).outerHeight(includeMargin)
.width()	This is an inbuilt function in JavaScript that is used to check the width of an element.	$(“param”).width()
.innerWidth()	This method sets or returns the inner width of the element include padding.	$(“param”).innerWidth()
.outerWidth()	This method is used to return the value of the outer width of an element which includes border & padding.	$(selector).outerWidth( includemargin )
.css()	This method is used to change the style property of the selected element.	$(selector).css(property)
.addClass()	This is an inbuilt method in jQuery that is used to add more property to each selected element.	$(selector).addClass(className);
.removeClass()	This is an inbuilt method in jQuery that is used to remove one or more class names from the selected element.	$(selector).removeClass(class_name, function(index, current_class_name))
.hasClass()	This is an inbuilt method in jQuery that check whether the elements with the specified class name exists or not.	$(selector).hasClass(className);
.toggleClass()	This is an inbuilt method in jQuery that is used to toggle or change the class which attached with selected element.	$(selector).toggleClass(class, function, switch)
.scrollTop()	This is an inbuilt method in jQuery that is used to return the vertical top position of the scrollbar.	$(selector).scrollTop(position)
.scrollLeft()	This is an inbuilt method in jQuery that is used to return or set the horizontal position of the scroll bar.	$(selector).scrollLeft(position)

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script 
      src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script> 
   <script> 
      $(document).ready(function(){ 
          $("#btn1").click(function(){ 
          var $x = $("i"); 
          $x.prop("color", "green"); 
          $x.append("<br> Property is color and its value: "
              + $x.prop("color"));               // prop() 
                 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn2").click(function() { 
               $("p").removeAttr("style");                   // removeAttr() 
           }); 
       }); 
       $(document).ready(function() { 
              $("#btn3").click(function() { 
                  var $GFG = $("#division3"); 
                  $GFG.prop("color", "green"); 
                  $GFG.append("<br>The value of color: "
                                   + $GFG.prop("color")); 
                  $GFG.removeProp("color");                   // removeProp() 
                  $GFG.append("<br>The value of color after removeProp: " 
                                          + $GFG.prop("color") + "<br>"); 
              }); 
          }); 
          $(document).ready(function() { 
              $("#btn4").click(function() { 
                  $("input:text").val("GeeksforGeeks!");      // val() 
                  $("input:text").css("color", "green"); 
                  $("input:text").css("font-size", "40px");   // css() 
                  $("input:text").css("font-weight", "bold"); 
                  $("input:text").css("font-family", "times new roman"); 
              }); 
          }); 
          $(document).ready(function() { 
            
          $("#b1").click(function() { 
                // jQuery.data() 
              $("#division5").data("greeting", "Hello Everyone !");    
              alert("GeeksforGeeks says : " + $("#division5"). 
                       data("greeting")); 
          }); 
            
          $("#b2").click(function() { 
              $("#division5").removeData("greeting"); // removeData() 
              alert("Greeting is: " + $("#division5"). 
                      data("greeting")); 
          }); 
      }); 
        
      $(document).ready(function() { 
          $("#btn7").click(function() { 
              var msg = ""; 
              msg += "jQuery height() Method<br>height of div: "
                  + $("#demo").height(); // height() 
              $("#demo").html(msg); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn8").click(function() { 
              var msg = ""; 
              msg += "InnerHeight() Method<br>Inner Height of div: " + $("#demo"). 
                      innerHeight() + "</br>";          // innerHeight() 
              $("#demo2").html(msg); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn9").click(function() { 
              alert("Outer height of div: "
                  + $("div").outerHeight());            // outerHeight() 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn10").click(function() { 
              var msg = ""; 
              msg += "width() Method<br>Width of div: " 
                 + $("#demo3").width();  // width() 
              $("#demo3").html(msg); 
          }); 
      }); 
      $(document).ready(function() { 
          $("b").click(function() { 
              document.getElementById("try").innerHTML = "innerWidth = "
                     + $("#division6").innerWidth();    // innerWidth() 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn12").click(function(){ 
              alert("Outer width of div: " 
              + $("div").outerWidth(true));             // outerWidth() 
          }); 
      }); 
      $(document).ready(function() { 
              $("p").click(function() { 
                  $("p").removeClass();                 // removeClass() 
              }); 
          }); 
          $(document).ready(function() { 
          $("#btn13").click(function() { 
              alert($("p").hasClass("find"));           // hasClass() 
          }); 
      }); 
      $(document).ready(function() { 
              $("#geek_btn").click(function() { 
                  $("section").toggleClass("style1");   // toggleClass() 
              }); 
          }); 
          $(document).ready(function() { 
              $("#btnClick").click(function() { 
                  alert($("main").scrollTop() + " px"); // scrollTop() 
              }); 
          }); 
          $(document).ready(function() { 
              $("#btnCheck").click(function() { 
                  $("aside").scrollLeft(100); 
              }); 
          }); 
   </script> 
   <style>
      #division1 { 
      width: 250px; 
      padding: 10px; 
      height: 130px; 
      border: 2px solid green; 
      }
      #division2 { 
      width: 300px; 
      min-height: 250px; 
      border: 2px solid green; 
      padding: 20px; 
      text-align:center; 
      }
      #division3 { 
      width: 400px; 
      min-height: 60px; 
      padding: 15px; 
      border: 2px solid green; 
      margin-bottom: 10px; 
      }
      #division4 { 
      background-color: lightgreen; 
      padding: 20px; 
      width: 41%; 
      min-height: 150px; 
      border: 2px solid green; 
      } 
      input { 
      border: 2px solid green; 
      padding-left: 15px; 
      width: 350px; 
      height: 80px; 
      }
      #b1, 
      #b2 { 
      padding: 10px; 
      margin: 20px; 
      background-color: green; 
      }
      #demo, #demo2, #demo3{ 
      height: 150px; 
      width: 350px; 
      padding: 10px; 
      margin: 3px; 
      border: 1px solid blue; 
      background-color: lightgreen; 
      } 
      .geeks { 
      height: 80px; 
      width: 200px; 
      padding: 5px; 
      margin: 5px; 
      border: 2px solid black; 
      background-color: green; 
      text-align: center; 
      } 
      .contain { 
      height: 200px; 
      width: 350px; 
      padding: 20px; 
      margin: 3px; 
      border: 3px solid green; 
      background-color: lightgreen; 
      } 
      em { 
      margin: 8px; 
      font-size: 35px; 
      } 
      .selected { 
      color:auqa ; 
      display: block; 
      border: 2px solid green; 
      width: 160px; 
      height: 60px; 
      background-color: lightgreen; 
      padding: 20px; 
      } 
      .GFG_Stuff { 
      font-size: 25px; 
      color: green; 
      font-weight: bold; 
      /* font-size: 35px; */
      }
      #stuff { 
      width: 300px; 
      height: 200px; 
      padding: 20px; 
      border: 2px solid green; 
      } 
      .find { 
      font-size: 120%; 
      color: green; 
      }
      #division7 { 
      width: 50%; 
      height: 200px; 
      border: 2px solid green; 
      padding: 20px; 
      } 
      .style1{ 
      font-size: 25px; 
      background-color: yellow; 
      min-height:120px; 
      } 
      section { 
      width: 200px; 
      min-height: 120px; 
      background-color: lightgreen; 
      padding: 20px; 
      font-weight: bold; 
      font-size: 20px; 
      } 
      main, aside { 
      border: 1px solid black; 
      width: 100px; 
      height: 150px; 
      overflow: auto; 
      } 
   </style> 
</head> 
<body> 
   <div id="division1"> 
      <i>Jquery Prop()</i> 
      <br><br> 
      <button id="btn1">Click Here!</button> 
   </div> 
   <hr> 
   <div id="division2"> 
      <h6>JQuery removeAttr() Method</h6> 
      <p style="font-size:35px; 
                   font-weight:bold; 
                color:green;"> 
            Welcome to 
        </p> 
      <p style="font-size:35px; 
                   font-weight:bold; 
                color:green;"> 
            GeeksforGeeks!. 
        </p> 
      <button id="btn2">Click Here!</button> 
   </div> 
   <hr> 
   <div id="division3"> 
        jQuery removeProp() Method 
      </div> 
   <button id="btn3">Click Here!</button> 
   <hr> 
   <div id="division4"> 
      jQuery val() & css() Methods 
      <p> 
         <input type="text" name="user"> 
      </p> 
      <button id="btn4">Click Here!</button> 
   </div> 
   <hr> 
   <h6>JQuery removeData() & data() Method</h6> 
   <button id="b1">Click here to add data to  
   div element</button> 
   <br> 
   <button id="b2">Click here to Remove data  
   from div element</button> 
   <div id="division5"></div> 
   <hr> 
   <p id="GFG_UP"></p> 
   <h3>This is Heading 3</h3> 
   <br> 
   <button onclick="Geeks()"> 
   Click here 
   </button>     
   <p id="GFG_DOWN"></p> 
   <script> 
      var el_up = document.getElementById("GFG_UP"); 
         var el_down = document.getElementById("GFG_DOWN"); 
         var $h3 = jQuery( "h3" ), h3 = $h3[ 0 ]; 
         el_up.innerHTML = "JQuery | hasData() method"; 
         $h3.on( "click", function() {} ); 
         function Geeks() { 
             el_down.innerHTML = jQuery.hasData(h3);   // hasData() 
         } 
   </script> 
   <hr> 
   <div id="demo"></div> 
   <button id="btn7">Click Me!!!</button> 
   <h6> 
        Click on the button and check the  
        height of the element(excluding padding). 
   </h6> 
   <hr> 
   <div id="demo2"></div> 
   <button id="btn8">Click Me!!!</button> 
   <h6> 
        Click on the button and check  
        the innerHeight of an element 
        (includes padding). 
   </h6> 
   <hr> 
   <div class="geeks"> 
      GeeksforGeeks 
   </div> 
   <button id="btn9"> 
        Click Here to display outer height 
      </button> 
   <hr> 
   <div id="demo3"></div> 
   <button id="btn10">Click Me!!!</button> 
   <p> 
        Click on the button and check  
        the width of the element (excluding padding). 
   </p> 
   <hr> 
   <h3>innerWidth() Method</h3> 
   <div id="division6" style="height: 100px; 
                          width: 200px;  
                  background-color: blue"> 
   </div> 
   <b>Click here to know innerWidth</b><br> 
   <b id="try"></b> 
   <hr> 
   <h5> 
      Outerwidth() Method 
   </h5> 
   <button id="btn12">outerwidth</button> 
   <div class="contain"></div> 
   <hr> 
   <em>GeeksforGeeks</em> 
   <em>jQuery</em> 
   <em>addClass() Method</em> 
   <script> 
      $("em").last().addClass("selected");    // addClass() 
   </script> 
   <hr> 
   <div id="stuff"> 
      <p class="GFG_Stuff">Welcome to GeeksforGeeks!</p> 
      <p class="GFG_Stuff">jQuery removeClass() Method</p> 
   </div> 
   <hr> 
   <div id="division7"> 
      <h1>Heading 1</h1> 
      <p class="find">GeeksforGeeks !.</p> 
      <p>This is hasClass() Method</p> 
      <button id="btn13">Click me!</button> 
   </div> 
   <hr> 
   <section> 
      <p>JQuery toggle() Method</p> 
      <p>Welcome to GeeksforGeeks.!</p> 
      <button id="geek_btn">Click Here!</button> 
   </section> 
   <hr> 
   <h6>jQuery scrollTop() method</h6> 
   <main> 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.  
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
   </main> 
   <br> 
   <button id="btnClick">Click Here !</button> 
   <hr> 
   <h6>jQuery scrollLeft() Method</h6> 
   <aside> 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.  
      Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. 
   </aside> 
   <br> 
   <button id="btnCheck">Click Here !</button> 
</body> 
</html> 

jQuery Manipulation: The different kinds of methods in jQuery can be used to manipulate the DOM. These methods can be categorized in 2 ways, namely:

Setters: In this case, some kinds of methods can be used to simply change the attributes of an element, whereas other kinds of methods set the element’s style properties. There are still a few other kinds of methods that can be used to modify entire elements or groups of elements themselves, by inserting, copying, removing, and so on, in order to change the values of properties.
Getters: In this case, few of the methods which acts as getter, such as .attr(), .html(), and .val(), etc., can be utilize to retrieve the information from DOM elements for further use.

The list of methods used for manipulates the DOM is given below:

Methods	Descriptions	Syntax
.append()	It is used to insert some content at the end of the selected elements.	$(selector).append( content, function(index, html) )
.appendTo()	It is an inbuilt method in jQuery that is used to insert an HTML element at the end of the selected element.	$(content).appendTo(selector)
.html()	It is used to set or return the innerHTML content of the selected element.	$(selector).html(function(index, currentcontent))
.prependTo()	It is an inbuilt method in jQuery that is used to insert HTML elements or some content at the beginning of the selected element.	$(content).prepend(selector)
.text()	It is used to set or return the text content of the element.	$(selector).text(function(index, currentcontent))
.clone()	It is an inbuilt method in jQuery that is used to make a copy of selected elements including its child nodes, text, and attributes.	$(selector).clone()
.insertBefore()	It is an inbuilt method in jQuery that is used to insert some HTML content before a specified element.	$(content).insertBefore(target)
.insertAfter()	It is used to insert some HTML content after a specified element.	$(content).insertAfter(target)
.detach()	It is an inbuilt method in jQuery that removes the selected elements from the DOM tree including all text and child nodes but it keeps the data and the events.	$(selector).detach()
.empty()	It is an inbuilt method in jQuery that is used to remove all child nodes and their content for the selected elements.	$(selector).empty()
.remove()	It is used to remove all the selected elements including all the text.	$(selector).remove()
.replaceWith()	It is an inbuilt method in jQuery that is used to replace the selected element with the new one.	$(selector).replaceWith(content, function)
.wrapAll()	It is an inbuilt method in jQuery that is used when the specified element will be wrapped against all the selected elements.	$(selector).wrapAll(wrap_element)

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script> 
   <!-- Script to append content --> 
   <script> 
      $(document).ready(function () { 
          $("#btn2").click(function () { 
              $("ol").append("<li>Append Gfg</li>");      // append() 
          }); 
      }); 
      $(document).ready(function () { 
          $("#btn4").click(function () { 
              $("<span>jQuery </span>").prependTo("#pid");// prependTo() 
          }); 
      }); 
      $(document).ready(function () { 
          $("#btn6").click(function () { 
              $("i").text(function (n) {                  // text() 
                  return "Index No. of Element: " + n; 
              }); 
          }); 
      }); 
      $(document).ready(function () { 
          $("#division3").click(function () { 
              // insertBefore() 
              $("<p>You should follow GeeksforGeeks</p>").insertBefore("#pid5"); 
          }); 
      }); 
      $(document).ready(function () { 
          $("#division5").click(function () { 
              // insertAfter 
              $("<p>You should follow GeeksforGeeks</p>").insertAfter("#pid7"); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn9").click(function() { 
              $("h4").detach();                           // detach() 
          }); 
      }); 
      $(document).ready(function() { 
              $("#btn12").click(function() { 
                  $("article").empty();                   // empty() 
              }); 
          }); 
          $(document).ready(function() { 
          $("#btnchk1").click(function() { 
              $("#pid10").remove();                       // remove() 
          }); 
      }); 
      $(document).ready(function() { 
              $("#wrapBtn").click(function() { 
                  $("#wrapContent").wrapAll("<h3></h3>"); // wrapAll() 
              }); 
          }); 
   </script> 
   <style>
      #hel { 
      background: lightgreen; 
      display: block; 
      border: 2px solid green; 
      padding: 10px; 
      width: 300px; 
      }
      #division1 { 
      width: 350px; 
      min-height: 180px; 
      font-weight: bold; 
      padding: 20px; 
      font-size: 25px; 
      border: 2px solid green; 
      } 
      main{ 
      display: block; 
      width: 400px; 
      height: 250px; 
      padding: 20px; 
      border: 2px solid green; 
      font-size: 25px; 
      }
      #paragraph { 
      width: 200px; 
      height: 100px; 
      margin: 10px; 
      padding: 20px; 
      background-color: lightgreen; 
      font-weight: bold; 
      font-size: 20px; 
      } 
      .btnchange { 
      display: block; 
      margin: 10px; 
      color: red; 
      width: 200px; 
      padding: 3px; 
      } 
      h5 { 
      color: green; 
      border: 2px solid green; 
      width: 200px; 
      margin: 3px; 
      padding: 5px; 
      font-size: 20px; 
      text-align: center; 
      } 
      h3 { 
      background-color: lightgreen; 
      padding: 20px; 
      width: 200px; 
      font-weight: bold; 
      height: 60px; 
      border: 2px solid green; 
      } 
   </style> 
</head> 
<body> 
   <h1 style="margin-left: 150px;">Geeks</h1> 
   <p>GeeksforGeeks</p> 
   <p>jQuery append() Method</p> 
   <ol> 
      <li>Gfg 1</li> 
      <li>Gfg 2</li> 
      <li>Gfg 3</li> 
   </ol> 
   <button id="btn2">Append Gfg</button> 
   <hr> 
   <span>appendTo() Method</span> 
   <div id="hel">jQuery </div> 
   <script> 
      $("span").appendTo("#hel");                          // appendTo() 
   </script> 
   <hr> 
   <h2> 
      jQuery html() Method 
   </h2> 
   <button id="btnclk">Click</button> 
   <script> 
      $(document).ready(function () { 
          $("#btnclk").click(function () { 
              $("h2").html("Hello <b>GEEKS!</b>");          // html() 
          }); 
      }); 
   </script> 
   <hr> 
   <p id="pid">prependTo() Method</p> 
   <button id="btn4">Click Here!</button> 
   <hr> 
   <i>GeeksforGeeks</i> 
   <i>jQuery text() Method</i> 
   <button id="btn6">Click me</button> 
   <hr> 
   <script> 
              $(document).ready(function () { 
                  $("#btn7").click(function () { 
                      $("em").clone().appendTo("section");   // clone() 
                  }); 
              }); 
            
   </script> 
   <section> 
      <em>jQuery </em> 
      <em>clone() Method</em> 
      <button id="btn7">Click Me!</button> 
   </section> 
   <hr> 
   <p id="pid5">To learn jQuery insertBefore() Method </p> 
   <div id="division3">Click here to complete</div> 
   <hr> 
   <p id="pid7">To learn jQuery insertAfter() Method </p> 
   <div id="division5">Click here to complete</div> 
   <hr> 
   <main> 
      <div> This is the div part !</div> 
      <br> 
      <h4>jQuery detach() Method</h4> 
      <h4>This is the heading tag</h4> 
      <button id="btn9">Click Me</button> 
   </main> 
   <hr> 
   <article> 
      <p id="paragraph">jQuery <span> empty() Method</span>.</p> 
      <button id="btn12">Click here</button> 
   </article> 
   <hr> 
   <p id="pid10">jQuery remove() Method</p> 
   <button id="btnchk1">Click</button> 
   <hr> 
   <button class="btnchange">Geeks</button> 
   <button class="btnchange">for</button> 
   <button class="btnchange">Geeks</button> 
   <script> 
      $(".btnchange").click(function() { 
          $(this).replaceWith("<h5>" + $(this).text() + "</h5>"); // replaceWith() 
      }); 
   </script> 
   <hr> 
   <p id="wrapContent">jQuery wrapAll() Method<br><br> 
      <button id="wrapBtn">Click Here!</button> 
   </p> 
</body> 
</html> 

jQuery Traversing: In jQuery, traversing means moving through or over the HTML elements to find, filter, or select a particular or entire element. Based on the traversing, the list of following methods is given below:

Methods	Descriptions	Syntax
.children()	It is an inbuilt method in jQuery that is used to find all the children element related to that selected element.	$(selector).children()
.next()	It is an inbuilt function in jQuery that is used to return the next sibling of the selected element.	$(selector).next()
.closest()	It is an inbuilt method in jQuery that returns the first ancestor of the selected element in the DOM tree.	$(selector).closest(parameters);
.parent()	It is an inbuilt method in jQuery that is used to find the parent element related to the selected element.	$(selector).parent()
.prevUntil()	It is an inbuilt method in jQuery that is used to find all the previous sibling elements between two given elements.	$(selector1).nextUntil(selector2)
.siblings()	It is an inbuilt method in jQuery which is used to find all siblings elements of the selected element.	$(selector).siblings(function)
.first()	It is an inbuilt function in jQuery which is used to select the first element from the specified elements.	$(selector).first()
.last()	It is an inbuilt function in jQuery which is used to find the last element of the specified elements.	$(selector).last()
.is()	It is used to check if one of the selected elements matches the selectorElement.	$(selector).is(selectorElement, function(index, element))
.map()	It is used to translate all items in an array or object to a new array of items.	jQuery.map( array/object, callback )
.filter()	It is used to filter out all the elements that do not match the selected criteria and those matches will be returned.	$(selector).filter(criteria, function(index))
.not()	It is an inbuilt function in jQuery that will return all the element which is not matched with the selected element with the particular “id” or “class”.	$(selector).not(A)
.andSelf()	It is an inbuilt method in jQuery that is used to add the previous set of elements to the current set.	andSelf( )(selector);
.each()	It is used to specify the function to run for each matched element.	$(selector).each(function(index, element))
.find()	It is an inbuilt method in jQuery that is used to find all the descendant elements of the selected element.	$(selector).find()

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script> 
   <!-- CSS is used to decorate the output  --> 
   <style> 
      .descendants *{ 
      display: block; 
      border: 2px solid lightgrey; 
      color: grey; 
      padding: 5px; 
      margin: 15px; 
      } 
      .next * { 
      display: block; 
      border: 2px solid lightgrey; 
      color: black; 
      padding: 5px; 
      margin: 15px; 
      } 
      .main *, .main_div * { 
      display: block; 
      border: 2px solid lightgrey; 
      color: grey; 
      padding: 5px; 
      margin: 15px; 
      } 
      .sib1 *, .sib2 * { 
      display: block; 
      border: 2px solid lightgrey; 
      color: black; 
      padding: 5px; 
      margin: 15px; 
      } 
   </style> 
   <script> 
      $(document).ready(function() { 
          $(".descendants").children("p.first").css({   // children() 
              "color": "green", 
              "border": "2px solid green"
          }); 
      }); 
      $(document).ready(function() { 
          $("h3").next().css({                          // next() 
              "color": "black", 
              "border": "2px solid green"
          }); 
      }); 
      $(document).ready(function() { 
          $("span").closest("ul").css({                 // closest() 
              "color": "green", 
              "border": "2px solid green"
          }); 
      }); 
      $(document).ready(function() { 
          $("#inner").parent().css({                     // parent() 
              "color": "green", 
              "border": "2px solid green"
          }); 
      }); 
      $(document).ready(function() { 
          $("li.start").prevUntil("li.stop").css({       // prevUntil() 
              "color": "black", 
              "border": "2px solid green"
          }); 
      }); 
      $(document).ready(function() { 
          $("h2").siblings().css({                       // siblings() 
              "color": "black", 
              "border": "2px solid green"
          }); 
      }); 
      $(document).ready(function() { 
          $("#division1").first().css("background-color",// first() 
                                "lightgreen"); 
      }); 
      $(document).ready(function(){ 
          $("#division2").last() 
          .css("background-color", "lightblue");         // last() 
       }); 
       $(document).ready(function() { 
          $("h6").click(function() { 
              if ($("h6").parent().is("#division3")) {   // is() 
                  alert("Parent of <h6> is <section>"); 
              } 
          }); 
      }); 
      $(document).ready(function() { 
          $("li").filter("#first, #last") 
          .css("color", "red");                          // filter() 
      }); 
      $(document).ready(function() { 
      $("h5").not("#main_content") 
      .css("color", "green") 
      .css("font-size","25px");                          // not() 
      }); 
        
   </script> 
</head> 
<body> 
   <h3>jQuery children() Method</h3> 
   <div class="descendants" 
   style="width:500px;"> 
      This is the current element !!! 
      <p class="first"> 
          This is the first paragraph element !!! 
         <span>This is grandchild</span> 
      </p> 
      <p class="second"> 
          This is the second paragraph element !!! 
         <span>This is grandchild</span> 
      </p> 
   </div> 
   <hr> 
   <div class="next"> 
      This is parent element ! 
      <p>This is first paragraph </p> 
      <span>first span box </span> 
      <h2>heading 2 !</h2> 
      <h3>jQuery next() Method</h3> 
      <p>This is the second paragraph and next 
         sibling to h3 ! 
      </p> 
   </div> 
   <hr> 
   <div class="main" style="width:600px;"> 
      This is great grand parent element ! 
      <ul> 
         This is the second ancestor element ! 
         <ul> 
            This is first ancestor element ! 
            <li>This is direct parent ! 
               <span>jQuery closest() Method</span> 
            </li> 
         </ul> 
      </ul> 
   </div> 
   <hr> 
   <div class="main_div"> 
      <div style="width:500px;"> 
         div (Great-Grandparent) 
         <ul> 
            This is the grand-parent of the 
            selected span element.! 
            <li> 
                This is the parent of the  
                selected span element.! 
                <span>jQuery parent() Method</span> 
            </li> 
         </ul> 
      </div> 
   </div> 
   <hr> 
   <div style="width:400px;" class="sib1"> 
      <ul> 
         This is parent !!! 
         <li class="stop">list 1 !!!</li> 
         <li>jQuery prevUntil() Method</li> 
         <li>first list !</li> 
         <li>second list !</li> 
         <li class="start">list 5 !!!</li> 
         <li>other sibling</li> 
         <li>other sibling</li> 
      </ul> 
   </div> 
   <hr> 
   <div  class="sib2"> 
      This is parent!!! 
      <p>This is paragraph!!!</p> 
      <span>This is span box!!!</span> 
      <h2>jQuery siblings() Method</h2> 
      <h3>This is heading 3!</h3> 
   </div> 
   <hr> 
   <div id="division1" 
        style="border: 1px solid green;"> 
      <p>jQuery first() Method</p> 
   </div> 
   <br> 
   <div style="border: 1px solid green;"> 
      <p>This is the second statement.</p> 
   </div> 
   <br> 
   <div id="division2" 
        style="border: 1px solid green;"> 
      <p>jQuery last() Method</p> 
   </div> 
   <hr> 
   <section id="division3"> 
      <h6 id="pid"> 
          jQuery is() Method - Click me to 
          find out if I my parent is a section 
          element. 
      </h6> 
   </section> 
   <hr> 
   <h3>jQuery map() method</h3> 
   <b>String = "GeeksforGeeks"</b> 
   <br> 
   <br> 
   <button onclick="geek()">Click</button> 
   <br> 
   <br> 
   <b id="root"></b> 
   <script> 
      function geek() { 
          var el = document.getElementById('root'); 
          var name = "GeeksforGeeks"; 
          name = name.split(""); 
        
          var newName = jQuery.map(name, function(item) { // map() 
              return item + 'G<br>'; 
          }) 
          el.innerHTML = newName; 
      } 
   </script> 
   <hr> 
   <ul> 
      <li id="first">jQuery filter() Method</li> 
      <li id="middle">GeeksforGeeks</li> 
      <li id="last">GeeksforGeeks</li> 
   </ul> 
   <hr> 
   <h5 id="main_content">GeeksforGeeks.!!!</h5> 
   <h5>This is jQuery not() Method.</h5> 
   <hr> 
</body> 
</html> 

jQuery Events: Event refers to the actions performed by the site visitor during their interactivity with the website (or webpage). An event can be any of the types which may include the button clicks, mouse pointer movement over the image, any key pressed from the keyboard, etc. The list of the following events with their descriptions is given below:

Events	Descriptions	Syntax
.error()	It is used when an element encounters an error that is the element is not loaded correctly. It also attaches a function to run when an error event occurs or it triggers the error event.	$(selector).error()
.resize()	It is an inbuilt method in jQuery which is used when the browser window change its size.	$(selector).resize(function)
.scroll()	It is an inbuilt method in jQuery which is used to user scroll in the specified element.	$(selector).scroll(function)
.ready()	It is an inbuilt method in jQuery which helps to load the whole page then execute the rest code.	$(document).ready(function)
.unload()	It is used to perform unload event when the user try navigates away from current webpage.	$(selector).unload(function)
.load()	It is a simple but very powerful AJAX method. It helps to load data from the server and returned it to the selected element without loading the whole page.	$(selector).load(URL, data, callback);
.die()	This method added with live() method, used to removes one or more event handlers, for selected elements.	$(selector).die(event, function)
.bind()	It is an inbuilt method in jQuery that is used to attach one or more event handlers for selected elements and this method specifies a function to run when an event occurs.	$(selector).bind(event, data, function);
.trigger()	It is a method in jQuery which is used to trigger a specified event handler on selected element.	$(selector).trigger(event,parameters)
.triggerHandler()	It is used to trigger a specified event for the selected element.	$(selector).triggerHandler(event, param1, param2, …)
.on()	It is an inbuilt method in jQuery that is used to attach one or more event handlers for the selected elements and child elements in the DOM tree.	$(selector).on(event, childSelector, data, function)
.off()	It is used to remove event handlers attached with the on() method.	$(selector).off(event, selector, function(eventObj), map)
.one()	It is an inbuilt method in jQuery that attaches one or more event handlers for the selected element.	$(selector).one(event, data, function)
.unbind()	It is an inbuilt method in jQuery that is used to remove any selected event handlers. This method can be used to remove a particular event handler or stop specific functions. It works on any event handler using an event object.	$(selector).unbind(event, function, eventObj)
.blur()	It is an inbuilt method is jQuery that is used to remove focus from the selected element.	$(selector).blur(function)
.focus()	It is an inbuilt method in jQuery which is used to focus on an element.	$(selector).focus(function)
.focusin()	It is an inbuilt method in jQuery which is used to gain focus on the selected element.	$(selector).focusin(function);
.focusout()	It is an inbuilt method in jQuery which is used to remove focus from the selected element.	$(selector).focusout(function);
.change()	It is an inbuilt method in jQuery that is used to detect the change in value of input fields.	$(selector).change(function)
.keydown()	It is an inbuilt method in jQuery that is used to trigger the keydown event whenever the User presses a key on the keyboard.	$(selector).keydown(function)
.keypress()	This method in jQuery triggers the keypress event whenever browser registers a keyboard input.	$(selector).keypress()
.keyup()	It is an inbuilt method in jQuery which is used to trigger the keyup event whenever User releases a key from the keyboard.	$(selector).keyup(function)
.click()	It is an inbuilt method in jQuery that starts the click event or attach a function to run when a click event occurs.	$(selector).click(function);
.hover()	It is an inbuilt method in jQuery which is used to specify two functions to start when mouse pointer moves over the selected element.	$(selector).hover(Function_in, Function_out);
.toggle()	It is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements.	$(selector).toggle(speed, easing, callback)
.mouseover()	It is an inbuilt method in jQuery which works when mouse pointer moves over the selected elements.	$(selector).mouseover(function)
event.stopPropagation()	It is an inbuilt method in jQuery that is used to stop the windows propagation. In the DOM tree, when setting an event with the child element and the parent element as well then if you hit on the child element event, it will call both the child and the parent element as well.	event.stopPropagation()
event.preventDefault()	It is used to stop the default action of the selected element to occur. It is also used to check whether the preventDefault() method is called for the selected element or not.	event.preventDefault()

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script> 
   <style> 
      section { 
      width: 50%; 
      height: 40%; 
      padding: 20px; 
      border: 2px solid green; 
      font-size: 20px; 
      } 
      .main { 
      border:1px solid green; 
      padding:20px; 
      width:60%; 
      } 
      main { 
      width: 280px; 
      padding: 40px; 
      height: 30px; 
      border: 2px solid green; 
      font-weight: bold; 
      font-size: 20px; 
      }
      #gfg_content { 
      color: green; 
      border: 5px solid black; 
      width: 200px; 
      text-align: center; 
      } 
      h5 { 
      width: 35%; 
      height: 90px; 
      padding: 20px; 
      margin: 10px; 
      border: 2px solid green; 
      font-size: 50px; 
      text-align: center; 
      }
      #division4 { 
      border: 2px solid black; 
      width: 50%; 
      padding: 20px; 
      }
      #intak { 
      padding: 5px; 
      margin: 10px; 
      } 
      span { 
      display: none; 
      }
      #division8 { 
      width: 35%; 
      height: 50px; 
      border: 2px solid green; 
      padding: 35px; 
      margin: 10px; 
      } 
      .para { 
      margin: auto; 
      width: 80%; 
      border: 3px solid green; 
      padding: 10px; 
      text-align:justify; 
      } 
      .gfg_content1 { 
      font-size:40px; 
      color:green; 
      font-weight:bold; 
      text-align:center; 
      } 
      .geeks_content1 { 
      font-size:17px; 
      text-align:center; 
      }
      #division15 { 
      width: 300px; 
      height: 100px; 
      border: 1px solid green; 
      text-align: center; 
      }
      #press_id { 
      display: block; 
      padding: 50px; 
      width: 280px; 
      border: 2px solid green; 
      } 
      .gfg_style { 
      font-size:40px; 
      font-weight: bold; 
      color: green; 
      }
      #div_content { 
      font-size: 40px; 
      font-weight: bold; 
      color: green; 
      } 
      aside  { 
      width: 150px; 
      height: 150px; 
      padding: 20px; 
      border: 2px solid green; 
      font-size: 20px; 
      } 
   </style> 
   <script> 
      $(document).ready(function() { 
          $("a").click(function(event) { 
              event.preventDefault();                 // preventDefault() 
              alert("The required page will not be open"); 
          }); 
      }); 
      $(document).ready(function() { 
          $(".main").click(function() { 
              alert("Main div element"); 
          }); 
          $(".GFG").click(function(event) { 
              event.stopPropagation();                // stopPropagation() 
              alert("Nested div element");  
          }); 
          $(".geeks").click(function(event) { 
              alert("Second nested div element"); 
          }); 
      }); 
      $(document).ready(function() { 
              $("#pid2").mouseover(function() {       // mouseover() 
                  $("#pid2").css("color", "lightgreen"); 
              }); 
          }); 
          $(document).ready(function() { 
          $("#btn2").click(function() { 
              $("#gfg_content").toggle();             // toggle() 
          }); 
      }); 
      $(document).ready(function() { 
          $("h5").hover(function() {                  // hover() 
              $(this).css("color", "green"); 
          }, function() { 
              $(this).css("color", "yellow"); 
          }); 
      }); 
      $(document).ready(function() { 
          $("h5").click();                            // click() 
      }); 
      $(document).keyup(function(event) {             // keyup 
        
      alert('You released a key'); 
      }); 
      $(document).keypress(function(event){           // keypress 
        
      alert('You pressed a key');     
      }); 
      $(document).keydown(function(event) {           // keydown 
        
      alert('You pressed down a key'); 
      }); 
      $(document).ready(function() { 
          $("#btn6").click(function() { 
              $("input").change();                    // change() 
          }); 
      }); 
      $(document).ready(function() { 
          $("#division4").focusin(function() {        // focusin() 
              $(this).css("font-size", "20px"); 
          }); 
          $("#division4").focusout(function() {       // focusout() 
              $(this).css("font-size", "35px"); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#blur_intak").blur(function() {          // blur() 
              $(this).css("font-weight", "bold"); 
          }); 
      }); 
      $(document).ready(function() { 
              $("em").one("click", function() {       // one() 
                  $(this).animate({ 
                      fontSize: "+=14px"
                  }); 
              }); 
          }); 
          $(document).ready(function() {              // ready() 
          $("h3").on("click", function() {            // on() 
              $(this).css("font-size", "25px"); 
          }); 
               
          $("#btn12").click(function() { 
              $("h3").off("click");                   // off() 
          }); 
      }); 
      $(document).ready(function() { 
          $("#press_id").bind("click", function() {   // bind() 
              alert("Given paragraph was clicked."); 
          }); 
      }); 
      $(document).ready(function(){ 
              $("#chngtxt").click(function(){ 
                  $("#div_content").load("demo.txt"); // load() 
              }); 
          }); 
          x = 0; 
          $(document).ready(function() { 
              $(window).resize(function() {           // resize() 
                  $("#chngnum").text(x += 1); 
              }); 
          }); 
   </script> 
</head> 
<body> 
   <section> 
      <a href= 
"https://www.geeksforgeeks.org/jquery-event-preventdefault-method/"> 
      jQuery event.preventDefault() Method 
      </a> 
   </section> 
   <hr> 
   <div class="main"> 
      GeeksforGeeks 
      <div class="GFG"> 
         A computer science portal 
         <div class="geeks"> 
            jQuery event.stopPropagation() Method 
         </div> 
      </div> 
   </div> 
   <hr> 
   <main> 
      <p id="pid2">jQuery mouseover() Method</p> 
   </main> 
   <hr> 
   <div id="gfg_content">jQuery toggle() Method</div> 
   <button id="btn2"> 
       Click to hide() and show() the above div 
   </button> 
   <hr> 
   <h5  onclick="alert('heading was clicked')"> 
       jQuery hover() & click() Method 
   </h5> 
   <hr> 
   <i id="press"> 
       jQuery keyup(), keypress(), Keydown() Method  
   </i> 
   <hr> 
   <b>jQuery change() Method</b> 
   Enter value: 
   <input value="Donald" onchange="alert(this.value)"
      type="text"> 
   <button id="btn6">Click Me!</button> 
   <hr> 
   <div id="division4"> 
      <h6>jQuery focusout() & focusin() Method</h6> 
      Enter name: 
      <input id="intak" type="text"> 
      <br> 
   </div> 
   <hr> 
   <div id="division8"> 
      <h6>jQuery focus() Method</h6> 
      <p> 
         <input id="infocus" type="text">  
         <span>focused</span> 
      </p> 
   </div> 
   <script> 
      $("#infocus").focus(function() {           // focus() 
          $(this).next("span").css("display", "inline"); 
      }); 
   </script> 
   <hr> 
   <div id="division12"> 
      <h6>jQuery blur() Method</h6> 
      Enter Value: 
      <input id="blur_intak" 
             type="text"
             name="fullname"> 
   </div> 
   <hr> 
   <h1 style = "color:green;" >   
      jQuery unbind() Method 
   </h1> 
   <button id="btn8">  
   Click Here  
   </button> 
   <script> 
      $(document).ready(function() { 
          $("h1").click(function() { 
              $(this).slideToggle(); 
          }); 
               
          $("#btn8").click(function() { 
              $("h1").unbind();                 // unbind() 
          }); 
      }); 
   </script> 
   <hr> 
   <div class = "para"> 
      <h6>jQuery one() Method</h6> 
      <div class = "gfg_content1"> 
          GeeksforGeeks 
      </div> 
      <div class = "geeks_content1"> 
          A computer science portal for geeks 
      </div> 
      <em> 
          Prepare for the Recruitment drive of product 
          based companies like Microsoft, Amazon, Adobe 
          etc with a free online placement preparation 
          course. 
      </em> 
      <em> 
          An extensive Online Test Series for GATE 2019 
          to boost the preparation for GATE 2019 aspirants. 
          Test series is designed considering the pattern  
          of previous years GATE papers and ensures to  
          resemble with the standard of GATE. 
      </em> 
   </div> 
   <hr> 
   <h3>jQuery off(), on() & ready() Method</h3> 
   <button id="btn12"> 
   Click to remove event handler 
   </button> 
   <hr> 
   <h4 style = "color:green;" >   
      GeeksforGeeks 
   </h4> 
   <h6>jQuery triggerHandler() Method</h6> 
   <input id="clk" 
          type="text" 
          value="HELLO GEEKS"> 
   <br><br> 
   <button id="btnchk">Click</button> 
   <script> 
      $(document).ready(function(){ 
          $("#clk").select(function(){ 
              $("#clk").after(" TRIGGERED!"); 
          }); 
          $("#btnchk").click(function(){ 
              $("#clk").triggerHandler("select"); // triggerHandler() 
          }); 
      }); 
   </script> 
   <hr> 
   <div id="division15"> 
      <input id="change" type="text"
         placeholder="Input text..."/> 
      <br/> 
      <strong> 
          jQuery trigger() Method -  
          click anywhere inside div to 
          focus input element. 
      </strong> 
   </div> 
   <script> 
      $(document).ready(function() { 
          $("#division15").click(function() { 
              $("#change").trigger("focus");      // trigger() 
          }) 
      }); 
   </script> 
   <hr> 
   <p id="press_id"> 
       jQuery bind() Method - Click Me 
   </p> 
   <hr> 
   <div id="div_content"> 
      <div class = "gfg_style"> 
          jQuery load() Method 
      </div> 
   </div> 
   <button id="chngtxt">Change Content</button> 
   <hr> 
   <aside> 
      jQuery resize() Method 
      <br> 
      <p id="chngnum">0</p> 
      times. 
   </aside> 
</body> 
</html> 

jQuery Effects: There are several techniques through which the animation can be implemented on a web page, which are facilitated by the jQuery library. These may include simple or standard animations to customize with sophisticated custom effects. There are various jQuery Effects that can be implemented to customize the effect, which is listed below:

Effects	Descriptions	Syntax
.hide()	It is an inbuilt method in jQuery used to hide the selected element.	$(selector).hide(duration, easing, call_function);
.show()	This method in jQuery is used to display the hidden and selected elements.	$(selector).show( speed, easing, callback )
.toggle()	It is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements.	$(selector).toggle(speed, easing, callback)
.animate()	It is an inbuilt method in jQuery that is used to change the state of the element with CSS style.	(selector).animate({styles}, para1, para2, para3);
.delay()	It is an inbuilt method in jQuery which is used to set a timer to delay the execution of the next item in the queue.	$(selector).delay(para1, para2);
.finish()	It is an inbuilt method in jQuery which is used to stop the animations running at the present time.	$(selector).finish();
.clearQueue()	This method removes all items from the queue that have not yet been run. Note that when a function has started to run, it runs until it is completed.	$(selector).clearQueue(name);
.dequeue()	It is an inbuilt method in jQuery which is used to remove the next function from the queue and then it will execute the function.	$(selector).dequeue(name);
.fadeIn()	This method is used to change the opacity of selected elements from hidden to visible. The hidden elements will not be display.	$(selector).fadeIn( speed, easing, callback )
.fadeOut()	This method in jQuery is used to change the level of opacity for selected element from visible to hidden.	$(selector).fadeOut( speed, easing, callback )
.fadeTo()	This is an inbuilt method in jQuery that is used to change the opacity of the selected element.	$(selector).fadeTo(speed, opacity, easing, call_function)
.fadeToggle()	This method in jQuery toggles between the fadeIn() and fadeOut() methods.	$(selector).fadeToggle(speed, easing, callback)
.queue()	This method is an inbuilt method in jQuery that is used to show the queue of functions to be executed on the selected elements.	$(selector).queue(queue_name)
.stop()	This method is an inbuilt method in jQuery that is used to stop the currently running animations for the selected element.	$(selector).stop(stopAll, goToEnd);

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
   </script> 
   <!-- jQuery code to show the working of this method --> 
   <script> 
      $(document).ready(function() { 
          $(".b1").click(function() { 
              $("h3").hide(); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn1").click(function() { 
              $("#gfg_toggle").toggle(); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#b1").click(function() { 
              $("#box").animate({ 
                  width: "300px"
              }); 
              $("#box").animate({ 
                  height: "300px"
              }); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btn3").click(function() { 
              $("#d1").delay("slow").fadeIn(); 
              $("#d2").delay("fast").fadeIn(); 
              $("#d3").delay(1000).fadeIn(); 
              $("#d4").delay(4000).fadeIn(); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#b12").click(function() { 
              $("#division5").animate({ 
                  height: 200 
              }, 4000); 
              $("#division5").animate({ 
                  width: 200 
              }, 4000); 
          }); 
          $("#b22").click(function() { 
              $("#division5").finish(); 
          }); 
      }); 
      $(document).ready(function() { 
          $(".clk1").click(function() { 
              $(".pid").animate({ 
                  borderRightWidth: "5px"
              }); 
              $(".pid").animate({ 
                  borderTopWidth: "5px"
              }); 
              $(".pid").animate({ 
                  borderLeftWidth: "5px"
              }); 
              $(".pid").animate({ 
                  borderBottomWidth: "5px"
              }); 
          }); 
          $(".clk2").click(function() { 
              $(".pid").clearQueue(); 
          }); 
      }); 
      $(document).ready(function() { 
          $("#btnclk").click(function() { 
              $("#pid7").fadeTo(2000, 0.2, function() { 
                  alert("The fadeTo effect has finished!"); 
              }); 
          }); 
      }); 
   </script> 
   <style>
      #division1 { 
      width: 50%; 
      height: 80px; 
      padding: 20px; 
      margin: 10px; 
      border: 2px solid green; 
      font-size: 30px; 
      } 
      .b1 { 
      margin: 10px; 
      }
      #Outer { 
      border: 1px solid black; 
      padding-top: 40px; 
      height: 140px; 
      background: green; 
      display: none; 
      }
      #gfg_toggle { 
      color: green; 
      border: 5px solid black; 
      width: 200px; 
      text-align: center; 
      }
      #box { 
      width: 100px; 
      height: 100px; 
      background-color: green; 
      }
      #b1 { 
      margin-top: 10px; 
      }
      #division5 { 
      background: green; 
      height: 100px; 
      width: 100px; 
      padding: 30px; 
      } 
      .pid { 
      display: block; 
      width: 150px; 
      border: 1px solid green; 
      padding: 10px; 
      }
      #container { 
      border: 1px solid black; 
      padding-top: 40px; 
      height: 140px; 
      background: green; 
      display: none; 
      } 
      section { 
      width: 40%; 
      height: 100px; 
      border: 2px solid green; 
      padding: 20px; 
      }
      #division11 { 
      border: 1px solid black; 
      padding-top: 40px; 
      height: 140px; 
      background: green; 
      display: none; 
      } 
   </style> 
</head> 
<body> 
   <div id="division1"> 
      <h3>jQuery hide() Method</h3> 
   </div> 
   <button class="b1">Click me !</button> 
   <hr> 
   <div id= "Outer"> 
      <h1 style = "color:white;" >   
         jQuery Effect show() Method   
      </h1> 
   </div> 
   <br> 
   <button id = "btn">  
   Show 
   </button>        
   <script>  
      $(document).ready(function() { 
          $("#btn").click(function() { 
              $("#Outer").show(1000); 
          }); 
      }); 
   </script> 
   <hr> 
   <div id="gfg_toggle">jQuery toggle() Method</div> 
   <button id="btn1"> 
       Click to hide() and show() the above div 
   </button> 
   <hr> 
   <div id="box">jQuery animate() Method</div> 
   <button id="b1">Click Here !</button> 
   <hr> 
   <h6>jQuery delay() Method</h6> 
   <button id="btn3">Click Me!</button> 
   <br> 
   <br> 
   <div id="d1" 
        style="width:50px; 
               height:50px; 
               display:none; 
               background-color:lightgreen;"> 
   </div> 
   <br> 
   <div id="d2" 
        style="width:50px; 
               height:50px; 
               display:none; 
               background-color:green;"> 
   </div> 
   <br> 
   <div id="d3" 
        style="width:50px; 
               height:50px; 
               display:none; 
               background-color:orange;"> 
   </div> 
   <br> 
   <div id="d4" 
        style="width:50px; 
               height:50px; 
               display:none; 
               background-color:yellow;"> 
   </div> 
   <hr> 
   <h6>jQuery finish() Method</h6> 
   <div id="division5"></div> 
   <p> 
      <button id="b12">Start </button> 
      <button id="b22">Stop</button> 
   </p> 
   <hr> 
   <p class="pid">jQuery clearQueue() Method</p> 
   <button class="clk1">Start</button> 
   <button class="clk2">Stop</button> 
   <hr> 
   <h2>jQuery fadeOut() & fadeIn() Method</h2> 
   <button class="btn11">Fade out</button> 
   <button class="btn13">Fade in</button> 
   <script> 
      $(document).ready(function(){ 
          $(".btn11").click(function(){ 
              $("h2").fadeOut(1000); 
          }); 
               
          $(".btn13").click(function(){ 
              $("h2").fadeIn(1000); 
          }); 
      }); 
   </script> 
   <hr> 
   <section> 
      <p id="pid7">jQuery fadeTo() Method</p> 
      <button id="btnclk">Click me</button> 
   </section> 
   <hr> 
   <div id= "division11"> 
      <h1 style = "color:white;" >   
         jQuery fadeToggle() Method 
      </h1> 
   </div> 
   <br> 
   <button id = "btn21">  
   Fade Toggle 
   </button>  
   <script>  
      $(document).ready(function() { 
          $("#btn21").click(function() { 
              $("#division11").fadeToggle(1000); 
          }); 
      }); 
   </script>  
</body> 
</html> 

jQuery AJAX: The jQuery library provides various methods & functions for AJAX functionality that allows the loading of the data from the server without refreshing the browser page. AJAX operates on the client-side for creating asynchronous web applications. There are some of the jQuery AJAX methods that are used to request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post, which are listed below:

Methods	Descriptions	Syntax
jQuery.ajax()	It is used to perform an AJAX request or asynchronous HTTP request.	$.ajax({name:value, name:value, … })
jQuery.ajaxSetup()	It is used to set the default values for future AJAX requests.	$.ajaxSetup( {name:value, name:value, … } )
jQuery.get()	This method loads data from the server by using the GET HTTP request. This method returns XMLHttpRequest object.	$.get( url, [data], [callback], [type] )
jQuery.getJSON()	This method in jQuery fetches JSON-encoded data from the server using a GET HTTP request.	$(selector).getJSON(url,data,success(data,status,xhr))
jQuery.getScript()	This method in jQuery is used to run JavaScript using AJAX HTTP GET request.	$(selector).getScript(url, success(response, status))
jQuery.param()	This method in jQuery is used to create a serialized representation of an object.	$.param( object, trad )
jQuery.post()	This method in jQuery loads the page from the server using a POST HTTP request and returns an XMLHttpRequest object.	$.post( url, data, callback_function, data_type )
.ajaxComplete()	This method is used to specify the functions to be run when an AJAX request completes.	$(document).ajaxComplete(function(event, xhr, options))
.ajaxError()	It method in jQuery is used to specify functions to be run when an AJAX request fails.	$(document).ajaxError( function(event, xhr, options, exc) )
.ajaxStart()	This method is used to specify functions to be run when an AJAX request starts.	$(document).ajaxStart(function())
.ajaxStop()	This method is used to specify functions to be run when AJAX requests have been completed.	$(document).ajaxStop(function())
.load()	This method in jQuery helps to load data from server and returned into selected element without loading the whole page.	$(selector).load(URL, data, callback);
.serialize()	It is an inbuilt method in jQuery which is used to create a text string in standard URL-encoded notation.	$(selector).serialize()
.serializeArray()	It is an inbuilt method in jQuery that is used to create a JavaScript array of objects that is ready to be encoded as a JSON string.	$(selector).serializeArray()

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
   <script> 
      $(document).ready(function () { 
          $("#driver").click(function (event) { 
              $.get(        //get() Method 
                  "result.php", { 
                  name: "GFG"
              }, 
                  function (data) { 
                      $('#stage').html(data); 
                  }); 
          }); 
      }); 
      $(document).ready(function () { 
          $("#fetch").click(function (event) { 
              $.getJSON('empData.json', function (cmp) {    // getJSON() 
                  $('#display').html('<p> Name: ' + cmp.name + '</p>'); 
                  $('#display').append('<p>Location : ' + cmp.location + '</p>'); 
                  $('#display').append('<p> Industry Type: ' + cmp.industrytype + '</p>'); 
              }); 
          }); 
      }); 
        
      $(document).ready(function () { 
        
          $("#show").click(function (event) { 
              $.getScript('test.js', function () { // getScript() 
                  testCode(); 
              }); 
          }); 
        
      }); 
      $(document).ready(function () { 
          $(document).ajaxError(function () {     // ajaxError() 
              alert("AJAX request fails."); 
          }); 
        
          $("#chkbtn").click(function () { 
              $("#paragraph").load("test.txt"); 
          }); 
      }); 
      $(document).ready(function () { 
          $("#work").click(function () { 
              $("#div_content").load("demo.txt"); // load() 
          }); 
      }); 
      $(document).ready(function () { 
          $("#btn6").click(function () { 
              $("#d").text($("form").serialize()); 
          }); 
      }); 
      $(document).ready(function () { 
          $("#btn9").click(function () { 
              var x = $("form").serializeArray(); 
              $.each(x, function (i, field) { 
                  $("#d10").append(field.name + ":" 
                  + field.value + ":::"); 
              }); 
          }); 
      }); 
   </script> 
   <style> 
      .gfg { 
      font-size: 40px; 
      font-weight: bold; 
      color: green; 
      } 
      .geeks { 
      font-size: 17px; 
      color: black; 
      }
      #div_content { 
      font-size: 40px; 
      font-weight: bold; 
      color: green; 
      }
      #d1 { 
      width: 300px; 
      height: 150px; 
      padding: 20px; 
      border: 2px solid green; 
      margin-bottom: 10px; 
      } 
   </style> 
</head> 
<body> 
   <h2>jQuery ajax() Method</h2> 
   <h4 id="h11"></h4> 
   <button id="btn1">Click</button> 
   <script> 
      $(document).ready(function () { 
          $("#btn1").click(function () { 
              $.ajax({    //ajax() 
                  url: "geeks.txt", 
                  success: function (result) { 
                      $("#h11").html(result); 
                  } 
              }); 
          }); 
      }); 
   </script> 
   <hr> 
   <h2 id="geeks2">jQuery ajaxSetup() Method</h2> 
   <h3></h3> 
   <button id="btn2">Click</button> 
   <script> 
      $(document).ready(function () { 
          $("#btn2").click(function () { 
              $.ajaxSetup({                       // ajaxSetup() 
                  url: "random.txt", 
                  success: function (progress) { 
                      $("h3").html(progress); 
                  } 
              }); 
              $.ajax(); 
          }); 
      }); 
      $(document).ready(function () { 
          $("#render").click(function (event) { 
              $.post(                             // post() 
                  "submit.php", 
                  function (data) { 
                      $('#division1').html(data); 
                  } 
              ); 
          }); 
      }); 
        
        
   </script> 
   <hr> 
   <p>jQuery get() Method</p> 
   <span id="stage" style="background-color: lightgreen;"> 
   GeeksforGeeks 
   </span> 
   <div> 
      <input type="button" id="driver" 
             value="Load Data" /> 
   </div> 
   <hr> 
   <h5> 
       jQuery getJSON() Method - Click on the  
       button to fetch employee data  
   </h5> 
   <div id="display" 
        style="background-color:#39B54A;"> 
   </div> 
   <input type="button" id="fetch"
          value="Fetch Employee Data" /> 
   <hr> 
   <p>jQuery getScript() Method - Click the below button</p> 
   <button id="show"> 
       Get JavaScript using an AJAX HTTP GET request. 
   </button> 
   <hr> 
   <h2>jQuery param() Method</h2> 
   <section></section> 
   <button id="checkbtn">Click</button> 
   <script> 
      $(document).ready(function () { 
        
          personObj = new Object(); 
        
          personObj.Firstword = "Geeks"; 
          personObj.Secondword = "for"; 
          personObj.Thirdword = "Geeks"; 
          personObj.Wordcolor = "Green"; 
        
          $("#checkbtn").click(function () { 
              $("section").text($.param(personObj));  // param() 
          }); 
      }); 
   </script> 
   <hr> 
   <p> 
       jQuery post() Method - Click the button 
   </p> 
   <div id="division1" 
        style="background-color:#39B54A;"> 
      Data will change here 
   </div> 
   <button id="render" type="button"> 
       Change Data 
   </button> 
   <hr> 
   <p id="paragraph" style="font-size: 20px;"> 
      jQuery ajaxError() Method 
   </p> 
   <button id="chkbtn"> 
   Change Content 
   </button> 
   <hr> 
   <div id="div_content"> 
      <div class="gfg">GeeksforGeeks</div> 
      <div class="geeks"> 
          jQuery load() Method 
      </div> 
   </div> 
   <button id="work"> 
       Change Content 
   </button> 
   <hr> 
   <div id="d1"> 
      <h6>jQuery serialize() Method</h6> 
      <form action=""> 
         Site Name: 
         <input type="text" name="SiteName" 
                value="GeeksforGeeks"> 
         <br> 
         <br> Contributor name: 
         <input type="text" name="ContributorName"
                value="geeks"> 
         <br> 
      </form> 
      <button id="btn6">Click here!</button> 
   </div> 
   <div id="d"></div> 
   <hr> 
   <h6>jQuery serializeArray() Method</h6> 
   <div id="d1"> 
      <form action=""> 
         Site Name: 
         <input type="text" name="SiteName" 
                value="GeeksforGeeks"> 
         <br> 
         <br> Contributor name: 
         <input type="text" name="ContributorName" 
                value="geeks"> 
         <br> 
      </form> 
      <!-- click on this button --> 
      <button id="btn9"> 
          Click here! 
      </button> 
   </div> 
   <div id="d10"></div> 
</body> 
</html> 

jQuery Core: jQuery facilitates the DOM Element Methods, properties, utilities, jQuery Object, Deferred Object, Callbacks Object, etc, to add the functionalities with customization options that help to enhance the overall interactivity of the website. The list of various methods and properties with their descriptions is given below:

Methods/Properties	Descriptions	Syntax
jQuery.Deferred()	It is a function which returns the utility object with methods which can register multiple callbacks to queues.	jQuery.Deferred([beforeStart])
deferred.then()	This method in JQuery is used to add handlers which are to be called when the Deferred object is resolved, rejected, or in progress.	deferred.then(doneCallbacks[, failCallbacks][, progressCallbacks])
deferred.done()	This method in jQuery is used to add handlers which are to be called when the deferred object is resolved.	deferred.done(Callbacks [, Callbacks])
.promise()	This method in JQuery returns a Promise object to be observed when certain types of actions bound to the collection, queued or not, are ended.	.promise([type][, target])
deferred.always()	This method in jQuery is used to add handlers which are to be called when the Deferred object is resolved or when it is rejected.	deferred.always( alwaysCallbacks [, alwaysCallbacks] )
deferred.fail()	This method in jQuery is used to add handlers which are to be called when the Deferred object is rejected.	deferred.fail(failedCallbacks, failedCallbacks )
.get()	This method loads data from the server by using the GET HTTP request. This method returns XMLHttpRequest object.	$.get( url, [data], [callback], [type] )
.index()	It is an inbuilt method in jQuery that is used to return the index of the specified elements with respect to the selector.	$(selector).index(element)
jQuery.when()	This method in JQuery gives a way to execute callback functions depending on zero or more Thenable objects, which usually are Deferred objects that represent asynchronous events.	jQuery.when(deferreds)
.length	This property is used to count the number of elements of the jQuery object.	$(selector).length
jQuery.each()	This method in jQuery is used to specify the function to run for each matched element.	$(selector).each(function(index, element))
callbacks.fire()	This method is used to call all the callbacks with the given arguments in the list. This method returns the Callbacks object onto which it is attached (this).	callbacks.fire( arguments )
callbacks.lock()	This method in jQuery is used to lock a callback list in the state.	callbacks.lock()

jQuery

<!DOCTYPE html> 
<html> 
<head> 
   <script src= 
"https://code.jquery.com/jquery-3.5.0.js"> 
   </script> 
</head> 
<body> 
   <h1 style="color: green"> 
      GeeksforGeeks 
   </h1> 
   <p id="GFG_UP"></p> 
   <button onclick="Geeks();"> 
   Click here 
   </button> 
   <p id="GFG_DOWN"></p> 
   <script> 
      var el_up = document.getElementById("GFG_UP"); 
      el_up.innerHTML = "JQuery.Deferred() & Deferred.then() Method"; 
        
      function Func1(val, div) { 
          $(div).append("From doneCallbacks - " + val); 
      } 
        
      function Func2(val, div) { 
          $(div).append("From failCallbacks - " + val); 
      } 
        
      function Func3(val, div) { 
          $(div).append("From progressCallbacks - " + val); 
      } 
        
      function Geeks() { 
          var def = $.Deferred();        // Deferred() 
          def.then(Func1, Func2, Func3); // then() 
          def.notify('Deferred "def" is notified.<br/>', "#GFG_DOWN"); 
          def.resolve('Deferred "def" is resolved.<br/>', "#GFG_DOWN"); 
      } 
   </script> 
   <hr /> 
   <p>jQuery deferred.done() method</p> 
   <button onclick="check();"> 
   click here 
   </button> 
   <script> 
      function check() { 
          $.get("testingGFG.php").done(function() { 
              //done() 
              alert("$.get successfully completed!"); 
          }); 
      } 
   </script> 
   <hr /> 
   <p id="click_UP"></p> 
   <button onclick="change();"> 
   click here 
   </button> 
   <script> 
      var el_up = document.getElementById("click_UP"); 
      el_up.innerHTML = "JQuery deferred.always() Method"; 
        
      function change() { 
          $.get("testingGFG.php") // get() 
              .always(function() { 
                  // always() 
                  alert("Either $.get successfully" 
                  + " completed or error " 
                  + "callbacks arguments"); 
              }); 
      } 
   </script> 
   <hr /> 
   <div> 
      <h4>jQuery promise() & each() Method</h4> 
   </div> 
   <input type="button"
      id="change"
      value="Click to fade up the text" /> 
   <ul> 
      <li>jQuery promise() & each() Method</li> 
      <li>Click to slide up the text</li> 
      <li>This text will fade up</li> 
   </ul> 
   <p id="para3"></p> 
   <script> 
      $("#change").on("click", function() { 
          $("li").each(function(i) { 
              // each() 
              $(this).slideUp((i + 1) * 1000); 
          }); 
          $("li").promise().done(() => { 
              // promise() 
              $("#para3").text("Content Rendered!"); 
          }); 
      }); 
   </script> 
   <hr /> 
   <h5> 
      jQuery deferred.fail() Method 
   </h5> 
   <button onclick="defail();"> 
   click here 
   </button> 
   <script> 
      function defail() { 
          $.get("testingGFG.php").done(function() { 
              alert("$.get successfully completed!"); 
          }).fail(function() { 
              //fail() 
              alert("$.get failed!"); 
          }); 
      } 
   </script> 
   <hr /> 
   <script> 
      $(document).ready(function() { 
          $("#display").click(function(event) { 
              $.get( 
                  //get() 
                  "testingGFG.php", { 
                      name: "GFG", 
                  }, 
                  function(data) { 
                      $("#wrap").html(data); 
                  }); 
          }); 
      }); 
   </script> 
   <p> 
      jQuery get() Method - Click the below 
      button to load PHP file 
   </p> 
   <span id="wrap"
      style="color: greenyellow"> 
   GeeksforGeeks  
   </span> 
   <div> 
      <input type="button"
         id="display"
         value="Click" />  
   </div> 
   <hr /> 
   <script> 
      $(document).ready(function() { 
          $(".list").click(function() { 
              document.getElementById("demo").innerHTML = 
              "Clicked Index " + $(this).index(); // index() 
          }); 
      }); 
   </script> 
   <p> 
      Click on the elements of the list to display 
      their index number with respect to the other 
      elements in the list.  
   </p> 
   <ul> 
      <li class="list">Geeks</li> 
      <li class="list">for</li> 
      <li class="list">Geeks</li> 
   </ul> 
   <p id="demo"></p> 
   <hr /> 
   <p>jQuery.when() Method</p> 
   <button onclick="gfgChng();"> 
   click here 
   </button> 
   <script> 
      var def = $.Deferred(); 
        
      function gfgChng() { 
          $.when().then(function(a) { 
              // when() 
              alert("when() method called this alert()."); 
          }); 
      } 
   </script> 
   <hr /> 
   <script> 
      $(document).ready(function() { 
          $("#fetch").click(function() { 
              document.getElementById("gfgFind").innerHTML = 
              "<br>" + $("h2").length;    // length 
          }); 
      }); 
   </script> 
   <h2 style="color: green">GeeksforGeeks</h2> 
   <h2 style="color: green">jQuery</h2> 
   <h2 style="color: green">length</h2> 
   <h2 style="color: green">property</h2> 
   <input type="button"
      id="fetch"
      value="Click on the button to get  
      the number of p elements" /> 
   <div id="gfgFind"></div> 
   <hr /> 
   <p id="gfgFireUp"></p> 
   <button onclick="GeeksFire();"> 
   click here 
   </button> 
   <p id="gfgFireDown"></p> 
   <script> 
      var el_up = document.getElementById("gfgFireUp"); 
      var el_down = document.getElementById("gfgFireDown"); 
      el_up.innerHTML = "JQuery callbacks.fire() method"; 
      var result = ""; 
      var callbacks = jQuery.Callbacks(); 
        
      function GeeksFire() { 
          var fun1 = function(val) { 
              result = result + "This is function 1 " 
                              + "and value passed is " 
                              + val + "<br>"; 
          }; 
          callbacks.add(fun1); 
          callbacks.fire("GFG_1"); // callbacks.fire() 
          callbacks.add(fun1); 
          callbacks.fire("GFG_2"); 
          el_down.innerHTML = result; 
      } 
   </script> 
   <hr /> 
   <p>JQuery callbacks.lock() method</p> 
   <button onclick="gfgCallbackLock();"> 
   click here 
   </button> 
   <p id="callbcklck"></p> 
   <script> 
      var el_down = document.getElementById("callbcklck"); 
      var res = ""; 
      var callbacks = jQuery.Callbacks(); 
      function gfgCallbackLock() { 
          var func = function(val1) { 
              res = res + "value passed is - " + val1; 
          }; 
          callbacks.add(func); 
          callbacks.fire("gfgcallbck1"); 
          callbacks.lock(); //callbacks.lock() 
          callbacks.add(func); 
          callbacks.fire("gfgcallbck2"); 
          el_down.innerHTML = res; 
      } 
   </script> 
</body> 
</html> 

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. You can learn JavaScript from the ground up by following this jQuery Tutorial and jQuery Examples.

We have a similar cheat sheet to help you with HTML, CSS & JavaScript concepts as well. Check it out here HTML Cheat Sheet, CSS Cheat Sheet & JavaScript Cheat Sheet.

My Personal Notes

Related Articles

jQuery Cheat Sheet – A Basic Guide to jQuery

What is jQuery?

What is jQuery Cheat Sheet?

Table of Content

jQuery

Selectors

Description

Syntax

jQuery

Methods

Descriptions

Syntax

jQuery

Methods

Descriptions

Syntax

jQuery

Methods

Descriptions

Syntax

jQuery

Events

Descriptions

Syntax

jQuery

Effects

Descriptions

Syntax

jQuery

Methods

Descriptions

Syntax

jQuery

Methods/Properties

Descriptions

Syntax

jQuery

Please Login to comment...

Full Stack Development with React & Node JS - Live

JavaScript Foundation - Self Paced

JAVA Backend Development - Live

Data Structures & Algorithms in Python - Self Paced

Master C Programming with Data Structures

System Design - Live

Complete Machine Learning & Data Science Program

Python Backend Development with Django - Live

Data Structures and Algorithms - Self Paced

Mastering Data Analytics

Android App Development with Kotlin - Live

DSA Live for Working Professionals - Live

Start Your Coding Journey Now!