jQuery Introduction/ jquery basic concept

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

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
It’s all about simplicity. Why should web developers be forced
to write long, complex, book-length pieces of code when they
to write long, complex, book-length pieces of code when they
want to create simple pieces of interaction?”
want to 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
have announced
plans to bundle jQuery on their platforms,
plans 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.

• 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,
Class I – Introduction, installation,
“Howdy World”, Ready function, DOM,
“Howdy World”, Ready function, DOM,
Selecting and Formatting web page
Selecting and Formatting web page
elements
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

• 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,
movement, dynamic styles, animations,
dynamic content)
dynamic 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
You can add and subtract DOM
elements on the fly
elements 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
Tutorial 1 – The Ready
Function
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’) elements having the CSS class
 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 2nd
nd
 element (1 based)
– $(‘p’)[1]
$(‘p’)[1] gets the 2
gets the 2nd
nd
– $(‘p:nth-child(3))
$(‘p:nth-child(3)) gets the 3
gets the 3rd
rd
 element of the parent. n=even, odd too.
 element of the parent. n=even, odd too.
– $(‘p:nth-child(5n+1)’)
$(‘p:nth-child(5n+1)’) gets the 1
gets the 1st
st
element after every 5th one
element after every 5th one
– $(‘p a’)
$(‘p a’) <a> elements, descended from a 
<a> elements, descended from a 
– $(‘p>a’)
$(‘p>a’) <a> elements, direct child of a 
<a> elements, direct child of a 
– $(‘p+a’)
$(‘p+a’) <a> elements, directly following a 
<a> elements, directly following a 
– $(‘p, a’)
$(‘p, a’) and <a> elements
 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 elements
all elements but elements
– $(‘p:hidden’)
$(‘p:hidden’) only elements that are hidden
only elements that are hidden
– $(‘p:empty’)
$(‘p:empty’) elements that have no child elements
 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
<a> elements with an href
attribute ending with ‘.pdf’
attribute ending with ‘.pdf’
• $(‘a’[href*=ntpcug])
$(‘a’[href*=ntpcug]) <a> elements with an href
<a> elements with an href
attriute containing ‘ntpcug’
attriute 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 elements to set
add 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
Tutorial 4 – Add Page
Elements
Elements
• $(‘#target’).before(‘Inserted before #target’);
$(‘#target’).before(‘Inserted before #target’);
• $(‘#target’).after(‘This is added after #target’);
$(‘#target’).after(‘This is added after #target’);
• $(‘#target’).append(‘Goes inside #target, at end’);
$(‘#target’).append(‘Goes inside #target, at end’);
• $(‘#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
These handlers cannot be relied upon to
run an any particular order
run 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>
no <a> link, no <form>
submit
submit
• .trigger(eventType)
.trigger(eventType)does not actually trigger the
does not actually trigger the
event, but calls the appropriate function specified as
event, but calls the appropriate function specified as
the one tied to the eventType
the one tied to the eventType
• .click(), blur(), focus(), select(), submit()
.click(), blur(), focus(), select(), submit()
– With no parameter, invokes the event handlers,
With no parameter, invokes the event handlers,
like trigger does, for all the elements in the
like trigger does, for all the elements in the
wrapped set
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

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

jQuery Introduction/ jquery basic concept

More Related Content

Similar to jQuery Introduction/ jquery basic concept (20)

More from MuhammadJameel83 (6)

Recently uploaded (20)

jQuery Introduction/ jquery basic concept