Workshop 1

Objectives: Download and set up the environment to work with jQuery. Understand the usefulness of the library, basic concepts, functionality and write an example.

The official jQuery site defines it as: “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

I have a basic experience with JavaScript and jQuery is something new for me. I started by downloading the current version 1.4.2. It is a huge text file with lots of JavaScript code that has to be referenced in your page so as to be consumed. Also, if are using Visual Studio we will want to download another file for intelligence support.

Therefore the best practice is to reference the .js file in a location that is globally available for your pages. In the .NET world, this place is in the master page you use as a base master.

<script type=”text/javascript” src=”jquery.js”></script>

In JavaScript the $ sign is a valid character for naming variables and functions as in:

<script type=”text/javascript”>

var $ = function() {

alert(“function $ was called”);

</script>

And you can call the function like this:

$();

So the $ sign is the jQuery’s framework main object and that’s why it is a core part of the syntax.

The first thing I learned is that jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event. It should be always used in order to wait for the entire HTML document to be rendered by the browser before all the elements are available for manipulation.

The way we grab a reference to the HTML elements is very interesting. The code below, for instance, finds all the links in the web page and prevents the click event from jumping to the address. Instead, when you click the link it slowly fades away.

So what we are used to doing with pure JavaScript to get a reference of an element like:

document.getElementById(“myElement”)

is equivalent of the code below in jQuery:

This is very powerful not only because we have a lot of actions available but it has the potential to affect many elements at the same time. It all depends of how the selection takes place. jQuery provides different approaches to select elements. The most popular is a combination of CSS and XPath. Those are some examples from the jQuery API documentation:

Hide all Paragraph elements that contain a class attribute:

 $("p[@class]").hide();

Show the first paragraph on the page:

 $("p:eq(0)").show();

Hide all divs that are currently showing:

 $("div:visible").hide();

Get all list items that are children of an unordered list:

 $("ul > li")

Get all Paragraphs, with a class of ‘foo’, that have a link in them:

 $("p.foo[a]");

Get list item that contains link with “Register” text inside:

 $("li[a:contains('Register')]");

Get the input field’s value with the name of ‘bar’:

 $("input[@name=bar]").val();

All checked radio buttons:

 $("input[@type=radio][@checked]")

An important thing to notice is the concept of callback functions. “A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.” We will see that everywhere in jQuery code. The syntax is:

$.get(‘myhtmlpage.html’, myCallBack);

or, in case the callback receives parameters.

$.get(‘myhtmlpage.html’, function() {

myCallBack(param1, param2);

}); //param1 and param2 are evaluated as a callback when the ‘$.get’ is done getting the page

References:

An elegant kind of framework

http://www.authenticsociety.com/blog/WhatisjQuery_Part1

The usage purpose of the $ sign

http://www.authenticsociety.com/blog/JavaScript_DollarSign

Rich IntelliSense for jQuery

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

Advertisement