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>

Run it... »

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>

Run it... »

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>

Run it... »

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>

Run it... »