var container = document.layers[ID].open();
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.
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:
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:
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.