jQuery 3 - Understanding jQuery
Written by Ian Elliot   
Thursday, 16 June 2016
Article Index
jQuery 3 - Understanding jQuery
jQuery Idioms
jQuery Wins

 justjquery

 

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:

smallcoverjQuery

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:

jquery2cover

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.

 

kotlin book

 

Comments




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

 

Banner


JavaScript Canvas - Fetch API

Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data.



JavaScript Jems - The Inheritance Tax

JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, it doesn't do inheritance  [ ... ]


Other Articles

 

 



Last Updated ( Sunday, 19 February 2017 )