RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


An Introduction to jQuery, Part 1 : Page 2

jQuery is a small JavaScript library that makes development of HTML-based client JavaScript drastically easier.


Adding jQuery to Your Page

jQuery is a client script library and so you have to add a script reference to your page. You can download the latest version of jQuery from the jQuery site.

You can include jQuery in your ASP.NET pages in a number of ways:

  • Reference a local copy via a <script> tag in the page.
  • Reference a local copy with ScriptManager.
  • Embed script from a resource using the ClientScript object.
  • Reference a remote copy from jQuery.com or Google AJAX API.
Both jQuery.com and Google host the jQuery script files on their sites. Google's repository includes both static files and Google API dynamic links to load libraries for both jQuery and jQuery.ui. Of the two, the Google site tends to be faster and more reliable.

Personally I prefer to have local copies of my libraries so my applications aren't dependent on an online resource if my connection is down or if I'm offline. I use local scripts stored in a /scripts folder of my web application. The examples in this article use that strategy. Here's some sample code to add jQuery to a page:

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
       <script src="scripts/jquery.js"
Author's Note: If you're interested in more info on the pros and cons of the various script inclusion methods, check out this blog post.

Getting Started with Selectors

Selectors make jQuery useful. You start by selecting content, and then applying a jQuery function to it. You can select a single element:

       .css("border", "solid 1px navy");
Or select by CSS class (.):

       .css("background", "lightsteelblue ");
You can also select by multiple CSS selectors separated by commas. The following example matches elements that belong to either of two CSS classes:

       .attr("tag", "row");
You can also select elements by tag name (e.g. div, tr, input, etc.) and apply filters to the elements. The following code selects all input elements that are buttons, and attaches a click handler to them:

A more complex selector might select all rows in a table:

       .css("border", "solid 1px red");
If you're at all familiar with CSS, all this should look familiar: basically, you can use the same syntax selectors CSS style sheets use (with the exception of the :button filter shown above—jQuery adds a number of custom filters) to select elements. The idea is simple: Use what you already know rather than some custom syntax. CSS element selection is quite powerful and—given a reasonably thoughtful HTML layout—makes selecting just about any element or group of elements in a document easy.

If you're rusty on CSS, Table 1 shows a few of the common jQuery/CSS selector types that you can apply (see the full list).

Selector Example Description
Element $("td") Selects an HTML element tag.
#id $("#divMessage") Selects an element by its ID.
.cssclass $(".gridalternate") Selects a CSS style.
selector,selector $("input:button,input:text") You can combine multiple comma-separated selectors into a single selection.
ancestor descendant $("#divMessage a") A space between selectors/elements/tags finds nested elements. This syntax is similar to CSS ancestor descendant syntax.
parent > child> child $("p>b") Matches all immediate children of an element or selector expression that match the right element/selector.
prev ~ siblings~ siblings $("#row_11:nth-child(2)~td")$("~td") Matches the next siblings at the sample level as the preceding expression. The example matches columns 3-N of a table row. Best used as a find() or filter() against an existing jQuery instance.
prev + nextsibling+ nextsibling $("#tdMoneyCol+td")$("+td") Matches the following sibling. Works best with find() or filter() against an existing jQuery object.
:filter $("input:button") The colon (:) applies filters to the query. jQuery supports CSS 3 filters as well as a number of custom filters.Examples: :not, :button, :visible, :hidden, :checked, :first,nth-child(1), :has, :is, :contains, :parent
[attribute] $("p[id^=pk_"] Selects an attribute of an element= equals string
^= startswith
$= endswith
*= contains

Selectors can get quite sophisticated. For example, the following code selects from a table named gdEntries all the cells whose ID begins with pk, and then sets their width to 30:

Cool eh? You get a lot of control over picking up the exact elements you are looking for.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date