<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> Advanced Forms
<jquery API >
  spacerspacer

JQuery Fundamentals

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.

DOM Alternative: JQuery provides a shorthand method for cross browser DOM manipulation. Instead of building forked code to deal with browser differences we can shift the heavy lifting to the API and can more work with less lines of code.

Why jQuery?: Good question! jQuery is emerging as one of the most popular JavaScript APIs but it is by no means the only one. You can make equally good use of MooTools, Scriptaculous and the Yahoo UI. Lately jQuery has been emerging as the most popular and clients and employers are beginning to demand it, so it is where we should place our focus.

JQuery Only Syntax: When we begin to work with jQuery we find we can do very little 'mix and match' of jQuery and traditional DOM manipulation.

JQuery Latest: place a the code for the include file into your pages:

http://code.jquery.com/jquery-latest.js

window.onload, the jQuery way: We're familiar with using the onload attribute of the body tag to load JS scripts and the unobtrusive equivalent window.onload event. Now that we're about to do jQuery, there is a new way to attach code to the window.onload event:

$("document").ready()

In the above we are able to attach code to the window.onload event the jQuery way. Using jQuery also adds the benefit of being able to add more than one function to the event like our addOnload() custom function.

Basic Selectors: jQuery makes short work of selecting DOM elements. View the jQuery version of selectors from some of our favorite DOM methods:

Selector Purpose Example Returns
element name
Selects all elements of a certain type
$("p")
Selects all <p> tags, like getElementsByTagName()
id
Selects a single element by the id attribute
$("#myDiv")
Selects a single element - like getElementById()
class
Selects all elements which have a specific class attribute
$(".myClass")
Selects all elements that have a class attribute of myClass - like getElementsByClassName()

Combination Selectors: Besides the shorthand versions of traditional DOM selectors, jQuery allows you to combine selectors to further specify a set of elements. Here is a list of some advanced combination selectors:

Selector Purpose Example Returns
selector,selector,selector
Selects a comma separated list of different selectors
$("a,#myID,.myClass")
All <a> tags, an element with an ID of myID and all elements with a class of .myClass
.myClass.myOtherClass
Selects only elements which have both classes
$(".myClass.myOtherClass")
Both classes must be applied which filters down the list of selectors
parent>child
Selects all direct child nodes of the parent selector
$("#myID>p")
Selects all <p> tags that are directly inside an element with an id of myID (can't be nested)
ancestor descendant
Finds all descendant elements inside an container element
$("ul li.myClass")
Selects all <li> tags with a class of myClass inside any <ul> tag (nested or not)
prev + next
Selects all next elements that are next to a prev element
$("p + b")
Selects all <b> tags next to a <p> tag
prev ~ siblings
Selects all sibling elements that come after prev and match the siblings selector
$("#myID ~ span") Selects all <span> tags that come after an element with an id of myID

Basic Filters: Filters provide a way to narrow down the selectors chosen to match certain conditions. For example we could select all <p> tags, then filter down our list to only the first <p> tag of a set. Here is a list of some basic filters:

Filters Purpose Example Returns
:first
Selects only the first instance of the set
$("p:first")
The first <p> tag in a set
:last
Selects only the last instance of the set
$(".myClass:last")
The last element with a class of myClass in a set
:even
Selects only even numbered items in the set
$("p:even")
Selects all <p> tags that are even numbered (0,2,4, etc.)
:odd
Selects only odd numbered items in the set
$(".myClass:odd")
Selects all odd elements (1,3,5, etc.) of a set of elements with a class of myClass
:eq(n)
Equal: Returns only the item at the given index
$("p:eq(2)")
Selects only the <p> tag in the #2 position
:gt(n)
Greater Than: Includes elements that are past (greater than) the given index
$("p:gt(1)") Selects all <p> tags greater than the first <p> tag in a set (1 or higher)
:lt(n)
Less Than: Includes elements that are before (less than) the given index
$("p:lt(5)") Selects all <p> tags that come before the #5 tag in the set (4 or lower)
:header All <h> type elements $(".myClass:header") Selects all <h1>, <h2>, etc. header elements that have myClass applied
:animated()
All elements currently being animated
$("p:animated()") Selects all currently animated <p> elements
:not(selector)
Negation: Elements that do not match the given selector
$("p:not(eq(3))") Selects all the <p> tags not in the #3 position

Attribute Filters: We can also filter our set of elements returned by investigating the contents of the attributes inside the elements (beside the class and id attributes, addressed above). We can further filter by identifying partial text matches, etc:

Filters Purpose Example Returns
[attribute]
Contains Attribute: Selects elements that contain the given attribute, regardless of content
$("p[class]")
All <p> tags that have some sort of class attribute
[attribute=value]
Matching Value: Selects elements that contain the given attribute only if it has a matching value
$("p[class=Current]")
All <p> tags that have the class attribute equal to Current
[attribute!=value]
Attribute Exists, Value Does Not Match: Selects elements that contain the given attribute but must not match the given value
$("p[class!=Current]")
All <p> tags that have the class attribute not equal to Current
[attribute^=value]
Starts with: Selects elements that contain the given attribute only if they start with a given string
$("div[id^=myDiv]")
Selects all <div> elements whose id attributes start with "myDiv", for example, myDiv1 and myDiv2
[attribute$=value]
Ends With: Selects elements that contain the given attribute only if they end with a given string
$("p[class$=ing]")
Selects all elements have a class attribute ending with "ing", for example "raining" and "pouring"
[attribute*=value]
Contains: Selects elements that contain the given attribute only if they contain a given string somewhere inside
$("div[id^=iv]")

Selects all <div> elements whose id attributes contain the letters "iv" for example, myDiv and yourDiv

Compare to our use of indexOf() to find a needle

[attr1][attr2]
Must match all specified attribute filters
$("img[class=pics][src*=sky]") Selects all <img> tags that have a class of pics attached and the src attribute includes the string 'sky', for example 'blue-sky.jpg' and 'red-sky.jpg'

Content, Visibility & Child Filters: We can also filter our set of elements based on their current content, or whether or not jQuery currently has the visibility of the element set to visible or hidden:

Filters Purpose Example Returns
:contains(text)
Selects only elements that contain the text
$("p:contains(important)")
All <p> tags that contain the text "important"
:empty
Selects only empty elements
$("p:empty")
Selects all <p> tags that contain no content
:has(selector)
Elements must contain at least one element that has the selector
$("ul:has(li[class=myClass])")
All <ul> tags that contain <li> elements with class attribute of myClass
:parent

Matches all elements that are parents - (must have one child element, even text)

$("p:parent")
Selects all <p> tags that contain content
:visible
Only visible elements
$("p:visible")
Selects all <p> tags that are visible
:hidden
Only hidden elements
$("p:hidden")

Selects all <p> tags that are hidden

:nth-child()
Matches index, even or odd increments. Also allows an equation to be entered.
$("ul li:nth-child(2)")

Selects the 2nd child <li> items in all <ul> elements (starts count at one instead of zero

:first-child
Matches elements that are the first child of their parent
$("ul:first-child")

Selects all elements that are the first child of each <ul> tag

:last-child
Matches elements that are the last child of their parent
$("ul:last-child")

Selects all elements that are the last child of each <ul> tag

:only-child
Matches elements that are the only child of their parent
$("ul:only-child")

Selects all elements that are the only child of each <ul> tag

Document Traversal: jQuery provides a set of functions and properties for the returned result set of elements that allow us to determine the number of elements returned or to loop through each of the elements to manipulate them:

Function/Property Purpose Example Returns
size(), length
The number of elements in a jQuery result set

$("p").length

$("p").size()

The number of <p> tags on the page
get()
Returns an array of DOM elements from a jQuery result set. Use this for straight DOM manipulation.
$("p").get()
Returns all <p> tags for normal DOM manipulation
get(n)
Returns a single element as a DOM element from a jQuery result set. Use this for straight DOM manipulation.
$("p").get(0)
Returns the first <p> tag for normal DOM manipulation
find(expression)

Searches for descendant elements that match an expression

$("ul").find("li.myClass")
Selects all <li> tags within <ul> tags that have a class named myClass
each(function)
Execute a function for each matched element
$("p").each(init)
Run the init function on each of the returned <p> tags
after(html)
Execute a function for each matched element
$("p").after("!!!")
Place HTML immediately after the selector
before(html)
Execute a function for each matched element
$("p").before("1)")
Place HTML immediately before the selector

Statement Chaining: In jQuery we can string together (chain) multiple functions or operations without needing to return our function to a variable. View the following:

$("ul").find("li.myClass").css("

Just as CSS separates "display" characteristics from the HTML structure, jQuery separates the "behavior" characteristics from the HTML structure. For example, instead of directly specifying the on-click event handler in the specification of a button element, a jQuery driven page would first identify the button element, and then modify its onclick event handler. This separation of behavior from structure is also referred to as the principle of Unobtrusive JavaScript

Just as CSS separates "display" characteristics from the HTML structure, jQuery separates the "behavior" characteristics from the HTML structure. For example, instead of directly specifying the on-click event handler in the specification of a button element, a jQuery driven page would first identify the button element, and then modify its onclick event handler. This separation of behavior from structure is also referred to as the principle of Unobtrusive JavaScript

 


Here's a link to some JQuery Demos   Here's a nice feature built on JQuery: Innerfade Here's very nice rounded corner plugin: JQuery Corners   Here's a nice tabs effect.  Here's a JQuery Pager Effect.  Heres a list of JQuery Plugins 


This is a cool effect, which uses JQuery's modal window (opens a window in front of the browser window, a lightbox effect) Thickbox 3.1 


Here's a bunch more: 50 amazing JQuery Examples


There are some nice demos of jQuery for the book JavaScript: The Missing Manual, which is my recommendation for a jQuery intro book: Missing Manual jQuery Examples

   
Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved