jQuery

An Introduction

John A. Vieth

University of Wisconsin-Platteville

Use arrow keys (left and right) to navigate through slides and bullets in this presentation!!!

Who am I?

• John A. Vieth
• Web developer at University of Wisconsin-Platteville, Distance Learning Center
• Bachelor of Science in Business Administration from University of Wisconsin-Platteville (1997)
• Past jobs included developing marketing and support websites for internet service providers, and online retail shopping websites
• Currently redesigning the UWP DLC website using jQuery, among other tools
  http://www.uwplatt.edu/disted/redesign/

What is this?!?

• jQuery: An Introduction
• The basics—what jQuery is an how it is used
• Combined my knowledge and experience with a survey of popular jQuery documentation
• S5 presentation is available online at http://www.ViethFamily.com/jQuery/

What is jQuery?

• JavaScript library
• Primary goal of jQuery is to make it easier to write JavaScript that is compatible with all web browsers
• Adds to and improves JavaScript
• Works with all modern browsers
• Free under dual GPL and MIT licenses
• Created by John Resig, 25-year-old "JavaScript Evangelist" for Mozilla Corporation, who is still the lead jQuery developer

John Resig

Benefits of jQuery

• Makes JavaScript easier
• Simplifies powerful selection and manipulation of XHTML elements (claim to fame)
• No more browser-specific code
• Dramatically reduces amount of code you have to write
• Adds powerful functionality compared to ordinary JavaScript

What makes jQuery special?

• Leverages knowledge of CSS
• Makes it easy to work with a collection of elements
• Statement chaining (logical and efficient)
• Extensible with an enormous library of third-party plugins
• Extremely well tested and reliable
• Popular with a large community of users (e.g. Google, Mozilla, Dell, Drupal, and Microsoft)

Good Company

Primary Features of jQuery

• Core and common utilities
• Selection and traversal
• Manipulation and CSS
• Events (simplifying response to modern DOM events)
• Effects (hide, show, transitions, etc)
• AJAX (loading content from other pages/apps, dealing with JSON data)
• User Interface (common widgets like slider controls, progress bars, accordians, etc)
• Extensibility (third-party developers can create their own plug-ins)

Installation

• Download from jQuery.com
• Use the production version (minified)
• Call external library from your web pages
• Start using it!

Demo: Getting Started

• Installation
• $(document).ready event handler
• Go to demo

What is the dollar sign?

• Dollar sign is an alias for jQuery
• Less code to write
• Makes code more compact

$(document).ready Event Handler

• $(document).ready(function()
  {
       // YOUR CODE HERE
  });
• Runs code when DOM is ready, which is sooner than waiting for all images and other content to be downloaded
• Allows unlimited functions to run when the document is ready, whereas "onload" in the body tag only calls one function
• Can be used multiple times and all code is chained together and run when DOM is ready
• Can be abbreviated

Demo: Selecting, Changing CSS

• Selection of paragraphs
• Change the value of a CSS property
• Go to demo

Selectors and Filters

• Selection returns a collection of jQuery objects representing the DOM elements that were selected
• You can select by XHTML tag (div), by CSS ID (#MyID), by CSS class (.MyClass), or by both tag and class (div.MyClass)
• Example: $("div.MyClass") instead of document.getElementsByTagName("div") followed by code to loop through all the results and check their class.

Examples of Selectors

See documentation on selectors and filters at docs.jquery.com/Selectors

Examples of Filters

• Basic filters like $("h2:first") or $("table.Mytable > tr:even")
• Content filters like $("p:contains(pancake)")
• Visibility filters like $("div.nav:visible")
• Attribute filters like $("p[class]") or $("p[class=HideMe]")
• Parent/children filters like $("p:has(img[alt*=pancake])")
• Form filters like $("#ContactForm input:checkbox:checked")

Examples of Filters (continued)

• See documentation on filters at docs.jquery.com/Selectors

Counting or Checking for Elements

• Example: $("p").length

css() Function

More CSS Functions

Chaining

• Chaining allows you to perform multiple functions on selected elements with one line of code
• Allows for fewer lines of code
• Sometimes more logical
• Example: $("p:contains(pancake)").show().css("font-weight","bold");

"Each" Processes Each Element

• Allows you to specify a function that processes each selected element
• Example:
  
  $("td.subtotal").each(function() { myTotal += Number($(this).text()); });

Demo: Changing Content

• Selection of paragraph
• Change content in selected paragraph
• Go to demo

Changing Content

Changing Content (continued)

Changing Content (continued)

Size and Positioning

• There are a number of useful jQuery functions to get or set the size and position of elements
• See jQuery.com for details

Demo: Event Handlers

• Click event
• Hover event
• Go to demo

Event Handling

• Abstracts differences between various browsers
• Example of binding: $("#TargetDiv").bind("mouseover",MyFunction);
• Example of unbinding: $("#TargetDiv").unbind("mouseover",MyFunction);
• Convenient specialty functions provide optional shortcuts for common events, like the "hover" and "toggle" functions," but bind and unbind always work.
• Learn more about events at jQuery.com!
• Helpful event object captures all sorts of helpful information about the event so it can be passed to the event handler's function

Animation and Effects

• Hide elements hide()
• Show elements with show()
• Toggle elements (show/hide) with toggle()
• fadeIn() and fadeOut() are like show() and hide(), except with a fade effect
• slideUp() and slideDown() are like show() and hide(), except with slide/curtain effect
• fadeToggle() and slideToggle() are like toggle(), except with fade or slide/curtain effect

Animation and Effects (continued)

• Optional speed (milliseconds) and callback parameters
  $("#MyDiv").hide(2000,function{alert("I'm done hiding!");});
• Custom animate function allows unlimited possibilities
  $("#MyDiv").animate({width: "500px", backgroundColor: "#FF0000"}, 2000, "swing");

Demo: Show and Hide

• show()
• hide()
• toggle()
• Go to demo

AJAX-ish Stuff

• $.ajax() is a full featured ajax function (more info)
• load() is a simple, easy-to-use, and chain-able alternative to $.ajax() (more info)
• load() has an option that allows you to fetch just one element from a remote page
• Example:
  $('#TargetP').load("http://www.uwplatt.edu/ #UWPlogo");
• The example above loads just the element with ID of UWPlogo and plops it into the paragraph with ID of TargetP

Demo: Easy AJAX Using load()

• load() is like AJAX, except easier and chain-able
• Option allows you to load just a single element and its contents
• Go to demo

jQuery UI Library

• Separate library that provide another magnitude of functionality
• Functions for drag-and-drop, sorting lists, etc
• Widgets for things like progress bars, date pickers, etc
• More effects
• Find examples and download at jQueryUI.com

My Favorite jQuery Plug-ins

• Cycle - http://malsup.com/jquery/cycle/
• jGFeed - http://plugins.jquery.com/project/jgfeed
• Validation - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• URL Parser - http://projects.allmarkedup.com/jquery_url_parser/
• Cookie - http://plugins.jquery.com/project/cookie

Using jQuery for UWP DLC redesign

• Slide show on home page (demo | info)
• Displaying external RSS feeds (demo | info)
• Form validation (demo | info)
• Including content from other pages (demo | info)
• Show/hide FAQ (demo | info)

More Information

• jQuery.com
• jQuery Download Page at docs.jquery.com/Downloading_jQuery
• jQuery Documentation at docs.jquery.com/Main_Page
• jQuery Tutorials at docs.jquery.com/Tutorials
• jQuery Plugins at plugins.jquery.com
• Learning jQuery at learningjquery.com

Questions?