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.

 

 

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it
India             Amazon.in
Japan             Amazon.jp

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it
India           Amazon.in
Japan          
Amazon.jp

  

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

 

 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.

 

square

 



 

Comments




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

 

Banner


JavaScript Canvas - Read/Writing Local Files

When working with graphics eventually you need to read or write data to the local file system. In this extract from a chapter in my new book on JavaScript Graphics we look at how it works.



JavaScript Canvas - The Filter API

Canvas has a filter API that often goes unnoticed because it has been inherited recently from SVG. In this extract from a chapter in my new book on JavaScript Graphics we look at how it works.


Other Articles

 

 



Last Updated ( Sunday, 19 February 2017 )