Intro

This chapter is about implementing Ajax with JQuery. In the previous chapter, I have demonstrated how Ajax works in the simplest possible manner. However, with couple of handy utilities provided by JQuery, you get to write a lot lesser and do a lot more.

This tutorial is not about JQuery, I'm not going to start explaining JQuery from ground up, it is more like "refresh" or "warming up" for the rest of the topics.

The JQuery() function

The most important global function of the JQuery library is JQuery(), it has a shorthand version $(). The shorthand version is being used more widely in most JQuery code.

meaning

JQuery ("div1") = $("div1")

The JQuery() (a.k.a $()) function is heavily overloaded and there are FOUR different ways to call it.

To make it more confusing, JQuery library also uses the JQuery function as its namespace, and defines a number of utility functions and properties under it. That makes the FIFTH way to use JQuery.

1. Pass CSS Selector (string) to $()

When we do this $("h1") or JQuery("h1"), it returns us a JQuery object that represents all h1 elements in the web document. $("h1").remove() or JQuery("h1").remove(), simply means to remove all h1 elements in the document.

A JQuery object here can be called "JQuery Result", "a JQuery set" or a "wrapped set".

2. Pass an element to $()

var img1 = document.getElementById('earth');
$(img1).remove();   

In the example above, img1 is an element with ID of "earth", we then pass the element to the JQuery function and call the method .remove() to remove the element from the face of the document. This is the same as we do this $("#earth").remove()

3. Pass HTML string to $()

Passing HTML string to $() is not to select any element but to create HTML element you pass into. HTML string is string contains "<" and ">"

$("<br/>") is to create a breakline element <br/> and not selecting "<br/>".

Once JQuery create the element, the newly created element will not just appear in the middle of your web page, you've got to tell JQuery exactly where you want to place it. Usually, you would have to couple with other methods to make it appear in a web page.

$("<hr/>").insertBefore("h1");
$("<br/>").replaceAll("hr");

4. Pass a function to $()

When we create a web page with Javascript, there are times we need Javascript to do something when the page is loaded. We were so used to windows.onload event. However windows.onload event only triggers when images, styles, script are completely loaded.

JQuery came to save the day by introducting $(document).ready() which triggers when DOM is ready without waiting all resources like images, style, video, audio or flash.

When we do this

JQuery(document).ready(function()
{
    $("#div1").hide();
})                      

It simply means, the element div1 will be hidden when DOM tree is created and ready to be manipulated.

Not only that, you can also replace JQuery(document).ready() with just $(), the moment you pass a function, JQuery knows it is not to select any element, create element but to call a function when page is ready.

$(function(){
    $("#div1").hide();
})

5. Using JQuery namespace

The JQuery function also serve as the namespace prefix for a handful of general-purpose utility functions or properties such as JQuery.trm(text) or $.trim(text). Below are some of the functions that I grabbed for explanation.

  • jQuery.ajax() or $.ajax()
  • jQuery.contains() or $.contains()
  • jQuery.each() or $.each()
  • jQuery.get() or $.get()
  • jQuery.getJSON() or $.getJSON()
  • jQuery.getScript() or $.getScript()
  • jQuery.hasData() or $.hasData()
  • jQuery.parseHTML() or $.parseHTML()
  • jQuery.parseJSON() or $.parseJSON()
  • jQuery.post() or $.post()
  • jQuery.parseXML() or $.parseXML()

You may look up for the whole list of JQuery api at api.jquery.com