Basic jQuery

So what do CSS selectors have to do with jQuery?

The simple answer is that to pick out a DOM object using jQuery you use CSS selectors - plus some additions.

First, however, we need to get jQuery into our project.

There are a number of ways to do this. You can download it from the jQuery site and load it into the page from your web server. Alternatively you can use a content delivery network (CDN) to supply it from its server. Google, for example, does the job very well for no cost. So the easiest way to try jQuery out is to add the line: 

<script src="https://ajax.googleapis.com/ajax/libs/                       jquery/3.0.0/jquery.min.js">/script>

 If the jQuery version number has moved on then simply change the 3.0.0 to whatever the new version is. All of the examples in this book will work with at least 3.0.0. 

You can use other CDN services and other versions of jQuery. In general use the most recent.

Now you have jQuery loaded into the page we can try it out. 

A very basic use of jQuery is to retrieve a DOM object corresponding to a particular element.

For example, to pick out the div with id set to div1 you would use:

var divs = jQuery('#div1');

This returns a jQuery object which "wraps" the DOM object that represents the div.

What does "wrap" mean?

jQuery adds a set of methods and properties to the basic DOM object that makes it easier to use. However before we explain this in more detail it is worth revealing one more important fact about the jQuery object.

Suppose you write:

var divs=jQuery("div");

In this case the selector matches the tag type, i.e. the div, and so you would expect it to match multiple elements, i.e. all the divs on the page.

What is returned in this case?

The answer is that jQuery always returns an array of the DOM objects it has found - even if you use an id selector which can only return a single object.

• That is jQuery always returns a set of DOM objects wrapped in a jQuery object that behaves like a array.

One of the standard jQuery properties is length which tells you how many objects have been returned.

So:

var divs = jQuery('#div1');
alert(divs.length);

will always display 1 because there can only be one element with the id div1.

The Default Elements

The big problem with returning an array of DOM objects is that you are going to have to specify array indexes in operations. That is if you want to further process the result of a jQuery operation then it seems that you are going to have to specify which element in the result set you want to process even if there is only one result possible. 

The trick is that jQuery assumes that most of the time, if you have picked out a set of DOM objects then what ever you want to do you want to do to all of them or possibly just the first element. 

So for example, the jQuery text method will obtain the text from each DOM object and form a single string by concatenating it. On the other hand he val method will get the value for the first element in the array. 

In most cases the "do it to all" or the "do it to the first" approach is natural and corresponds to what you want to do.

It also means that often the most difficult part of using jQuery is to discover how to specify just one element or and exact set of elements you want to work with.

So to summarize:

• jQuery returns an array of all of the DOM objects that match the selector you specify.
• The array of DOM objects is wrapped by a jQuery object complete with additional methods to let you work with the array of objects
• Most jQuery methods either operate on all of the DOM objects in the array or just the first DOM object.

jQuery Idioms

Consider for a moment:

var divs = jQuery('#div1');
var temp=divs.text();
alert(temp);

This gets the DOM object corresponding to the div element with id div1 and stores this as a jQuery object in divs. It then uses the jQuery method text to retrieve the text it contains and displays the text using an alert. Notice the text method will collect all of the text in each of the DOM objects selected but in this case there is only one.

There is nothing wrong with this code snipped but it doesn't look like most jQuery programs.

It is more usual to write jQuery using the fluent style of calling methods. So you would write the above as:

var temp=jQuery('#div1').text();
alert(temp);

In general programmers tend to write as many jQuery methods calls as possible, one after another until they reach the final result they want.

jQuery also defines, for reasons that don't really matter much, the dollar symbol as the global jQuery object.

That is

var $=jQuery;

and most programmers would write the example as:

var temp=$('#div1').text();
alert(temp);

This makes the code more compact, but it also makes it look more intimidating to the beginner.

But if you remember that whenever you see "$"you simply read "jQuery" it becomes understandable.

There are a few other jQuery idioms that will become apparent as we progress.

DOM versus jQuery

In most cases once you have a jQuery object it is best to try to make use of it to get the job done.

However, it is always worth remembering that you can make use of the DOM objects directly. Usually this isn't a good idea because jQuery irons out any variations in browser and implementations. If you can do the job in jQuery then it is usually the best approach.

For example, suppose you want to set the text in the div with id div1. The jQuery way is:

$('#div1').text("my new text");

The text method can be used to set text on almost all elements apart from some form element.

It also returns a jQuery object and so allows you to carry on chaining jQuery method calls. It also sets the text on each fo the selected DOM elements in the array.

However if you want to work with the DOM object directly you can.

For example, DOM objects have an innerHTML property which corresponds to what is between the tags - in the case of a div what is between the <div> and </div>. So to use the DOM object rather than jQuery you would write:

var temp=$('#div1')[0];
temp.innerHTML='My New Text';

This works but doesn't process the text to remove HTML special characters. You can see that the trick is to access the elements of th array. If you access any element of the jQuery result then what is returned isn't a jQuery object but a DOM object. What this means is that temp has all of the properties and methods of a <div> DOM object but none of a jQuery object. 

You could have written this as:

$('#div1')[0].innerHTML='My New Text';

and in this form it looks a lot like the jQuery text method vesion - but it isn't. The innerHTML method is provided by the div DOM object not jQuery.

It is important to remember that  $('#div1')[0] isn't a jQuery object but a DOM object. Beginners often make the mistake of writing things like:

$('#div1')[0].text('my text');

which doesn't work because, as already mentioned, DOM objects don't have jQuery methods. 

To summarise:

• If you reference an element of the jQuery result what is returned is a DOM object and not a jQuery object. 

There is a way to put the previous mistake to rights.

You can wrap any DOM object in a jQuery object by writing

$(DOMobject);

So to make the above incorrect example work you would use:

$($('#div1')[0]).text('My New Text');

Now you begin to see how cryptic jQuery expressions become.