On the previous article, I introduced jQuery and showed how to enable it in your web app, along with a little insight on the basics. Now I’ll start showing some of the most useful methods you will find in the library, along with a sample for each. jQuery API is normally split into the following categories:

• jQuery Core – Core of the library: jQuery function, object assessors, extensibility and interop methods.
• Selectors – Filtering and selection operators and attributes to use in jQuery function – #().
• Attributes – Generic attribute manipulation methods, including class, text, html and value attributes.
• Traversing – DOM traversing and selection filtering mechanisms.
• Manipulation – Element manipulation methods, like text, html and boundary content.
• CSS – CSS manipulation within elements.
• Events – Eventing portion of the API. Handles typical object UI events. Very useful.
• Effects – Some nice effects are made available out of the box like fades.
• Ajax – Ajax requests and events.
• Utilities – General auxiliary methods for browser and feature information and array manipulation.
• Internals – Other core methods that you probably won’t need.

In my opinion, each one of these categories is important and has something you might want to use in your web site development routine. Element selection, value manipulation, DOM traversing, visibility handling, eventing, styles and appearance, async calls, etc. You’ll want this jQuery behavior in your code from the moment you end up reading this set of articles. So, the best thing for me to do in order to make you productive with this is to explain and show an example of the most useful features and common usage examples of the jQuery API.

For starters, let’s see how we can manipulate style attributes in DOM objects using jQuery. You often need to change element style attribute values dynamically whether it’s for animation purposes, highlighting, or UI perception logic. The normal javascriptian way of doing it is like this:

document.getElementById("MyDOMobject").style.display = "none";

This line of code would make the element in question invisible. The same could be done in jQuery the following way:

$("#MyDOMobject").css("display", "none");

So after “grabbing” my element named “MyDOMobject” with the jQuery marker $, I’ve used the css(name, value) method. What this does is change a given style attribute name to the specified value. On the other hand, in order to read a given style attribute value, the css(name) signature should be used.

Similarly, the attr() method allows you to read/change a given element attribute. For instance, the following line of code…

$("div:first").attr("id");

… would search for the first div in the document, and return the value of the “id” attribute. Pay no attention to the selection part, we will discuss that later (I’m just throwing some bones here and there to spice things up!).

To change the value of an attribute, we do this:

$("input[type=checkbox]").attr("disabled", "true");

This last bit of code selects all document checkboxes and disables them by setting the “disabled” attribute to true. Similarly, we have methods to change element text, html and values. You have the text(), html() and val(), just like the css() method. For instance, you can set the html code within a div element with html() like this:

$("div:last").html("jQuery example from .net Brainwork!");

Output: “jQuery example from .net Brainwork!”.

The text() method has the same purpose, except that it escapes all html:

$("div:last").text("Another jQuery example from .net Brainwork!");

Output: “Another jQuery example from .net Brainwork!”

The val() method gets or sets the value attribute in the appropriate elements like in this example, where all text fields values are changed:

$("input[type=text]").val("jQuery val() demo from .net Brainwork!");

The same method with no parameters returns the value of all affected elements.

This subset of jQuery methods will allow you to perform come of the most common tasks when manipulating DOM elements with javascript. But one of the most powerful and interesting features in this API is the selection and filtering mechanism.

Like I’ve been demoing previously, you can write jQuery selection queries over the DOM using various criteria like the type of element, its relative position in the element tree, attribute values, etc. For instance, in the previous example I created a jQuery object by specifying “input”, which queries all input fields in the document as a result. I could also do:

// Select all document divs
$("div")

// Select all spans
$("span")

// Select all paragraphs
$("p")

 I then added an extra condition, a squared bracket filter to select only the text input fields. The square brackets allow you to input specific conditions based on the element’s attributes:

// Select using a value criteria
$("input[value='brainwork example']")

// select all text fields with values greater than 10
$("input[type=text][value^=10]")

Now I’ll talk about some filters jQuery has to offer. These filters allow you to apply relative positioning, type and DOM depth constraints to your element selection criteria. I’ll start by talking about hierarchy filters. These are targeted to element positioning, and they’re nothing but a simple operator between elements that adds some significance between them. For instance, the following example selects all input fields that are next to a label, though the “+” operator:

$("label + input[type=text]").val("Another Brainwork example!");

 “label” and “input” are the objects and “+” is the filtering operator. According to the previous example, the following input would be selected…

    Blog Name: 

On the other hand, this wouldn’t…

    Blog Url:  

Besides the “+” operator, which selects the next adjacent elements, there’s the “~” operator, that matches all sibling elements after the first specified element. For instance, consider the following scenario:

The following example selects all input fields after input field named #testfield, that have values greater than 5:

$("#testfield ~ input[type=text][value=5]").css("color", "#334455");

 You also have the “>” operator to select child elements, and you can also include no operator if you wish to select all descendants:

// select all child div elements inside the #menu element and change their border to red
$("#menu > div").css("border-color", "red");

// Select all input fields inside the form and change their text color
$("form input").css("color", "black");

Neat That does it for hierarchy, now onto positioning! jQuery uses the “:” operator to define some sort of filtering criteria over affected elements. Some of the most basic ones are:

$("p:last").css("color", "green"); // last paragraph on the document gets green text
$("tr:even").css("background-color", "red"); // even rows gets red background color
$("td:gt(2)").css("background-color", "blue"); // TD with index higher than 2 gets blue back color
$(":header").css("color", "black"); // matches all header  elements and changes their text color to black

Then there are specific filters that select input fields of some type, like these examples:

// Selects all input, textarea, select and button elements, and hides them
$(":input").hide()

// changes all text input field's color to red.
$(":text").css("color", "red")

// clears all password fields
$(":password").val("")

// clears all file input fields that are children of #divupload element
$("#divupload > input:file").val("")

Don’t forget to check out the full API reference for other filters. In the next article I’ll talk about CSS a bit more and also the eventing features of the API.

Technorati Tags: jQuery, Javascript

In this tutorial, I will be explaining what jQuery is, how it can help you in your web projects, and then you will be taken on a trip through the process of enabling jQuery on a web application. Trust me: if you’ve never tried jQuery, you’re in for a treat! Besides the library itself, jQuery also has a UI part, that allows you to easily integrate widgets in your UI. Take a look at this summary of jQuery’s roadmap so far:

August 26th, 2006 – First stable version of jQuery: jQuery 1.0

January 14th, 2007 – jQuery Birthday: 1.1, New Site, New Docs

September 10th, 2007 – jQuery 1.2 released: jQuery 1.2: jQuery.extend(“Awesome”)

September 17th, 2007 – New user interface library for jQuery: jQuery UI: Interactions and Widgets

July 14th, 2008 – jQuery UI 1.5.2

February 20th, 2009 – Maintenance release: jQuery 1.3.2 Released

March 6th, 2009 – jQuery UI 1.7 Released: New domain, New CSS Framework & Dramatic Updates to Controls

I’ve been using jQuery on my web projects since it was launched, although professionally I’ve only applied it in company projects this year, since I’ve been mostly involved in WPF and WCF. But since the first line of jQuery code I’ve been really addicted to it (like half of the world) and needless to say, I never leave home without it.

Basically, jQuery is a javascript library that aims to make your life easier. It handles all the usual challenges derived from developing web applications like browser compatibility and information, DOM manipulation and inspection, events and animations, etc. It handles all those issues internally and at the same time, you get a richer UI with nicer layout and style. To use it, all is required is the usual script reference in your pages:

The version I mentioned in the script reference (jquery-1.3.2.js) is the latest version at the time of this article. There is also a smaller version, compressed, that is file size optimized for faster loading. The filename is almost identical, except for the “min” before the extension: jquery-1.3.2.min.js. If you wish to debug  jQuery’s internals and see what’s happening, you should use the full version. Here’s a sample of the differences.

Uncompressed version:

(function(){

var
    // Will speed up references to window, and allows munging its name.
    window = this,
    // Will speed up references to undefined, and allows munging its name.
    undefined,
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$,

    jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

    // A simple way to check for HTML strings or ID strings
    // (both of which we optimize for)
    quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
    // Is it a simple selector
    isSimple = /^.[^:#\[\.,]*$/;

(...)

Compressed version:

(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init

(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype (...)

As you can see, the compressed version had variables renamed to take the fewer chars possible, comments were deleted and all spacing was abolished. This way you go from 117 KB (120.763 bytes) on the uncompressed version, to a modest 55,9 KB (57.254 bytes) in the compressed version. We’re talking about a 52.6% size reduction, which is still significant and a must, once you migrate your web app to production environment.

Now, to give you a small insight of what jQuery does for you, here’s a “quimple” -quick and simple – example of how it can make thing easier when referencing DOM elements in your javascript code. Consider the following:

document.getElementById("MyDOMObject").value;

With jQuery, it would be reduced down to this:

$("#MyDOMObject").val()

This is the universal way jQuery references the elements within a page. The $ is an alias for the jQuery “class”, and $() constructs a new jQuery object. The “#MyDOMObject” string specified as argument means we want a reference to an element. The “#” prefix signals that the following string will be an element id, so the jQuery object will, in the end, hold a reference to it. If, for instance, we had these blocks of code:

$("div")

or

$("table")

… it would select all elements of the div type and table type, respectively. So you see, $() wraps jQuery functionality around a single or an array of DOM Element(s). It also accepts XML Documents and Window objects as valid arguments even though they are not DOM Elements. It will also accept another jQuery object, effectively returning $(other.get()).

From there on, you can do anything. From changing element styling, to creating animations and managing events, everything can be done with ease.

So you’re starting to see the tip of the iceberg here, but there’s a still a long way to enlightment In the following article, I’ll be making a deep dive on some of the most useful methods and functions of jQuery, and also check out some cool UI samples using jQuery UI.

If you are currently developing for the web and animations and sleek design is your game don’t forget to check out  Glimmer, a WPF-based application that harnesses the power of JQuery:

“Glimmer is a WPF-based Windows application that allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.”

Check it out here.

A useful procedure I’ve been developing over the past, while developing web forms, is invoking popup windows that allow me to select an item from a custom list of items (for instance, entity objecrs bound to a DataGrid). The client click event on an item (wether its a cell, row, div…) will then pass some kind of reference to its parent window for it to know what the selected item was and properly deal with it.

Keeping this approach in mind, you can invoke a popup window by using window.open(). This is a W3C standard method, and has 3 parameters:

Url: Optional. String that specifies the URL of the document to display. If no URL is specified, a new window with about:blank is displayed.

Name: Optional. String that specifies the name of the window. This name is used as the value for the TARGET attribute on a form or an anchor element.

Features: Optional. String that contains a list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, “fullscreen=yes, toolbar=yes”). You an see the list of supported features here.

For instance, the following line of Javascript code would open a 640×500 window, with no location, scrollbars, menubar, status bar and toolbar, named “myName”:

function openSelectorWindow(url) {
    window.open(url, 'selectorWindow', 'location=no,scrollbars=no,menubar=no,status=no,titlebar=no,toolbar=no,width=640,height=660', true);
    return true;
}

The Window object has an “opener” property that references the parent window (the window that opened it). If a window has no parent, this will return null. So, in this newly opened browser window we can access its parent through the Window.Opener property. It will give you access to the parent window objects and javascript methods, allowing you to interact with it acoordingly to your needs.

If your parent window has the following javascript function:

function AlertMe() {
 alert("I am executing on the parent window!");
}

It can then then be called by its child window like so:

window.opener.AlertMe();

Now that we know how to connect and interact with our parent window, we can now develop a more specific function to receive our selection parameters, like an ID:

function passArgs(id) {
document.getElementById('hiddenField').value = id;
}

And then, call it, like we did before on our AlertMe() example:

window.opener.passArgs(2);

Small example for those getting started into javascript.