Getting to know jQuery

This tutorial is used in the course dbwebb2. More information available on the course-blog (swedish).

http://db-o-webb.blogspot.com/

Going through the tutorial "How jQuery works"

Do it on your own and use below examples as reference. View the sourcecode to see how its done. The tutorial is available at:

http://docs.jquery.com/How_jQuery_Works

Lets do it

Step 1: jQuery: The Basics

Do not forget to download the minified version of jQuery.

Step 2: Launching Code on Document Ready

Step 3: Complete example

Step 4: Adding and Removing a CSS Class

Step 5: Callback and Functions

The last step was not so straight forward, but I made it work. I had to do some changes to the code. This is really a AJAX request. Cool. Now we know AJAX...

A closer look at the jQuery AJAX API

A synchronous AJAX request

The tutorial has ended, but lets check out this AJAX a bit more. In the last exemple there was a link to the jQuery API for AJAX. Lets check it out. Just quickly go through the functions/methods to see what they can do.

http://api.jquery.com/category/ajax/

Lets take a closer look at the function $.get(), or jQuery.get() as its also called. Read its manual page to get an example of jQuery documentation of its API.

http://api.jquery.com/jQuery.get/

I tested the last example on the page. It's a real nice and small example on using get and defining the callback in the same lines of code.

Step 6: AJAX example using $.get()

I also decided to "upgrade" to the latest version of jQuery (1.4.1 as we speak).

Taking care of the result, manipulating through DOM

Display the result from a AJAX request

It would be nice to display the results from an AJAX request. Lets try to display the content of the page retrieved. Lets display it as part of the current page by replacing the html-content of a DOM object.

Step 7: Updating current document with results from Ajax request

Use the following pages as reference when finding out how the example works.

Setting the content of a DOM object

How to set the html-content of a DOM object in current page.

http://api.jquery.com/html/

$(".result").html(data.replace(/</g, "<").replace(/>/g, ">"));
...
<pre class="result">No result yet.</pre>

Use event object to get href

How to get the link (href) from the event object.

http://api.jquery.com/category/events/event-object/
http://api.jquery.com/event.target/
http://www.whatwg.org/specs/web-apps/current-work/#the-a-element

$.get(event.target.href, function(data){

Use regular expression to strip html

How to replace all occurences of < and > with < and > using the JavaScript function String.replace().

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace

$(".result").html(data.replace(/</g, "<").replace(/>/g, ">"));

Summary

To be able to get the full ability out of the jQuery library, one must be able to navigate through JavaScript Core, jQuery library and DOM.

There might be a simpler way, and that would be to try out the existing examples and tutorials on the jQuery site. Doing so one can slowly learn these concepts and still be able to quickly use the power of JavaScript on a website. But, remember I told you, try to learn JavaScript and DOM from the bottom.

Enjoy.