jQuery Syntax

jQuery syntax is made by using HTML elements selector and perform some action on the elements are manipulation in Dot sign(.).

jQuery basic syntax:

 $(document).ready(function() {     $(selector).action(); });
  • $ sign define the jQuery.

  • A (selector) defines the Query element's to find in HTML element's.

  • And action() to be performed on the element's.

Following are jQuery basic syntax examples,

element selector

$("p").hide() The jQuery hide() function, hide all <p> elements.

 <!DOCTYPE html> <html> <head>   <title>jQuery hide p elements</title>   <script src="jquery-latest.min.js"></script>   <script>     $(document).ready(function() {       $("button").click(function(){         $("p").hide();       });     });   </script> </head> <body>   <p>First paragraph start here...</p>   <p>Second paragraph start here...</p>   <button>Click here to hide above all paragraph</button> </body> </html>

this selector

$(this).hide() The jQuery hide() function, hide (this) element.

 <!DOCTYPE html> <html> <head>   <title>jQuery hide this element</title>   <script src="jquery-latest.min.js"></script>   <script>     $(document).ready(function() {       $("button").click(function(){         $(this).hide();       });     });   </script> </head> <body>   <button>Click here to hide this button</button> </body> </html>

id selector

$("#div1").hide() The jQuery hide() function, hiding whose id="div1" in the elements.

 <!DOCTYPE html> <html> <head>   <title>jQuery hide p#div1 element</title>   <script src="jquery-latest.min.js"></script>   <script>     $(document).ready(function() {       $("button").click(function(){         $("#div1").hide();       });     });   </script> </head> <body>   <p id="div1">First paragraph start here...</p>   <button>Click here to hide p#div1 element</button> </body> </html>

class selector

$(".div1").hide() The jQuery hide() function, hiding whose class="div1" in the elements.

 <!DOCTYPE html> <html> <head>   <title>jQuery hide p.div1 elements</title>   <script src="jquery-latest.min.js"></script>   <script>     $(document).ready(function() {       $("button").click(function(){         $(".div1").hide();       });     });   </script> </head> <body>   <p class="div1">First paragraph start here...</p>   <p class="div1">Second paragraph start here...</p>   <button>Click here to hide above all paragraph</button> </body> </html>