Most useful JQuery function

For the record, JQuery is awesome!!

So much more powerful and flexible than Javascript alone. Below are what I feel are the most useful JQuery functions and explanations to their use:

The “on” function is brilliant.  It encompasses all the event listeners like “click”, “change”, “mouseover” etc into a single function. But why use this instead of the classing “.click” function? The reason is that “.on” can be applied to a parent tag and then told which sub-tags to function on, an example would be:


Here I have basically allocated the “click” event listener to ALL A-tags within the #products_list tag.

I hear you say: “this isn’t any different to just doing $(‘#products_list a’).click(function(){});”!!!

Well the beauty is that the “.on()” function works on DOM-tree manipulated structures too where as the “.click()” (and others) do not.  This means that I can create as many A-tags under the #products_list tag as I want using JQuery DOM-tree manipulation (e.g. the “.append()” function) and the “.on()” event listener would apply to these new A-tags also.  With the old-style “.click()” function, you would have to recreate a new listener each time you created an A-tag as once these listeners are initialised, they remain in-place with the specific tags and not inherited to new tags.

This function can be used in 2 different instances, you can either look for a specific tag which is within a tag, e.g.:


    • Test


To find the A-tag in this HTML from the UL you would simply use:


From this you can run whatever functions you wish on the A-tag. e.g.:

        $(‘ul’).find(‘a’).text(‘New Test’);

This will change the contents of the A-tag from “Test” to “New Test”.

The “.find()” function can also be used to find multiple tags which can then be inspected individually using the “.each()” function. For example:


    • Test 1

    • Test 2

    • Test 3


To get all the A-tags you would again use:


But then to identify each individually you would use:


Within the “.each()” function you can then place your own function to manipulate each A-tag accordingly:

        $(‘ul’).find(‘a’).each(function() {

This would add the class “bold” to all A-tags within the UL-tag.

Don't forget to read more interesting web development and web design articles in our Blog!