jQuery the way to javascript and rich internet application

jQuery
jQuery
The Way to JavaScript and Rich
The Way to JavaScript and Rich
Internet Applications
Internet Applications

Introduction to jQuery
Introduction to jQuery
•
Developed by John Resig at Rochester Institute of Technology
Developed by John Resig at Rochester Institute of Technology
•
“
“
jQuery
jQuery
is a lightweight
is a lightweight
JavaScript library
JavaScript library
that emphasizes
that emphasizes
interaction between
interaction between
JavaScript
JavaScript

and
and
HTML
HTML
. It was released in
. It was released in
January 2006 at
January 2006 at
BarCamp
BarCamp
NYC by
NYC by
John Resig
John Resig
.”
.”
•
“
“
jQuery is
jQuery is
free, open source software
free, open source software


Dual-licensed
Dual-licensed
under the
under the
MIT License

MIT License
and the
and the
GNU General Public License
GNU General Public License
.”
.”
•
“
“
It’s all about simplicity. Why should web developers be forced to
It’s all about simplicity. Why should web developers be forced to
write long, complex, book-length pieces of code when they want to
write long, complex, book-length pieces of code when they want to
create simple pieces of interaction?”
create simple pieces of interaction?”
•
Current version is 1.3.2.
Current version is 1.3.2.
•
Version 1.4 due out soon.
Version 1.4 due out soon.

John Resig
John Resig
•
John Resig is a JavaScript Tool Developer
John Resig is a JavaScript Tool Developer
for the
for the

Mozilla Corporation
Mozilla Corporation
and the author
and the author
of the book
of the book
Pro JavaScript Techniques
Pro JavaScript Techniques
.
.
He's also the creator and lead developer of
He's also the creator and lead developer of
the
the
jQuery JavaScript library
jQuery JavaScript library
.
.
•
Currently, John is located in Boston, MA.
Currently, John is located in Boston, MA.
He's hard at work on his second book,
He's hard at work on his second book,
Secrets of the JavaScript Ninja
Secrets of the JavaScript Ninja
, due in
, due in
bookstores in 2009.
bookstores in 2009.
•

Microsoft
Microsoft
and
and
Nokia
Nokia
have announced plans
have announced plans
to bundle jQuery on their platforms,
to bundle jQuery on their platforms,
[1]
[1]


Microsoft adopting it initially within
Microsoft adopting it initially within
Visual Studio
Visual Studio
[2]
[2]
for use within Microsoft's
for use within Microsoft's
ASP.NET AJAX
ASP.NET AJAX
framework and
framework and
ASP.NET MVC Framework
ASP.NET MVC Framework
whilst Nokia will
whilst Nokia will

integrate it into their Web Run-Time
integrate it into their Web Run-Time
platform.
platform.

Introduction to jQuery
Introduction to jQuery
•
Why do I want it
Why do I want it
–
Rich Internet Applications (RIA)
Rich Internet Applications (RIA)
–
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
•
How do I get it
How do I get it
–
www.jquery.com
www.jquery.com
•
How can I learn it
How can I learn it
–
jQuery in Action
jQuery in Action
by Bibeault & Katz, Manning
by Bibeault & Katz, Manning

–
jQuery Visual Quickstart Guide
jQuery Visual Quickstart Guide
by Holzner, Peachpit
by Holzner, Peachpit
–
www.jquery.com
www.jquery.com
–
docs.jquery.com
docs.jquery.com
–
www.visualjquery.com
www.visualjquery.com
–
www.Jqueryfordesigners.com
www.Jqueryfordesigners.com
–
www.gscottolson.com/weblog/ - cheat sheet
www.gscottolson.com/weblog/ - cheat sheet
–
www.javascripttoolbox.com/jquery
www.javascripttoolbox.com/jquery

Plan for the 4 sessions
Plan for the 4 sessions
•
Class I – Introduction, installation, “Howdy
Class I – Introduction, installation, “Howdy
World”, Ready function, DOM, Selecting

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

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

What jQuery Does
What jQuery Does
•
“

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

•
HTML to CSS to DHTML
HTML to CSS to DHTML

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

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

The DOM
The DOM
•
“
“
The
The
Document Object Model

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

The jQuery Function
The jQuery Function
•
jQuery() = $()
jQuery() = $()
•
$(function)
$(function)
The “Ready” handler
The “Ready” handler
•
$(‘selector’)
$(‘selector’)
Element selector expression

Element selector expression
•
$(element)
$(element)
Specify element(s) directly
Specify element(s) directly
•
$(‘HTML’)
$(‘HTML’)
HTML creation
HTML creation
•
$.function()
$.function()
Execute a jQuery function
Execute a jQuery function
•
$.fn.myfunc(){}
$.fn.myfunc(){}
Create jQuery function
Create jQuery function

Tutorial 1 – The Ready Function
Tutorial 1 – The Ready Function
•
Set up a basic HTML page and add jQuery
Set up a basic HTML page and add jQuery
•
Create a “ready” function
Create a “ready” function

•
Call a function
Call a function
•
5 ways to specify the ready function
5 ways to specify the ready function
–
jquery(document).ready(function(){…};);
jquery(document).ready(function(){…};);
–
jquery().ready(function(){…};)
jquery().ready(function(){…};)
–
jquery(function(){…};)
jquery(function(){…};)
–
jquery(dofunc);
jquery(dofunc);
–
$(dofunc);
$(dofunc);

Tutorial 2 – Selecting Elements
Tutorial 2 – Selecting Elements
Creating a “wrapped set”
Creating a “wrapped set”
•
$(selector)
$(selector)
•

selector:
selector:
–
$(‘#id’)
$(‘#id’)
id of element
id of element
–
$(‘p’)
$(‘p’)
tag name
tag name
–
$(‘.class’)
$(‘.class’)
CSS class
CSS class
–
$(‘p.class’)
$(‘p.class’)
<p> elements having the CSS class
<p> elements having the CSS class
–
$(‘p:first’)
$(‘p:first’)
$(‘p:last’)
$(‘p:last’)
$(‘p:odd’)
$(‘p:odd’)
$(‘p:even’)

$(‘p:even’)
–
$(‘p:eq(2)’)
$(‘p:eq(2)’)
gets the 2
gets the 2
nd
nd
<p> element (1 based)
<p> element (1 based)
–
$(‘p’)[1]
$(‘p’)[1]
gets the 2
gets the 2
nd
nd
<p> element (0 based)
<p> element (0 based)
–
$(‘p:nth-child(3))
$(‘p:nth-child(3))
gets the 3
gets the 3
rd
rd
<p> element of the parent. n=even, odd too.
<p> element of the parent. n=even, odd too.
–
$(‘p:nth-child(5n+1)’)

$(‘p:nth-child(5n+1)’)
gets the 1
gets the 1
st
st
element after every 5th one
element after every 5th one
–
$(‘p a’)
$(‘p a’)
<a> elements, descended from a <p>
<a> elements, descended from a <p>
–
$(‘p>a’)
$(‘p>a’)
<a> elements, direct child of a <p>
<a> elements, direct child of a <p>
–
$(‘p+a’)
$(‘p+a’)
<a> elements, directly following a <p>
<a> elements, directly following a <p>
–
$(‘p, a’)
$(‘p, a’)
<p> and <a> elements
<p> and <a> elements
–
$(‘li:has(ul)’)
$(‘li:has(ul)’)

<li> elements that have at least one <ul> descendent
<li> elements that have at least one <ul> descendent
–
$(‘:not(p)’)
$(‘:not(p)’)
all elements but <p> elements
all elements but <p> elements
–
$(‘p:hidden’)
$(‘p:hidden’)
only <p> elements that are hidden
only <p> elements that are hidden
–
$(‘p:empty’)
$(‘p:empty’)
<p> elements that have no child elements
<p> elements that have no child elements

Selecting Elements, cont.
Selecting Elements, cont.
•
$(‘img’[alt])
$(‘img’[alt])
<img> elements having an alt attribute
<img> elements having an alt attribute
•
$(‘a’[href^=http://])
$(‘a’[href^=http://])
<a> elements with an href attribute
<a> elements with an href attribute

starting with ‘http://’
starting with ‘http://’
•
$(‘a’[href$=.pdf])
$(‘a’[href$=.pdf])
<a> elements with an href attribute
<a> elements with an href attribute
ending with ‘.pdf’
ending with ‘.pdf’
•
$(‘a’[href*=ntpcug])
$(‘a’[href*=ntpcug])
<a> elements with an href attriute
<a> elements with an href attriute
containing ‘ntpcug’
containing ‘ntpcug’

Useful jQuery Functions
Useful jQuery Functions
•
.each()
.each()
iterate over the set
iterate over the set
•
.size()
.size()
number of elements in set
number of elements in set
•

.end()
.end()
reverts to the previous set
reverts to the previous set
•
.get(n)
.get(n)
get just the nth element (0 based)
get just the nth element (0 based)
•
.eq(n)
.eq(n)
get just the nth element (0 based) also .lt(n) & .gt(n)
get just the nth element (0 based) also .lt(n) & .gt(n)
•
.slice(n,m)
.slice(n,m)
gets only nth to (m-1)th elements
gets only nth to (m-1)th elements
•
.not(‘p’)
.not(‘p’)
don’t include ‘p’ elements in set
don’t include ‘p’ elements in set
•
.add(‘p’)
.add(‘p’)
add <p> elements to set
add <p> elements to set
•

.remove()
.remove()
removes all the elements from the page DOM
removes all the elements from the page DOM
•
.empty()
.empty()
removes the contents of all the elements
removes the contents of all the elements
•
.filter(fn/sel)
.filter(fn/sel)
selects elements where the func returns true or sel
selects elements where the func returns true or sel
•
.find(selector)
.find(selector)
selects elements meeting the selector criteria
selects elements meeting the selector criteria
•
.parent()
.parent()
returns the parent of each element in set
returns the parent of each element in set
•
.children()
.children()
returns all the children of each element in set
returns all the children of each element in set
•

.next()
.next()
gets next element of each element in set
gets next element of each element in set
•
.prev()
.prev()
gets previous element of each element in set
gets previous element of each element in set
•
.siblings()
.siblings()
gets all the siblings of the current element
gets all the siblings of the current element

Tutorial 3 – Formatting Elements
Tutorial 3 – Formatting Elements
•
.css(property, value)
.css(property, value)
•
.html()
.html()
•
.val()
.val()
(form elements)
(form elements)
•
.text()

.text()
•
.addClass(‘class’)
.addClass(‘class’)
•
.removeClass(‘class’)
.removeClass(‘class’)

Tutorial 4 – Add Page Elements
Tutorial 4 – Add Page Elements
•
$(‘#target’).before(‘<p>Inserted before #target</p>’);
$(‘#target’).before(‘<p>Inserted before #target</p>’);
•
$(‘#target’).after(‘<p>This is added after #target</p>’);
$(‘#target’).after(‘<p>This is added after #target</p>’);
•
$(‘#target’).append(‘<p>Goes inside #target, at end</p>’);
$(‘#target’).append(‘<p>Goes inside #target, at end</p>’);
•
$(‘#target’).wrap(‘<div></div>’);
$(‘#target’).wrap(‘<div></div>’);

Adding Events
Adding Events
•
Mouseover events – bind, hover, toggle
Mouseover events – bind, hover, toggle
•
Button click events

Button click events
•
Keystrokes
Keystrokes

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

Basic Syntax of Event Binding
Basic Syntax of Event Binding
•
$(‘img’).bind(‘click’,function(event){alert(‘Howdy’;});
$(‘img’).bind(‘click’,function(event){alert(‘Howdy’;});
•
$(‘img’).bind(‘click’,imgclick(event));
$(‘img’).bind(‘click’,imgclick(event));
–
Allows unbinding the function
Allows unbinding the function
•
$(‘img’).unbind(‘click’,imgclick());
$(‘img’).unbind(‘click’,imgclick());
•
$(‘img’).unbind(‘click’);
$(‘img’).unbind(‘click’);
•
$(‘img’).one(‘click’,imgclick(event));
$(‘img’).one(‘click’,imgclick(event));
–
Only works once
Only works once
•
$(‘img’).click(imgclick);
$(‘img’).click(imgclick);
•
$(‘img’).toggle(click1, click2);
$(‘img’).toggle(click1, click2);

•
$(‘img’).hover(mouseover, mouseout);
$(‘img’).hover(mouseover, mouseout);

Element Properties – “this”
Element Properties – “this”
•
this
this
•
this.id
this.id
•
this.tagName
this.tagName
•
this.attr
this.attr
•
this.src
this.src
•
this.classname
this.classname
•
this.title
this.title
•
this.alt
this.alt

•
this.value
this.value
(for form elements)
(for form elements)

‘
‘
Event’ properties
Event’ properties
•
event.target
event.target
ref to element triggering event
ref to element triggering event
•
Event.target.id
Event.target.id
id of element triggering event
id of element triggering event
•
event.currentTarget
event.currentTarget
•
event.type
event.type
type of event triggered
type of event triggered
•
event.data

event.data
second parm in the bind() func
second parm in the bind() func
•
Various mouse coordinate properties
Various mouse coordinate properties
•
Various keystroke related properties
Various keystroke related properties

Event Methods
Event Methods
•
.stopPropagation()
.stopPropagation()
no bubbling
no bubbling
•
.preventDefault()
.preventDefault()
no <a> link, no <form> submit
no <a> link, no <form> submit
•
.trigger(eventType)
.trigger(eventType)
does not actually trigger the
does not actually trigger the
event, but calls the appropriate function specified as the
event, but calls the appropriate function specified as the
one tied to the eventType

one tied to the eventType
•
.click(), blur(), focus(), select(), submit()
.click(), blur(), focus(), select(), submit()
–
With no parameter, invokes the event handlers, like
With no parameter, invokes the event handlers, like
trigger does, for all the elements in the wrapped set
trigger does, for all the elements in the wrapped set

Shortcut Event Binding
Shortcut Event Binding
•
.click(func)
.click(func)
•
.submit(func)
.submit(func)
•
.dblclick(func)
.dblclick(func)
•
.mouseover(func)
.mouseover(func)
•
.mouseout(func)
.mouseout(func)
•
.select(func)
.select(func)

Useful Event Functions
Useful Event Functions
•
.hide()
.hide()
display:true
display:true
•
.show()
.show()
display:none
display:none
•
.toggle(func1, func2) first click calls func1, next
.toggle(func1, func2) first click calls func1, next
click executes func2
click executes func2
•
.hover(over, out)
.hover(over, out)
mouseover, mouseout
mouseover, mouseout