Making JavaScript Easy: An Introduction to jQuery

Date: 
Wednesday, October 13, 2010
AttachmentSize
PDF icon jquery.pdf57.11 KB

Announcements

  • Next month Justin Spargur from the University Libraries will present on Mobile Websites.
  • In December the Co-Chair and Website Developer leadership positions expire, so we will be holding elections. Please let the current leadership team know if you would like to run for one of those positions, or nominate someone for a position.

 

Presentation: Making JavaScript Easy: An Introduction to jQuery (see attached PowerPoint presentation)

Presenter: Mike Hagedon, University Libraries

  1. What is jQuery? Magic (just kidding, but it kind of is)
  2. Why jQuery? Because of the “browser wars” I gave up hope on using JavaScript. Last year I discovered jQuery, and it gave me hope again.
  3. Please note: it doesn’t replace JavaScript.
  4. See the attached PowerPoint presentation for the definition and what it allows you to do.
  5. If you understand CSS, you can easily get started with jQuery.
  6. It avoids browser quirks, and works well with sets.
  7. Demo of code
    1. First you'll need a basic HTML document with jQuery included (replace the square brackets with angle brackets):

      [html]
      [head]
      [title]jQuery Demo[/title]
      [script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"][/script]
      [/head]
      [body]
      [div id='hello']Hello jQuery![/div]
      [/body]
      [/html]
    2. In your Firebug console, run this:

      $('#hello').hide();
    3. Then delete the above and run this:

      $('#hello').fadeIn(5000);

      Easy, right?
    4. Let's try some more effects. Add this to the style attribute of the hello div:

      width: 100px; height: 100px; background-color: green; padding: 5px; color: white
    5. Then run this in the Firebug console:

      $('#hello').slideUp(3000);
    6. Remember that jQuery can operate on sets. Copy the hello div three times, change the ids (to hello2, hello3, and hello4), and add a class "hellos" to all of them. Now, run this in Firebug:

      $('.hellos').fadeOut(3000);
    7. There are other ways of selecting elements besides id and class selectors. Run this in the Firebug console:

      $('#hello2').append('

      Hello!

      ');


      Now run this:

      $('#hello2 > p').text("Who's there?");

      Now this:

      $('#hello3').append("A cool site

      ");


      Now you can use an attribute selector:

      $('#hello3 > a[href=http://arizona.edu/]').hide();
    8. Now let's respond to user interaction. This will "bind" the click event to the element with id "hello". Run it in the Firebug console:

      $('#hello').click(function () {
      $(this).hide();
      });

      Be sure to click on the item after you run the code to see what it does.
      This also works on sets:

      $('.hellos').click(function () {
      $(this).hide();
      });
    9. You can also capture the "submit" event on forms. Attach this HTML to the top of the body (again, replace the square brackets with angle brackets):

      [form id="hello-form" method="get"]
      [input type="text" name="hello_text" id='hello_text' /]
      [input type="submit" /]
      [/form]

      Now bind the submit event to the form:

      $('#hello-form').submit(function () {
      return false;
      });

      Then add this line before "return false;":

      $('#hello').text('submitted');

      Run the code and submit the form.

      Now let's capture the input box contents. Replace the .text() line with this:

      data = $('#hello_text').val();
      $('#hello').text(data);
    10. Now, to keep this presentation buzzword-compliant, let's do something that resembles AJAX. Refresh the page and run the following code in Firebug:

      $('#hello-form').submit(function () {
      data = $('#hello_text').val();
      postData = $(this).serialize();
      $.post(
      'data.php',
      postData,
      function(data) {
      alert(data);
      }
      );
      return false;
      });

      Put the following code in data.php on your web server (assuming you have PHP support):

      echo "returned: " . $_POST['hello_text'];
      ?>

      Note: Don't ever do the above in production. Bad things will happen.

      Now refresh the page, replace the alert(data) with the following and run the code.

      $('#hello').text(data);

      Now, submit the form. Amazing!
  8. Recommends using Firebug – the plug in for Firefox.
  9. jQuery supports CSS3.
  10. You need 3 things to use jQuery UI:
    1. Include jQuery in your page
    2. Theme (CSS file)
    3. JavaScript for jQuery UI
  11. Demo of jQuery UI
    1. Let's try jQuery UI, which is the official user interface library for jQuery. First add this HTML in your head element after the jquery script element:

      [link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" /]
      [script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"][/script]

      Refresh the page. We've been ignoring hello4; let's get rid of it! Run this:

      $('#hello4').effect('explode');
    2. Let's try sorting. Wrap all the hellos-class divs with this div:

      [div id='sort-me'][/div]

      Now run this and drag the hello divs around:

      $('#sort-me').sortable();
    3. You can also make a dialog out of an existing div:

      $('#hello3').dialog();
    4. jQuery UI also has a datepicker. Add this to your form HTML:

      [input type="text" id="hello-date" /]

      Now run this and then click on hello-date:

      $('#hello-date').datepicker();
    5. Progress bars are fun:

      [div id="progress"][/div]


      $('#progress').progressbar({value:56} );
  12. Here's an example of how to actually include jQuery code in a page. Ideally this would be in a separate .js file.

    [
  13. Showed examples of jQuery on the UA Libraries website
    • Scrollable() is used on the news
    • Hours dropdown uses AJAX (really JSON)
    • Hours application hours screen (behind authentication)
  14. Resources (see PowerPoint presentation)
  15. Right now you have free access to Safari Books from the U of A link on the UA Libraries website