Let's break it down.

First we retrieve the DOM object:

var DOMobject=$('#div1')[0]);

Next we wrap the DOM object in a jQuery object:

var jQueryObjec=$(DOMobject);

Notice that at this point we are back were we started with a DOMobject that is the first element of an array - I never claimed that this was a sensible thing to do!

Finally we use the text method which sets the text of all of the DOM objects in the array:

jQueryObject.text('My New Text');

Notice that this conversion to DOM object and back to jQuery object can have some practical use.

For example if you use jQuery to get all of the divs in the bigdiv class:

var bigdivs=jQuery('.bigdiv');

you can now step through each DOM object in turn, wrapping it in a jQuery object and setting its text to something:

var bigdivs=$('.bigdivs');
for(var i=0;i<bigdivs.length;i++){
 var DOMobject=bigdivs[i];
 var jQueryObject=$(DOMobject);
 jQueryObject.text(i.toString());
}

Which of course can be written in a  more compact form with the jQuery expression on a single line:

var bigdivs=$('.bigdivs');
for(var i=0;i<bigdivs.length;i++){
   $(bigdivs[i]).text(i.toString());
}

So if you want to step through the DOM objects and do something complicated to them then this is possible and you can re-wrap them in a jQuery object to make it easier. In fact there is an even more compact way to write this, but for this we need some additional jQuery methods. We will return to this topic in a later chapter, but let's take a quick look at the sort of thing that is already possible. 

jQuery Wins

With jQuery you usually find that there is a pure jQuery way to do anything you struggled to do directly with the DOM.

In particular, most of jQuery's methods are more sophisticated than you might expect. We have already met the text() method that will retrieve or modify the text of every element in the result. 

This is fine as long as you want to set the text of every element to the same string. If you want to set each one to a different string then it seems that we have to resort to the trick of using a loop to scan through each DOM element in the result. 

However the text() method and many other jQuery methods have an extra way you can use them.  

The text() method accepts a function with the form:

function(index,oldtext)

which is called for each DOM object in the array. The index is the index of the DOM object in the array and the oldtext is its current text content. The string that the function returns is set as the text for the DOM object. That is when you use .text() jQuery loops through each element in the result and calls the function passing it the number of the element in the result and its current text. The elements text is then set to what ever the function returns. 

This means that we could write the above example without a loop and using nothing but jQuery:

bigdivs.text(function(i,oldtext){
                return i.toString();
});


In this case the text property is set to its index in the result set. 

Never underestimate jQuery!

Summary

• jQuery is a library that lets you work with the DOM in a browser-independent way.
  
  
• You can use jQuery or $ for the jQuery global object.
  
  
• jQuery selects DOM objects based on CSS selectors.
  
  
• The simplest CSS selectors are tag type, id and class:
  $('name') selects all DOM objects corresponding to <name>
  $('id') selects the single DOM object with id='name'
  $('.name') selects all DOM objects with class='name'
  
  
• The DOM objects are always stored in an array wrapped by jQuery methods and properties - even if there is only one.
  
  
• Most jQuery methods work with all of the DOM objects in the array or just the first.
  
  
• You can get at the DOM objects in the array, e.g. $('div')[i], but you need to remember that they are not jQuery objects.
  
  
• You can wrap any DOM object in a jQuery object using $(DOMobject).
  
  
• jQuery provides a range of more sophisticated ways of processing the results than you might expect.

Coming Next

So what else is there to learn about jQuery?

You need to learn more sophisticated ways of selecting elements, what methods are available to make changes to elements and so on.

Then of course there are the other areas that jQuery helps with - events, Ajax and the UI.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

 To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info