Jquery: The Way To Javascript and Rich Internet Applications

jQuery
The Way to JavaScript and Rich

Internet Applications
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.
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
Studio[2] 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.
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
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
Installation You just download the
jquery-1.3.2.js file and put it in your

website folder
Can access via URL
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
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
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
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
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
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);
Tutorial 2 Selecting Elements

Creating a wrapped set
$(selector)
selector:
$(#id)
id of element
$(p)
tag name
$(.class)
CSS class
$(p.class) elements having the CSS class
$(p:first) $(p:last) $(p:odd) $(p:even)
$(p:eq(2))
gets the 2nd element (1 based)
$(p)[1]
gets the 2nd element (0 based)
$(p:nth-child(3))
gets the 3rd element of the parent. n=even, odd too.
$(p:nth-child(5n+1)) gets the 1st element after every 5th one
$(p a)
<a> elements, descended from a 
$(p>a)
<a> elements, direct child of a 
$(p+a)
<a> elements, directly following a 
$(p, a)
 and <a> elements
$(li:has(ul))
<li> elements that have at least one <ul> descendent
$(:not(p))
all elements but elements
$(p:hidden)
only elements that are hidden
$(p:empty)
 elements that have no child elements
Selecting Elements, cont.

$(img[alt])
<img> elements having an alt attribute
$(a[href^=http://]) <a> elements with an href attribute
starting with http://

$(a[href$=.pdf])
ending with .pdf
$(a[href*=ntpcug])
containing ntpcug
<a> elements with an href attribute

<a> elements with an href attriute
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 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
Tutorial 3 Formatting Elements

.css(property, value)
.html()
.val() (form elements)
.text()
.addClass(class)
.removeClass(class)
Tutorial 4 Add Page Elements
$(#target).before(Inserted before #target);

$(#target).after(This is added after #target);
$(#target).append(Goes inside #target, at end);
$(#target).wrap(<div></div>);
Adding Events
Mouseover events bind, hover, toggle
Button click events
Keystrokes
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
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);
Element Properties this
this
this.id
this.tagName
this.attr
this.src
this.classname
this.title
this.alt
this.value (for form elements)
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
Event Methods
.stopPropagation()
.preventDefault()
.trigger(eventType)
no bubbling
no <a> link, no <form> submit
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
Shortcut Event Binding
.click(func)
.submit(func)
.dblclick(func)
.mouseover(func)
.mouseout(func)
.select(func)
Useful Event Functions

.hide()
display:true
.show()
display:none
.toggle(func1, func2) first click calls func1, next
click executes func2

.hover(over, out)
mouseover, mouseout
AJAX
What is AJAX
The basic AJAX function
XMLHttpRequest
Initiating a request
Getting the response

Jquery: The Way To Javascript and Rich Internet Applications

Uploaded by

Copyright:

Available Formats

Jquery: The Way To Javascript and Rich Internet Applications

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery: The Way To Javascript and Rich Internet Applications

Uploaded by

Copyright:

Available Formats

jQuery

The Way to JavaScript and Rich

interaction between JavaScript and HTML. It was released in

for the Mozilla Corporation and the author

Rich Internet Applications (RIA)

How can I learn it

jQuery in Action by Bibeault & Katz, Manning

Plan for the 4 sessions

jquery-1.3.2.js file and put it in your

What jQuery Does

behavior from structure

HTML to CSS to DHTML

5 Things jQuery Provides

on a page one element or a group of them

language-independent convention for representing and interacting

The jQuery Function

Tutorial 1 The Ready Function

Set up a basic HTML page and add jQuery

Tutorial 2 Selecting Elements

Selecting Elements, cont.

starting with http://

<a> elements with an href attribute

Useful jQuery Functions

Tutorial 3 Formatting Elements

Tutorial 4 Add Page Elements

$(#target).before(<p>Inserted before #target</p>);

Basic Syntax of Event Binding

Element Properties this

event.target ref to element triggering event

Shortcut Event Binding

Useful Event Functions

click executes func2

You might also like