HI WELCOME TO SIRIS

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>