Introduction to jQuery
JavaScript
A script language that interpreted
by browser
OOP
Dynamic typing
Run-time evaluation
JavaScript Libraries
jQuery
Mootools
Prototype
YUI
Introduction to jQuery
Developed in 2006 by John Resig at Rochester
Institute of Technology
jQuery is a lightweight JavaScript library that
emphasizes interaction between JavaScript and
HTML
jQuery is free, open source software Dual-licensed
under the MIT License and the
GNU General Public License
Helps web developers to create simple pieces of
interaction without being forced to write long,
complex, book-length pieces of code
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
Summary
Introduction, installation, Howdy World,
Ready function, DOM, Selecting and
Formatting web page elements
Events and Animations
jQuery Plugin libraries
AJAX with PHP and ASP.NET
Introduction to jQuery
Installation
just download the jquery-1.x.x.js file and put it in
your website folder
Using jQuery
Visual Web Developer Express Edition
Expression Web
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
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
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
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);
Selecting Elements
Creating a wrapped set
$(selector)
selector:
$(#id)
id of element
$(p)
tag name
$(.class)
CSS class
$(p.class) <p> elements having the CSS class
$(p:first) $(p:last) $(p:odd) $(p:even)
$(p:eq(2))
gets the 2nd <p> element (1 based)
$(p)[1]
gets the 2nd <p> element (0 based)
$(p:nth-child(3))
gets the 3rd <p> 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>
$(p>a)
<a> elements, direct child of a <p>
$(p+a)
<a> elements, directly following a <p>
$(p, a)
<p> and <a> elements
$(li:has(ul))
<li> elements that have at least one <ul> descendent
$(:not(p))
all elements but <p> elements
$(p:hidden)
only <p> elements that are hidden
$(p:empty) <p> elements that have no child elements
Selecting Elements, cont.
$(img[alt])
$(a[href^=http://])
$(a[href$=.pdf])
$(a[href*=ntpcug])
<img> elements having an alt attribute
<a> elements with an href attribute
starting with http://
<a> elements with an href
attribute ending with .pdf
<a> elements with an href attriute
containing ntpcug
Useful jQuery Functions
.each()
.size()
.end()
.get(n)
.eq(n)
.slice(n,m)
.not(p)
.add(p)
.remove()
.empty()
.filter(fn/sel)
.find(selector)
.parent()
.children()
.next()
.prev()
.siblings()
iterate over the set
number of elements in set
reverts to the previous set
get just the nth element (0 based)
get just the nth element (0 based) also .lt(n) & .gt(n)
gets only nth to (m-1)th elements
dont include p elements in set
add <p> elements to set
removes all the elements from the page DOM
removes the contents of all the elements
selects elements where the func returns true or sel
selects elements meeting the selector criteria
returns the parent of each element in set
returns all the children of each element in set
gets next element of each element in set
gets previous element of each element in set
gets all the siblings of the current element
Formatting Elements
.css(property, value)
.html()
.val()
(form elements)
.text()
.addClass(class)
.removeClass(class)
Add Page Elements
$(#target).before(<p>Inserted before #target</p>);
$(#target).after(<p>This is added after #target</p>);
$(#target).append(<p>Goes inside #target, at end</p>);
$(#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);
jQuery Core
jQuery(selector, [ context ]): Accepts a
string containing a CSS selector which is then
used to match a set of elements and returns a
jQuery object.
jQuery(element)
jQuery(elementArray)
jQuery(jQuery object)
jQuery()
can be written as $()
jQuery Events
.ready(handler) : execute handler when the DOM is fully loaded.
js
function printhello(){
$(#hello).html(Hello,
jQuery!);
}
$(document).ready(printhello());
Same as window.onload???
js
$(document).ready(function(){
$(#hello).html(Hello, jQuery!);
});
jQuery Events
.bind()
.blur()
.change()
.click()
.focus()
.hover()
.select()
.toggle()
.trigger()
.submit()
.mousedown()
.mouseenter()
.mouseleave()
.keypress()
.keyup()
