This website stores cookies. Click here to accept them.cookie information page

More on jQuery

3rd February 2012
Categories: javascript, jquery

Javascript, the main language that enables dynamic websites, has been around for 15 years and, whilst powerful (it enables client-side form validation and dynamic pages, it is used for google analytics and various other trackers and is used by most modern websites for one thing or another) has generally been annoying to use. Every browser has had it's own implementation of javascript, with it's own idea's of how things should be done, this lead to lots of logical statements to handle all the different browser designs:

 

if (document.layers)

{

var container = document.layers[ID].open();

container.write(“some text”)

container.close();

}

else if (parseInt(navigator.appVersion) >=5 &&navigator.appName==”Netscape”)

{

document.getElementById(ID).innerHTML = “some text”);

}

else if (document.all)

{

document.all[ID].innerHTML = “some text”

}

 

All these codeblocks do the same thing, writing the text “some text” into a specified HTML element, the only difference is browser compatiblity. The first block works in Netscape4, the second block in Netscape 5+ and the last block works in Internet Explorer 4,5,6. If you wanted to look at this script in any other browser then you would just have to hope that it worked.

That's a lot of lines of code for something so simple, writing a more complex script would end up as a nightmare of if statements. Fortunately for the best part of the new millenium a number of javascript libraries have been released, one of the most prolific of these is JQuery. Released in 2006 it is now, according to wikipedia, used by over 52% of the 10,000 most visited sites and is the most popular library currently in use. Jquery is available from http://www.jquery.com

JQuery provides a number of useful functions that simplify interacting with the webpage and handle all the nasty cross-browser compatibility issues for you. All of Jquery's functionality is provided by the jQuery() object ( or it's alias “$()” ) and most JQuery scripts will start off with a document-ready block. This is a callback passed to the ready function of the document object that is called when the page has finished loading. So, let's rewrite our previous script using JQuery:

/blogresources/jquery-hello-world.html

 

So, this script (which also contains a method to trigger it, unlike the previous example) is only 3 lines of javascript (always nice to do more with less) and, although it can look a bit daunting at first, it is a relatively simple script. It starts off with the document-ready block that I mentioned earlier. This involves creating a JQuery object that contains the document ( $(document) ), which we then call the ready function on passing it a closure (an inline function). When this function is executed (after page load), we select the DOM element that has an id of 'click-me' and call the click method. This function allows us to bind a callback, a function that will be executed whenever the target is clicked, in this instance our function (with ONE line of code) sets the HTML contents of an element to “Hello World”. Easy.

Now I should probably take a minute to reveal the wonders of the JQuery constructor. A Jquery object can hold multiple DOM objects and there are three ways of constructing them:

  • The first (and in my experience, most common) is to use a CSS type selector ('# for id, . for class etc) passed in as a string (much like we did above with the “#click-me” and “#jquery_target” selectors.

  • The second is to pass in a DOM object (like we did with the “document” constructor above) .

  • The third is to pass in a string containing HTML (for instance $('<p class=”some-text”>some paragraph content</p>') ).

One important thing to remember is that functions that change the object(s) will generally be applied to every DOM element contained by the JQuery object, whilst functions that retrieve data will generally read the data from the first element in the JQuery object. This means that, for example, if we wished to stop any of the links in our page (or a part of our page) from working (or send an ajax notification or whatever) we could do something like the following:

 /blogresources/jquery-link-selection.html 

This script, again, is very simple. Once again we have our document-ready block, this time we are binding an on-click callback to a collection of DOM elements (every A tag within the element that has an id of “link-container”). This callback retrieves the href attribute of the clicked tag and displays it in the jquery_target box at the bottom of the page. It then returns false (this is to prevent the browser from then following the link)

So thats JQuery in a nutshell. A small, yet powerful library that enables developers to write stunning web-apps and add that little bit of shine to a website that makes visitors want to come back.  


Add your comment for "More on jQuery":

© Alberon Ltd 2017

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).