jQuery, step by step

What is jQuery, actually?

  • It's a JavaScript file that you can include on your Web page that makes coding easier.
  • You use it on a Web page by "installing" it, or including it. (Why do we need to do this?)

How do we include jQuery?

You find a copy of the jQuery file, and include it on your Web page like this:

 

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	</head>
	<body>
	</body>
</html>

 

Anatomy of a jQuery call

Anatomy of a jQuery call

How to write a call

 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
      $("p").fadeOut();
    </script>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </body>
</html>

 

How to write a good call

 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("p").fadeOut();
      });
    </script>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </body>
</html>

 

Document ready

  • When the document is ready.
  • When the $(document) is ready.
  • When the $(document).ready;

Document ready

When using jQuery, ask yourself:

  • What part of the page is the user interacting with?
  • What are they doing to it?
  • In response, what part of the page do you want to change?
  • How do you want to change it?

When using jQuery, ask yourself:

  • What part of the page is the user interacting with? The button.
  • What are they doing to it? Clicking it.
  • In response, what part of the page do you want to change in? The image.
  • How do you want to change it? Fade it out.

Fill in the jQuery blanks

  • When the button is clicked, then the image will fade out.

Fill in the jQuery blanks

  • When the button is clicked, the image will fade out.
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
      $("______").______(function() {
        $("______").______();
      });
    </script>
  </head>
  <body>
    <img class="secret-image" src="http://placekitten.com/139/96" />
    <input class="tricky-button" type="button" value="Hide image!"/>
  </body>
</html>

 

Fill in the jQuery blanks

 

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
      $("button").is clicked(function() {
        $("image").will fade out();
      });
    </script>
  </head>
  <body>
    <img class="secret-image" src="http://placekitten.com/139/96" />
    <input class="tricky-button" type="button" value="Hide image!"/>
  </body>
</html>

 

With your mentor

  • Find Google's copy of jQuery, and include it
  • Add jQuery code so that when you click on a button, an image toggles between fading in and fading out. Use a starter file if you want: bit.ly/jquery-file. Lecture code: bit.ly/working-jquery
  • Fill in the blank of the jQuery call:
    $("______").______(function() {
      $("______").______();
    });

Lunch is served!

Food! Food! Food! Food! Food! Food! Food! Food!

Our next (and last) all-group instructional session is at 12:45 p.m.