#heweb09 jQuery: An Introduction – as easy as (pan)cakes?

View the S5 presentation: http://www.ViethFamily.com/jQuery

There is absolutely no room in the jQuery session at #heweb09 – we started early because no one else could fit. Overall it’s been quietly exciting – lots of demos, a great introduction – I’d like to hear about the pros, cons vs flash and also some live examples (i.e. a school website)

BTW Our new homepage (launched last week) uses jQuery for its animations: http://www.ivey.uwo.ca

Presentation Notes:

  • Goal of jQuery is to make it easier to write Javascript that is compatible with all web browsers
  • Works with all modern browsers
  • Adds to and improves Javascript
  • Developer works for Firefox
  • Leverages knowledge of CSS
  • Statement chaining
  • Makes it easy to work with a collection of elements
  • Extensible with an enormous library of third-party plugins
  • Extremely well tested and reliable
  • Popular with a large community of users

Primary Features

  • Selection and traversal
  • Manipulation and CSS
  • Events (simplifying response to modern DOM events)
  • Effects (hide, show, transitions)
  • AJAX (loading content from other pages/apps, dealing with JSON data)
  • User Interface plugin adds slider controls, progress bars, accordions, etc – out of the box
  • Extensibility (third party developers can create their own plug-ins)

Installation

  • Download from jQuery.com
  • Call external library from your webpages
  • Use it

document.ready function

Anything inside this function will happen when the DOM is ready – sooner than onload – therefore working sooner but not too soon.

Allows unlimited functions to run when the document is ready – onload only calls one function.

Can be used multiple times and all code is chained together and run when DOM is ready.  Can be abbreviated

What is the dollar sign?

An alias to the word jQuery – main jQuery function – just makes your code shorter

Demo: Selecting, Changing CSS

Selection of paragraphs; Change the value of a css property

Go to demo

Change the colour of two paragraphs with just one line of code.  Find all the paragraphs with the class changeme and change background colour (chaining).

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)

$(“div.MyClass”) replaces document.getElementsbytagname (“div”) followed by code to loop through all the results and check their class.

Examples of selectors

Simple, Or, And, Children, Subelements, adjacent, follower – syntax is very css like.

Type Example
SIMPLE $(“#MainDiv”)
OR $(“p, ul”)
AND $(“.ClassA.ClassB”)
CHILDREN $(“#MainDiv > p”)
SUBELEMENTS $(“#MainDiv a”)
ADJACENT $(“.NoMargins + p”)
FOLLOWER $(“p.FirstParagraph ~ p)

Examples of filters

Basic like $(“h2:first”) or $(“table.mytable > tr:even”)

Content filters $(“p:containts(pancake)”)

Documentation on Selectors & Filters: http://docs.jquery.com/Selectors

Demo: Prepend, change and append content

Function What It Does
html() Gets or sets the HTML content of matched elements
text() Gets or sets the text content of matched elements
attr() Gets or sets an attribute of matched elements
empty() Removes all child nodes from matched elements
remove() Removes matched elements and any nodes inside those elements
clone() Makes a copy of selected elements that can then be inserted into the DOM elsewhwere
append() Appends content to the inside of matched elements
appendTo() Removes matched elements and appends them to inside of specified target
prepend() Prepends content to the inside of matched elements
prependTo() Removes matched elements and prepends them to inside of specified target
Function What It Does
after() Inserts content after each of the matched elements
before() Inserts content before each of the matched elements
insertAfter() Removes matched elements and inserts them after each of the specified elements
insertBefore() Removes matched elements and inserts them before each of the specified elements

Demo: Event Handlers (Click, Hover)

Animation & Effects

  • Hide
  • Show
  • Toggle
  • Slide
  • Fade
  • Set speed, provide custom animation function that combines animations

JGFeed – htt://plugins.jquery.com/project/jgfeed – brings in any RSS feed and parses/displays anyway you want to!

Presenter’s Favorite jQuery Plug-ins

http://www.uwplatt.edu/disted/redesign – slideshow! displaying RSS feeds!

form validation demo: http://www.uwplatt.edu/disted/redesign/update-contact-information.html

Using jQuery for UWP DLC redesign

Not rocket science but saves you a lot of work and does it in a very reliable way.

Submit a Comment

Your email address will not be published. Required fields are marked *