jQuery

1
jQuery

• The Way to JavaScript and Rich Internet
  Applications

2
Introduction to jQuery

• Developed by John Resig at Rochester Institute of
  Technology
• jQuery is a lightweight JavaScript library that
  emphasizes interaction between JavaScript and
  HTML. It was released in January 2006 at BarCamp
  NYC by John Resig.
• jQuery is free, open source software
  Dual-licensed under the MIT License and the GNU
  General Public License.
• Its all about simplicity. Why should web
  developers be forced to write long, complex,
  book-length pieces of code when they want to
  create simple pieces of interaction?
• Current version is 1.3.2.
• Version 1.4 due out soon.

3
John Resig

• John Resig is a JavaScript Tool Developer for the
  Mozilla Corporation and the author of the book
  Pro JavaScript Techniques. He's also the creator
  and lead developer of the jQuery JavaScript
  library.
• Currently, John is located in Boston, MA. He's
  hard at work on his second book, Secrets of the
  JavaScript Ninja, due in bookstores in 2009.
• Microsoft and Nokia have announced plans to
  bundle jQuery on their platforms,1 Microsoft
  adopting it initially within Visual Studio2 for
  use within Microsoft's ASP.NET AJAX framework and
  ASP.NET MVC Framework whilst Nokia will integrate
  it into their Web Run-Time platform.

4
Introduction to jQuery

• Why do I want it
• Rich Internet Applications (RIA)
• Dynamic HTML (DHTML)
• How do I get it
• www.jquery.com
• How can I learn it
• jQuery in Action by Bibeault Katz, Manning
• jQuery Visual Quickstart Guide by Holzner,
  Peachpit
• www.jquery.com
• docs.jquery.com
• www.visualjquery.com
• www.Jqueryfordesigners.com
• www.gscottolson.com/weblog/ - cheat sheet
• www.javascripttoolbox.com/jquery

5
Plan for the 4 sessions

• Class I Introduction, installation, Howdy
  World, Ready function, DOM, Selecting and
  Formatting web page elements
• Class II Events and Animations
• Class III jQuery Plugin libraries
• Class IV AJAX with PHP and ASP.NET

6
Introduction to jQuery

• Installation You just download the
  jquery-1.3.2.js file and put it in your website
  folder
• Can access via URL

7
What jQuery Does

• Unobtrusive JavaScript separation of behavior
  from structure
• CSS separation of style from structure
• Allows adding JavaScript to your web pages
• Advantages over just JavaScript
• Much easier to use
• Eliminates cross-browser problems
• HTML to CSS to DHTML

8
5 Things jQuery Provides

• Select DOM (Document Object Model) elements on a
  page one element or a group of them
• Set properties of DOM elements, in groups (Find
  something, do something with it)
• Creates, deletes, shows, hides DOM elements
• Defines event behavior on a page (click, mouse
  movement, dynamic styles, animations, dynamic
  content)
• AJAX calls

9
The DOM

• Document Object Model
• jQuery is DOM scripting
• Heirarchal structure of a web page
• You can add and subtract DOM elements on the fly
• You can change the properties and contents of DOM
  elements on the fly

10
The DOM

• The Document Object Model (DOM) is a
  cross-platform and language-independent
  convention for representing and interacting with
  objects in HTML, XHTML and XML documents. Aspects
  of the DOM (such as its "Elements") may be
  addressed and manipulated within the syntax of
  the programming language in use. Wikipedia

11
The jQuery Function

• jQuery() ()
• (function) The Ready handler
• (selector) Element selector expression
• (element) Specify element(s) directly
• (HTML) HTML creation
• .function() Execute a jQuery function
• .fn.myfunc() Create jQuery function

12
Tutorial 1 The Ready Function

• Set up a basic HTML page and add jQuery
• Create a ready function
• Call a function
• 5 ways to specify the ready function
• jquery(document).ready(function())
• jquery().ready(function())
• jquery(function())
• jquery(dofunc)
• (dofunc)

13
Tutorial 2 Selecting ElementsCreating a
wrapped set

• (selector)
• selector
• (id) id of element
• (p) tag name
• (.class) CSS class
• (p.class) ltpgt elements having the CSS class
• (pfirst) (plast) (podd) (peven)
• (peq(2)) gets the 2nd ltpgt element (1 based)
• (p)1 gets the 2nd ltpgt element (0 based)
• (pnth-child(3)) gets the 3rd ltpgt element of
  the parent. neven, odd too.
• (pnth-child(5n1)) gets the 1st element after
  every 5th one
• (p a) ltagt elements, descended from a ltpgt
• (pgta) ltagt elements, direct child of a ltpgt
• (pa) ltagt elements, directly following a ltpgt
• (p, a) ltpgt and ltagt elements
• (lihas(ul)) ltligt elements that have at least
  one ltulgt descendent
• (not(p)) all elements but ltpgt elements
• (phidden) only ltpgt elements that are hidden
• (pempty) ltpgt elements that have no child
  elements

14
Selecting Elements, cont.

• (imgalt) ltimggt elements having an alt
  attribute
• (ahrefhttp//) ltagt elements with an href
  attribute starting with http//
• (ahref.pdf) ltagt elements with an href
  attribute ending with .pdf
• (ahrefntpcug) ltagt elements with an href
  attriute containing ntpcug

15
Useful jQuery Functions

• .each() iterate over the set
• .size() number of elements in set
• .end() reverts to the previous set
• .get(n) get just the nth element (0 based)
• .eq(n) get just the nth element (0 based) also
  .lt(n) .gt(n)
• .slice(n,m) gets only nth to (m-1)th elements
• .not(p) dont include p elements in set
• .add(p) add ltpgt elements to set
• .remove() removes all the elements from the page
  DOM
• .empty() removes the contents of all the elements
• .filter(fn/sel) selects elements where the func
  returns true or sel
• .find(selector) selects elements meeting the
  selector criteria
• .parent() returns the parent of each element in
  set
• .children() returns all the children of each
  element in set
• .next() gets next element of each element in set
• .prev() gets previous element of each element in
  set
• .siblings() gets all the siblings of the current
  element

16
Tutorial 3 Formatting Elements

• .css(property, value)
• .html()
• .val() (form elements)
• .text()
• .addClass(class)
• .removeClass(class)

17
Tutorial 4 Add Page Elements

• (target).before(ltpgtInserted before
  targetlt/pgt)
• (target).after(ltpgtThis is added after
  targetlt/pgt)
• (target).append(ltpgtGoes inside target, at
  endlt/pgt)
• (target).wrap(ltdivgtlt/divgt)

18
Adding Events

• Mouseover events bind, hover, toggle
• Button click events
• Keystrokes

19
Event Background

• DOM Level 2 Event Model
• Multiple event handlers, or listeners, can be
  established on an element
• These handlers cannot be relied upon to run an
  any particular order
• When triggered, the event propagates from the top
  down (capture phase) or bottom up (bubble phase)
• IE doesnt support the capture phase

20
Basic Syntax of Event Binding

• (img).bind(click,function(event)alert(Howdy
  )
• (img).bind(click,imgclick(event))
• Allows unbinding the function
• (img).unbind(click,imgclick())
• (img).unbind(click)
• (img).one(click,imgclick(event))
• Only works once
• (img).click(imgclick)
• (img).toggle(click1, click2)
• (img).hover(mouseover, mouseout)

21
Element Properties this

• this
• this.id
• this.tagName
• this.attr
• this.src
• this.classname
• this.title
• this.alt
• this.value (for form elements)

22
Event properties

• event.target ref to element triggering event
• Event.target.id id of element triggering event
• event.currentTarget
• event.type type of event triggered
• event.data second parm in the bind() func
• Various mouse coordinate properties
• Various keystroke related properties

23
Event Methods

• .stopPropagation() no bubbling
• .preventDefault() no ltagt link, no ltformgt submit
• .trigger(eventType) does not actually trigger the
  event, but calls the appropriate function
  specified as the one tied to the eventType
• .click(), blur(), focus(), select(), submit()
• With no parameter, invokes the event handlers,
  like trigger does, for all the elements in the
  wrapped set

24
Shortcut Event Binding

• .click(func)
• .submit(func)
• .dblclick(func)
• .mouseover(func)
• .mouseout(func)
• .select(func)

25
Useful Event Functions

• .hide() displaytrue
• .show() displaynone
• .toggle(func1, func2) first click calls func1,
  next click executes func2
• .hover(over, out) mouseover, mouseout

26
AJAX

• What is AJAX
• The basic AJAX function XMLHttpRequest
• Initiating a request
• Getting the response