jQuery Cheat Sheet – A Basic Guide to jQuery

Last Updated : 06 Jul, 2023

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.

Events
Effects
jQuery AJAX Methods
jQuery Core

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
*	Selects all the elements in the document	$(“*”)
.class	Specifies the class for an element to be selected.	$(“.class”)
element	Select and modify HTML elements	$(“element_name”)
#id	Specifies an id for an element to be selected.	$(“#id”)
:hidden	Selects hidden elements to work upon.	$(“:hidden”)
:visible	Selects all the elements that are currently visible	$(“:visible”)
parent > child	Select all elements that are the direct child of parent.	(“parent > child”)
ancestor-descendant	Selects every descendant of a parent element.	$(“parent descendant”)
:animated	Change the state of the element with CSS style.	(selector).animate({styles}, para1, para2, para3);
:first	Selects the first element of the specified type.	$(“:first”)
:last	Selects the last element of the specified type.	$(“:last”)
:even	Selects even number index from the elements.	$(“:even”)
:odd	Selects odd number index from the elements.	$(“:odd”)
:input	Used to select input elements and button	$(“:input”)
:button	Selects button elements and input elements with type=”button”.	$(“:button”)
:parent	Selects elements that are parent of another element.	$(“:parent”)
:contains()	Elements containing the specified string are selected.	$(“:contains(text)”)
:first-child	Every element that is the first child of its parent is selected.	$(“:first-child”)
:nth-child()	Selects all elements that are the nth-child of their parent.	$(“Element:nth-child(Index/even/odd/equation)”)
[name!=”value”]	Selects element that doesn’t have the specified value.	$(“[attribute!=’value’]”)
prev~siblings	Selects siblings of specified element	(“element ~ siblings”)
prev + next	Selects the just “next” 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()	Sets or return properties and values for selected elements.	$(selector).prop(parameters)
.removeAttr()	Used to remove attributes from the selected elements.	$(selector).removeAttr(attribute)
.removeProp()	Used to remove the property set by prop() method.	$(selector).removeProp(property)
.val()	Return or set the value of attribute for selected elements.	$(selector).val()
.removeData()	Removes data which was previously set.	$(selector).removeData(args);
jQuery.data()	Attaches or gets data for the selected elements.	$(selector).data(parameters);
jQuery.hasData()	Checks if an element has any data associated with it.	jQuery.hasData(element)
.height()	Checks the height of an element	$(“param”).height()
.innerHeight()	Checks inner height of the element including padding.	$(“param”).innerHeight()
.outerHeight()	Finds total height of element including padding and border	$(selector).outerHeight(includeMargin)
.width()	Check the width of an element.	$(“param”).width()
.innerWidth()	Returns the inner width of the element include padding.	$(“param”).innerWidth()
.outerWidth()	Finds total width of element including border & padding.	$(selector).outerWidth( includemargin )
.css()	Changes the style property of the selected element.	$(selector).css(property)
.addClass()	Adds more property to each selected element.	$(selector).addClass(className);
.removeClass()	Remove class names from the selected element.	$(selector).removeClass(class_name, function(index, current_class_name))
.hasClass()	Check if the elements with specified class name exists	$(selector).hasClass(className);
.toggleClass()	Changes the class attached with selected element.	$(selector).toggleClass(class, function, switch)
.scrollTop()	Returns the vertical top position of the scrollbar.	$(selector).scrollTop(position)
.scrollLeft()	Returns or sets 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()	Inserts content at the end of selected elements.	$(selector).append( content, function(index, html) )
.appendTo()	Inserts an HTML element at the end of selected element.	$(content).appendTo(selector)
.html()	Sets or returns the innerHTML content of selected element.	$(selector).html(function(index, currentcontent))
.prependTo()	Insert HTML elements or content at the beginning of selected element.	$(content).prepend(selector)
.text()	Sets or returns the text content of the element.	$(selector).text(function(index, currentcontent))
.clone()	Makes a copy of selected elements including its child	$(selector).clone()
.insertBefore()	Inserts HTML content before a specified element.	$(content).insertBefore(target)
.insertAfter()	Inserts some HTML content after specified element.	$(content).insertAfter(target)
.detach()	Removes the selected elements from the DOM tree	$(selector).detach()
.empty()	Remove all child nodes and their content for selected elements.	$(selector).empty()
.remove()	Removes all the selected elements including the text.	$(selector).remove()
.replaceWith()	Replaces the selected element with the new one.	$(selector).replaceWith(content, function)
.wrapAll()	Used to wrap specified element against all 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()	Finds all the child element related to selected element.	$(selector).children()
.next()	Returns the next sibling of the selected element.	$(selector).next()
.closest()	Returns the first ancestor of the selected element in DOM tree.	$(selector).closest(parameters);
.parent()	Finds the parent element related to the selected element.	$(selector).parent()
.prevUntil()	Finds all the previous sibling elements between two elements.	$(selector1).nextUntil(selector2)
.siblings()	Finds all siblings elements of the selected element.	$(selector).siblings(function)
.first()	Selects the first element from the specified elements.	$(selector).first()
.last()	Finds the last element of the specified elements.	$(selector).last()
.is()	Checks if one of the selected elements matches selectorElement.	$(selector).is(selectorElement, function(index, element))
.map()	Translates all items in an array or object to a new array.	jQuery.map( array/object, callback )
.filter()	Returns the element which match the criteria.	$(selector).filter(criteria, function(index))
.not()	Returns all element which do not match with selected element	$(selector).not(A)
.andSelf()	Adds the previous set of elements to current set.	andSelf( )(selector);
.each()	Specifies the function to run for each matched element.	$(selector).each(function(index, element))
.find()	Finds all the descendant elements of 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()	Attaches a function to run when an error event occurs	$(selector).error()
.resize()	Triggers when the browser window change its size.	$(selector).resize(function)
.scroll()	Used to scroll in specified element.	$(selector).scroll(function)
.ready()	Loads the whole page then execute the rest code.	$(document).ready(function)
.unload()	Performs unload event when user navigates away from current webpage.	$(selector).unload(function)
.load()	Loads data from the server and returned it to the selected element.	$(selector).load(URL, data, callback);
.die()	Used to removes one or more event handlers, for selected elements.	$(selector).die(event, function)
.bind()	Attachs event handlers to selected elements	$(selector).bind(event, data, function);
.trigger()	Triggers a specified event handler on selected element.	$(selector).trigger(event,parameters)
.triggerHandler()	Used to trigger a specified event for the selected element.	$(selector).triggerHandler(event, param1, param2, …)
.on()	Attaches one or more event handlers for the selected elements and child elements.	$(selector).on(event, childSelector, data, function)
.off()	Removes event handlers attached with the on() method.	$(selector).off(event, selector, function(eventObj), map)
.one()	Attaches one or more event handlers to the selected element.	$(selector).one(event, data, function)
.unbind()	Used to remove any selected event handlers.	$(selector).unbind(event, function, eventObj)
.blur()	Used to remove focus from the selected element.	$(selector).blur(function)
.focus()	Used to focus on an element.	$(selector).focus(function)
.focusin()	Focuses on the selected element.	$(selector).focusin(function);
.focusout()	Removes focus from the selected element.	$(selector).focusout(function);
.change()	Used to detect the change in value of input fields.	$(selector).change(function)
.keydown()	Triggers the keydown event whenever the User presses a key on the keyboard.	$(selector).keydown(function)
.keypress()	Triggers the keypress event whenever browser registers a keyboard input.	$(selector).keypress()
.keyup()	Used to trigger the keyup event whenever User releases a key from the keyboard.	$(selector).keyup(function)
.click()	Starts the click event or attach a function to run when a click event occurs.	$(selector).click(function);
.hover()	Specifies functions to start when mouse pointer moves over selected element.	$(selector).hover(Function_in, Function_out);
.toggle()	Checks the visibility of selected elements to toggle.	$(selector).toggle(speed, easing, callback)
.mouseover()	Works when mouse pointer moves over the selected elements.	$(selector).mouseover(function)
event.stopPropagation()	Used to stop the windows propagation.	event.stopPropagation()
event.preventDefault()	Used to stop the default action of the selected element to occur.	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()	Used to hide the selected element.	$(selector).hide(duration, easing, call_function);
.show()	Used to display the hidden and selected elements.	$(selector).show( speed, easing, callback )
.toggle()	Check the visibility of selected elements to toggle	$(selector).toggle(speed, easing, callback)
.animate()	Used to change the state of the element with CSS style.	(selector).animate({styles}, para1, para2, para3);
.delay()	Sets a timer to delay the execution in the queue.	$(selector).delay(para1, para2);
.finish()	Used to stop the animations running at the present time.	$(selector).finish();
.clearQueue()	Removes all items from the queue that have not yet been run.	$(selector).clearQueue(name);
.dequeue()	Removes the next function from the queue and executes it.	$(selector).dequeue(name);
.fadeIn()	Used to change the opacity of selected elements.	$(selector).fadeIn( speed, easing, callback )
.fadeOut()	Changes the level of opacity for selected element	$(selector).fadeOut( speed, easing, callback )
.fadeTo()	Changes the opacity of the selected element.	$(selector).fadeTo(speed, opacity, easing, call_function)
.fadeToggle()	Toggles between the fadeIn() and fadeOut() methods.	$(selector).fadeToggle(speed, easing, callback)
.queue()	Used to show the queue of functions to be executed	$(selector).queue(queue_name)
.stop()	Used to stop the currently running animations.	$(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()	Performs an AJAX request or asynchronous HTTP request.	$.ajax({name:value, name:value, … })
jQuery.ajaxSetup()	Sets the default values for future AJAX requests.	$.ajaxSetup( {name:value, name:value, … } )
jQuery.get()	Loads data from the server by using the GET HTTP request.	$.get( url, [data], [callback], [type] )
jQuery.getJSON()	Fetches JSON-encoded data from the server using GET HTTP request.	$(selector).getJSON(url,data,success(data,status,xhr))
jQuery.getScript()	Runs JavaScript using AJAX HTTP GET request.	$(selector).getScript(url, success(response, status))
jQuery.param()	Creates a serialized representation of an object.	$.param( object, trad )
jQuery.post()	Loads the page from the server using a POST HTTP.	$.post( url, data, callback_function, data_type )
.ajaxComplete()	Specifies the functions to run when an AJAX request completes.	$(document).ajaxComplete(function(event, xhr, options))
.ajaxError()	Specifies functions to run when an AJAX request fails.	$(document).ajaxError( function(event, xhr, options, exc) )
.ajaxStart()	Specifies functions to run when an AJAX request starts.	$(document).ajaxStart(function())
.ajaxStop()	Specifies functions to run when AJAX requests have been completed.	$(document).ajaxStop(function())
.load()	Loads data from server and returned into selected element	$(selector).load(URL, data, callback);
.serialize()	Creates a text string in standard URL-encoded notation.	$(selector).serialize()
.serializeArray()	Create a JavaScript array of objects to be encod 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()	Returns the utility object with methods to register multiple callbacks to queues.	jQuery.Deferred([beforeStart])
deferred.then()	Adds handlers which are called on the Deferred object	deferred.then(doneCallbacks[, failCallbacks][, progressCallbacks])
deferred.done()	Adds handlers which are called when deferred object is resolved.	deferred.done(Callbacks [, Callbacks])
.promise()	Returns a Promise object to be observed when certain actions are ended.	.promise([type][, target])
deferred.always()	Add handlers which are called when Deferred object is resolved or rejected.	deferred.always( alwaysCallbacks [, alwaysCallbacks] )
deferred.fail()	Adds handlers which are to be called when Deferred object is rejected.	deferred.fail(failedCallbacks, failedCallbacks )
.get()	Loads data from the server by using the GET HTTP request.	$.get( url, [data], [callback], [type] )
.index()	Returns the index of the specified elements with respect to selector.	$(selector).index(element)
jQuery.when()	Executes callback functions depending on zero or more Thenable objects.	jQuery.when(deferreds)
.length	Counts the number of elements of the jQuery object.	$(selector).length
jQuery.each()	Specifies the function to run for each matched element.	$(selector).each(function(index, element))
callbacks.fire()	Returns the Callbacks object onto which it is attached (this).	callbacks.fire( arguments )
callbacks.lock()	Locks 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.

Suggest improvement

jQuery Cheat Sheet – A Basic Guide to jQuery

Share your thoughts in the comments

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

Similar Reads

What kind of Experience do you want to share?