The main function in jQuery is called jQuery. But most people use the common alias $ as it is already set up with the script and is much shorter.

In PHP, the $ symbol indicates that the following string is a variable name, but in JavaScript, $ has no special meaning—it is just another character, which can be used in a variable name. In jQuery's case, $ is an object. Objects and functions are interchangeable in JavaScript. This means that you can call it using parameters like a function, and it will return a value in the form of a jQuery object instance. You can also use it as a static object and call its methods directly.

To start the book, everything will be explained line by line. As the book progresses, less and less will need to be explained, as you will become familiar with how jQuery works.

$(document).ready(setup_country_change);

This line tells the browser to run the setup_country_change function when the document (the main structural element in a web page) is ready for manipulation.

This is a very common pattern, and it is found in most jQuery-powered applications. Almost all jQuery scripts start with a request where jQuery calls a specified function when it is ready to start manipulating the document.

Note that in this case, jQuery is being called as a function, but is then further acted upon as an object. The . character in JavaScript is almost the same as -> in PHP, and indicates either a method or an object variable.

So, to paraphrase the whole discussion, the jQuery function is called with the page document as a parameter. jQuery returns an instance of itself as an object, which is then used to call the ready method with the function reference, setup_country_change.

  function setup_country_change(){
    $('#country').change(update_cities);
  }

This is the function that is called when the document is ready to be manipulated. Note that in PHP, there is no concept of "when"—either things happen now, or don't happen at all. In PHP, things always happen in a straightforward manner—you call a function, and the next line is not processed until that function returns a value.

However, JavaScript is a bit more threaded than that—you can have a process running, which might not return a value for a few seconds; so, sometimes, things happen asynchronously.

This can be quite a leap for a straight PHP developer, so please re-read anything you're not sure of.

When the setup_country_change function is called, jQuery is called with the parameter #country. This parameter is a CSS selector, which indicates an element with the ID country. The change method tells jQuery to set a watch for when the element's value is changed, and when that happens, the update_cities function is to be called.

jQuery is usually called with a parameter. The parameter tells jQuery what it has to act on. The parameter can take many forms. In our examples so far, the form has been a CSS selector; in which case, jQuery is told to perform the following action on all the elements that match that selector. It's important to note that this might be more than one object. For example, $('*') will match every element in your document. Even if there is just one element in question, internally, jQuery will still be thinking in terms of an array.

  function update_cities(){
    var country=$('#country').attr('value');
    $.get('get_cities.php?country='+country, show_cities);
  }

Here's where it gets interesting.

The first line grabs the value of the Country select box. Note that .attr returns the value of the first element, even if more than one is matched.

And $.get is an Ajax call. It tells the client to request data from the server using the first parameter as a URL, and send everything that's returned to the function referenced in the second parameter. The expected data does not need to be in any particular format. In this example, we will expect HTML to be returned by the server.

In PHP, string concatenation is done with the . operator. In JavaScript, it's with +.

  function show_cities(res){
    $('#cities').html(res);
  }

When the server has done its job and echoed out its result for the requested URL, this function then simply pastes the result directly into the selected element as HTML.