jQuery Library
Yet another effects JavaScript library has been unleashed and this time it is named jQuery. Some code is based if not entirely inspired by moo.fx which in turn is base on prototype which in turn is base on work based on other work etc. JQuery is a light framework that you can get started with in less than 10 minutes. This is the sub-10 minutes tutorial. Lets get started.
The jQuery examples below I will be referring the the following HTML:
<HTML>
<BODY>
<DIV style="border: 1px solid Green;">
<A href="http://google.com/">Google</a>
</DIV>
<P id="mypara">this is one paragraph</p>
<P>This is another paragraph</p>
</BODY>
</HTML>
jQuery supports XPath expressions and CSS 1-3, this means that you can get a jQuery object that represents one or more elements by a tag name, an element’s id or class, or by an XPath expression. To get a jQuery reference of an element use the dollar sign function as in the following code:
// Find element by it's id
var mypara = $("#mypara");
// Find elements by it tag name
var allpara = $("p");
// Fine element using XPath
$("a[@src='google.com']");
As the comments state, the mypara variable will hold one paragraph, the one whose id is mypara. The allpara variable will refer to all paragraphs in the document. Once you have jQuery object for one or more elements you can update its style. The following example will change the text color of all paragraph tags in my document.
$("p").css("color", "yellow");
If you want to update more than one style attribute at a time you can use the following code:
$("p").css( {color: "yellow", background: "green"} );
Now, if you are using some Ajax library you will most likely want to update more than just an element’s style, you may want to update an element’s inner HTML. To replace the inner HTML use the following code:
$("p").html("replace inner <b>HTML</b>");
Other useful methods that do just what there function name states are append(), prepend(), before(), and after(). jQuery also provides a hide(), show(), and toggle() method for special effects. jQuery is a new effects JavaScript library similar in spirit to moo.fx and Prototype. jQuery should be easy to pick up and start using in your next web 2.0 project as it simplifies what you already do.
I have already mentioned moo.fx in JavaScript FX.