What is jQuery?
jQuery
is a library of JavaScript Functions.
jQuery
is a lightweight "write less, do more" JavaScript library.
The
jQuery library contains the following features:
- HTML element selections
- HTML element manipulation
- CSS manipulation
- HTML event functions
- JavaScript Effects and
animations
- HTML DOM traversal and
modification
- AJAX
- Utilities
Adding the jQuery
Library to Your Pages
- The jQuery library is stored as
a single JavaScript file, containing all the jQuery methods.
- It can be added to a web page
with the following mark-up:
Basic jQuery Example
Downloading jQuery
Two
versions of jQuery are available for downloading: one minified and one
uncompressed (for debugging or reading).
Alternatives to
Downloading
If
you don't want to store the jQuery library on your own computer, you can use
the hosted jQuery library from Google or Microsoft.
The Document Ready
Function
You
might have noticed that all jQuery methods, in our examples, are inside a
document.ready() function:
This is
to prevent any jQuery code from running before the document is finished loading
(is ready).
jQuery
Syntax
The jQuery syntax is tailor made for
selecting HTML elements and perform some action on the element(s).
Basic syntax is: $(selector).action()
•A dollar sign to define jQuery
•A (selector) to "query (or
find)" HTML elements
•A jQuery action() to be performed on the
element(s)
Examples:
$(this).hide() - hides current element
$("p").hide() - hides all
paragraphs
$("p.test").hide() - hides all
paragraphs with class="test"
$("#test").hide() - hides the
element with id="test"
jQuery Selectors
Selector
|
Example
|
Selects
|
|
$("*")
|
All elements
|
|
$("#lastname")
|
The element with
id=lastname
|
|
$(".intro")
|
All elements with
class="intro"
|
|
$("p")
|
All p elements
|
.class.class
|
$(".intro.demo")
|
All elements with the
classes "intro" and "demo"
|
|
|
|
|
$("p:first")
|
The first p element
|
|
$("p:last")
|
The last p element
|
|
$("tr:even")
|
All even tr elements
|
|
$("tr:odd")
|
All odd tr elements
|
|
|
|
|
$("ul
li:eq(3)")
|
The fourth element in
a list (index starts at 0)
|
|
$("ul
li:gt(3)")
|
List elements with an
index greater than 3
|
|
$("ul
li:lt(3)")
|
List elements with an
index less than 3
|
|
$("input:not(:empty)")
|
All input elements
that are not empty
|
|
|
|
|
$(":header")
|
All header elements
h1, h2 ...
|
|
$(":animated")
|
All animated elements
|
|
|
|
|
$(":contains('W3Schools')")
|
All elements which
contains the text
|
|
$(":empty")
|
All elements with no
child (elements) nodes
|
:hidden
|
$("p:hidden")
|
All hidden p elements
|
|
$("table:visible")
|
All visible tables
|
|
|
|
s1,s2,s3
|
$("th,td,.intro")
|
All elements with matching
selectors
|
|
|
|
|
$("[href]")
|
All elements with a
href attribute
|
|
$("[href='default.htm']")
|
All elements with a
href attribute value equal to "default.htm"
|
|
$("[href!='default.htm']")
|
All elements with a
href attribute value not equal to "default.htm"
|
|
$("[href$='.jpg']")
|
All elements with a
href attribute value ending with ".jpg"
|
|
|
|
|
$(":input")
|
All input elements
|
|
$(":text")
|
All input elements
with type="text"
|
|
$(":password")
|
All input elements
with type="password"
|
|
$(":radio")
|
All input elements
with type="radio"
|
|
$(":checkbox")
|
All input elements
with type="checkbox"
|
|
$(":submit")
|
All input elements
with type="submit"
|
|
$(":reset")
|
All input elements
with type="reset"
|
|
$(":button")
|
All input elements
with type="button"
|
|
$(":image")
|
All input elements
with type="image"
|
|
$(":file")
|
All input elements
with type="file"
|
|
|
|
|
$(":enabled")
|
All enabled input
elements
|
|
$(":disabled")
|
All disabled input
elements
|
|
$(":selected")
|
All selected input
elements
|
|
$(":checked")
|
All checked input
elements
|
jQuery Effects
Here
are some examples of effect functions in jQuery:
Method
|
Description
|
|
Performs a custom animation
(of a set of
CSS properties) for selected elements
|
|
Removes all queued functions for the
selected element
|
delay()
|
Sets a delay for all queued functions for
the selected element
|
dequeue()
|
Runs the next queued functions for the
selected element
|
|
Gradually changes the opacity, for
selected elements, from hidden to visible
|
|
Gradually changes the opacity, for
selected elements, from visible to hidden
|
|
Gradually changes the opacity, for
selected elements, to a specified opacity
|
fadeToggle()
|
|
|
Hides selected elements
|
queue()
|
Shows the queued functions for the
selected element
|
|
Shows hidden selected elements
|
|
Gradually changes the height,
for
selected elements, from hidden to visible
|
|
Toggles between slideUp()
and slideDown()
for selected elements
|
|
Gradually changes the height,
for
selected elements, from visible to hidden
|
|
Stops a running animation on
selected
elements
|
|
Toggles between hide() and show(),
or
custom functions, for selected elements
|
Function
|
Description
|
$(selector).hide()
|
Hide selected elements
|
$(selector).show()
|
Show selected elements
|
$(selector).toggle()
|
Toggle (between hide
and show) selected elements
|
$(selector).slideDown()
|
Slide-down (show)
selected elements
|
$(selector).slideUp()
|
Slide-up (hide)
selected elements
|
$(selector).slideToggle()
|
Toggle slide-up and
slide-down of selected elements
|
$(selector).fadeIn()
|
Fade in selected
elements
|
$(selector).fadeOut()
|
Fade out selected
elements
|
$(selector).fadeTo()
|
Fade out selected
elements to a given opacity
|
$(selector).animate()
|
Run a custom animation
on selected element
|
jQuery
Callback Functions
A callback function is
executed after the current animation is 100% finished.
jQuery Callback
Functions
JavaScript
statements are executed line by line. However, with animations, the next line
of code can be run even though the animation is not finished. This can create
errors.
To
prevent this, you can create a callback function.
A
callback function is executed after the current animation (effect) is finished.
Typical
syntax: $(selector).hide(speed,callback)
The
callback parameter is a function to be executed after the hide effect is
completed:
jQuery
HTML Manipulation
jQuery contains
powerful methods (functions) for changing and manipulating HTML elements and
attributes.
jQuery HTML Methods
The
following table lists all the methods used to manipulate the DOM.
The
methods below work for both HTML and XML documents. Exception: the html()
method.
Method
|
Description
|
|
Adds one or more
classes (for CSS) to selected elements
|
|
Inserts content after
selected elements
|
|
Inserts content at the
end of (but still inside) selected elements
|
|
Inserts content at the
end of (but still inside) selected elements
|
|
Sets or returns an
attribute and value of selected elements
|
|
Inserts content before
selected elements
|
|
Makes a copy of
selected elements
|
|
Removes (but keeps a
copy of) selected elements
|
|
Removes all child
elements and
content from selected elements
|
|
Checks if any of the
selected elements
have a specified class (for CSS)
|
|
Sets or returns the
content of selected elements
|
|
Inserts HTML markup or
elements after selected elements
|
|
Inserts HTML markup or
elements before selected elements
|
|
Inserts content at the
beginning of
(but still inside) selected elements
|
|
Inserts content at the
beginning of
(but still inside) selected elements
|
|
Removes selected
elements
|
|
Removes an attribute
from selected elements
|
|
Removes one or more
classes (for CSS) from selected elements
|
|
Replaces selected
elements with new content
|
|
Replaces selected
elements with new content
|
|
Sets or returns the
text content of selected elements
|
|
Toggles between
adding/removing one or more classes
(for CSS) from selected elements
|
|
Removes the parent
element of the selected elements
|
|
Sets or returns the
value attribute of the selected
elements (form elements)
|
|
Wraps specified HTML
element(s) around each selected element
|
|
Wraps specified HTML
element(s) around all selected elements
|
|
Wraps specified HTML
element(s) around the
content of each selected element
|
jQuery
CSS Manipulation
jQuery
has one important method for CSS manipulation: css()
The
css() method has three different syntaxes, to perform different tasks.
- css(name) - Return CSS property
value
- css(name,value) - Set CSS
property and value
- css({properties}) - Set
multiple CSS properties and values
$("p").css({"background-color":"yellow","font-size":"200%"});
$("#div1").height("200px");
$("#div2").width("300px");
CSS Properties
|
Description
|
$(selector).css(name)
|
Get the style property
value of the first matched element
|
$(selector).css(name,value)
|
Set the value of one
style property for matched elements
|
$(selector).css({properties})
|
Set multiple style
properties for matched elements
|
$(selector).height(value)
|
Set the height of
matched elements
|
$(selector).width(value)
|
Set the width of
matched elements
|
jQuery CSS Methods
The
following table lists all the methods used to manipulate CSS properties.
Method
|
Description
|
|
Adds one or more
classes to selected elements
|
|
Sets or returns one or
more style properties for selected elements
|
|
Checks if any of the
selected elements have a specified class
|
|
Sets or returns the
height of selected elements
|
|
Sets or returns the
position (relative to the document) for selected elements
|
|
Returns the first
parent element that is positioned
|
|
Returns the position
(relative to the parent element) of the first selected element
|
|
Removes one or more
classes from selected elements
|
|
Sets or returns the
horizontal position of the scrollbar for the selected elements
|
|
Sets or returns the
vertical position of the scrollbar for the selected elements
|
|
Toggles between
adding/removing one or more classes from selected elements
|
|
Sets or returns the
width of selected elements
|
jQuery
Event Methods
Event
methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click()
- triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()})
- binds a function to the click event.
Event
methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click()
- triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()})
- binds a function to the click event.
The
following table lists all the methods used to handle events.
Method
|
Description
|
|
Add one or more event
handlers to matching elements
|
|
Triggers, or binds a
function to the blur event of selected elements
|
|
Triggers, or binds a
function to the change event of selected elements
|
|
Triggers, or binds a
function to the click event of selected elements
|
|
Triggers, or binds a
function to the dblclick event of selected elements
|
|
Add one or more event
handlers to current, or future, specified child elements of the matching
elements
|
|
Remove all event
handlers added with the live() function
|
|
Triggers, or binds a
function to the error event of selected elements
|
event.currentTarget
|
The current DOM
element within the event bubbling phase
|
event.data
|
Contains the optional
data passed to jQuery.fn.bind when the current executing handler was bound
|
|
Returns whether
event.preventDefault() was called for the event object
|
event.isImmediatePropagationStopped()
|
Returns whether
event.stopImmediatePropagation() was called for the event object
|
event.isPropagationStopped()
|
Returns whether
event.stopPropagation() was called for the event object
|
|
The mouse position
relative to the left edge of the document
|
|
The mouse position
relative to the top edge of the document
|
|
Prevents the default
action of the event
|
event.relatedTarget
|
The other DOM element
involved in the event, if any
|
|
This attribute
contains the last value returned by an event handler that was triggered by
this event, unless the value was undefined
|
event.stopImmediatePropagation()
|
Prevents other event
handlers from being called
|
event.stopPropagation()
|
Prevents the event
from bubbling up the DOM tree, preventing any parent handlers from being
notified of the event
|
|
The DOM element that
initiated the event
|
|
This attribute returns
the number of milliseconds since January 1, 1970, when the event is triggered
|
|
Describes the nature
of the event
|
|
Which key or button
was pressed for a key or button event
|
|
Triggers, or binds a
function to the focus event of selected elements
|
|
Binds a function to
the focusin event of selected elements
|
|
Binds a function to
the focusout event of selected elements
|
|
Binds one or two
functions to the hover event of selected elements
|
|
Triggers, or binds a
function to the keydown event of selected elements
|
|
Triggers, or binds a
function to the keypress event of selected elements
|
|
Triggers, or binds a
function to the keyup event of selected elements
|
|
Add one or more event
handlers to current, or future, matching elements
|
|
Triggers, or binds a
function to the load event of selected elements
|
|
Triggers, or binds a
function to the mouse down event of selected elements
|
|
Triggers, or binds a
function to the mouse enter event of selected elements
|
|
Triggers, or binds a
function to the mouse leave event of selected elements
|
|
Triggers, or binds a
function to the mouse move event of selected elements
|
|
Triggers, or binds a
function to the mouse out event of selected elements
|
|
Triggers, or binds a
function to the mouse over event of selected elements
|
|
Triggers, or binds a
function to the mouse up event of selected elements
|
|
Add one or more event
handlers to matching elements. This handler can only be triggered once per
element
|
|
Binds a function to
the ready event of a document
(when an HTML document is ready to use)
|
|
Triggers, or binds a
function to the resize event of selected elements
|
|
Triggers, or binds a
function to the scroll event of selected elements
|
|
Triggers, or binds a
function to the select event of selected elements
|
|
Triggers, or binds a
function to the submit event of selected elements
|
|
Binds two or more
functions to the toggle between for the click event for selected elements
|
|
Triggers all events
bound to the selected elements
|
|
Triggers all functions
bound to a specified event for the selected elements
|
|
Remove an added event
handler from selected elements
|
|
Remove an event
handler to selected elements, now or in the future
|
|
Triggers, or binds a
function to the unload event of selected elements
|
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts
of data with the server behind the scenes. This means that it is possible to
update parts of a web page, without reloading the whole page.
AJAX and jQuery
jQuery
provides a rich set of methods for AJAX web development.
With
jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server
using both HTTP Get and HTTP Post.
And you can load remote data directly into selected HTML elements
of your web page!
Write Less, Do More
The
jQuery load() method is a simple (but very powerful) AJAX function. It has the
following syntax:
$(selector).load(url,data,callback)
Use
the selector to define the HTML element(s) to change, and the url
parameter to specify a web address for your data.
Only
if you want to send data to the server, you need to use the data
parameter. Only if you need to trigger a function after completion, you will
use the callback parameter.
Low Level AJAX
$.ajax(options)
is the syntax of the low level AJAX function.
$.ajax
offers more functionality than higher level functions like load, get, and post,
but it is also more difficult to use.
The
option parameter takes name|value pairs defining url data, passwords, data
types, filters, character sets, timeout and error functions.
Request
|
Description
|
$(selector).load(url,data,callback)
|
Load remote data into
selected elements
|
$.ajax(options)
|
Load remote data into
an
XMLHttpRequest object
|
jQuery AJAX Methods
AJAX
is the art of exchanging data with a server, and update parts of a web page -
without reloading the whole page.
The
following table lists all the jQuery AJAX methods:
Method
|
Description
|
|
Performs an AJAX
request
|
|
Specifies a function
to
run when the AJAX request completes
|
|
Specifies a function
to
run when the AJAX request completes with an error
|
|
Specifies a function
to
run before the AJAX request is sent
|
|
Sets the default
values
for future AJAX requests
|
|
Specifies a function
to
run when the first AJAX request begins
|
|
Specifies a function
to
run when all AJAX requests have completed
|
|
Specifies a function
to
run an AJAX request completes successfully
|
|
Loads data from a
server
using an AJAX HTTP GET request
|
|
Loads JSON-encoded
data
from a server using a HTTP GET request
|
|
Loads (and executes) a
JavaScript
from the a server using an AJAX HTTP GET request
|
|
Loads data from a
server and
puts the returned HTML into the selected element
|
|
Creates a serialized
representation
of an array or object (can be used
as URL query string for
AJAX requests)
|
|
Loads data from a
server using
an AJAX HTTP POST request
|
|
Encodes a set of form
elements
as a string for submission
|
|
Encodes a set of form
elements as
an array of names and values
|
JQuery versus Dojo versus YUI
In search for a reliable open source javascript library/framework that works cross-browser, I came across the following:
JQuery
YUI (The Yahoo! User Interface Library)
Dojo Toolkit
JQuery
Pros:
- JQuery is the most popular one of them all.
- It is very easy to use and to understand.
- The core library is only 15Kb in size.
- Their statement is: ‘The Write Less, Do More, Javascript Library’.
Cons:
- Hard to use with object oriented programming
- JQuery supports plug-ins, but all these plug-ins are not verified.
- JQuery is a library
YUI
Pros:
- It is developed by Yahoo
- Fully documented, with a great API browser
- Very consistent and reliable
- Also contains unit testing framework
- YUI is a framework
Cons:
- Heavy page weight
- Very few utility or helper functions/methods
- Lacks the use of chaining methods together
Dojo Toolkit
Pros:
- Debug your code in Firebug
- Dojo integrated in Zend Framework
- Hierarchical package system speeds loading
- Dojo is a framework
Cons:
- Dojo fails in online documentation