JavaScript & jQuery Video Tutorial

Part 1 - Getting Started

The following code is from the Video.

JavaScript and jQuery Template.

The code inside this function will be run when the web page has been loaded and is ready to be manipulated.

$(document).ready(function() {

  // code goes here
  
});

HTML code - Location of Script tags.

The first <script> tag needs to load the jQuery library. The second <script> tag loads our JavaScript program. Both <script> tags are located right before the closing <body> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
 <h1>Heading one</h1>
 <p>This is just some text for heading 1</p>

 <h1>Heading two</h1>
 <p>This is just some text for heading 2</p>

 <h1>Heading three</h1>
 <p>This is just some text for heading 3</p>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

JavaScript and jQuery Sample Code.

This code hides the <p> tags as soon as the page loads. Then a click event is attached to the <h1> tags. The click event causes the <p> tag, which is immediately below the clicked <h1> tag, to toggle its visibility using the slideToggle animation.

$(document).ready(function() {

  $("p").hide();

  $("h1").click(function() {
    $(this).next().slideToggle(300);
  });

});

Try it out.

Click on any of the heading tags below to display the <p> tag that follows it. Click again to hide the text.