jQuery: Selecting elements in a hierarchy

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

This is paragraph 5.

The jQuery codeCode START

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      function toggle() {
        $('body div p').toggleClass('striped');
      }
      
      function toggle2() {
        $('body p.2').toggleClass('striped2');
      }
    </script>

    <style type="text/CSS">
      p.striped { background-color: cyan; }
      p.striped2 { background-color: cyan; }
    </style>
  </head>

  <body>
    <h1>jQuery: Selecting elements in a hierarchy</h1>
    <div>
      <p>This is paragraph 1.</p>
      <p>This is paragraph 2.</p>
      <p id="third">This is paragraph 3.</p>
      <p>This is paragraph 4.</p>
    </div>
    <p class="2">This is paragraph 5.</p>

    <form action="">
      <input type = "button" value="Toggle Class" onclick="toggle()"></input>
      <input type = "button" value="Toggle Class" onclick="toggle2()"></input>
    </form>