jQuery Tutorial

by Bob Downs

jQuery element Selector & click() Event Method Demonstration

HTML Code for Demo

<!DOCTYPE html>
  <html>

  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="jqueryTutorialDemo1.js"></script>
  </head>

  <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me to hide paragraphs</button>
  </body>

  </html>

JavaScript Code for Demo

/* Prevent any jQuery code from running before the document is finished loading 
  (is ready). */
  $(document).ready(function () {
    /* Attaches event handler to button element so that when the button is 
    clicked, the instruction inside this function is run. */
    $("button").click(function () {
      /* <p> element is selected and is hidden. */
      $("p").hide();
    });
  });

Click on the button below to see the hide() function demonstrated. Reload this page to reset.

This is a paragraph.

This is another paragraph.