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.
Related posts:
January 29th, 2006 at 10:52 pm
[...] I’ve been digging through my referrer logs and Technorati to see who’s talking about jQuery. Today I ran across someone who wrote a quick tutorial on how to use jQuery. I’m kind of suspicious of the site itself (Google Ads, No User Comments) – but the author took the time to write original content, so that helped to justify its context. [...]
January 18th, 2007 at 9:35 am
This code throws error.
$(“p”).style(“color”, “yellow”);
Error: $(“p”).style is not a function
Are you sure the code is correct?
January 18th, 2007 at 2:13 pm
In jQuery 1.1 you can use the css function. I updated the post to reflect this. Thanks Pianio12.
February 2nd, 2007 at 10:34 am
Pianio12, you have to include the jQuery library in your page for the example code to work ;)
June 5th, 2007 at 4:56 am
Nice article for the begginer. thanks a lot
September 7th, 2007 at 5:51 am
Actually it won’t work if you don’t place your code in a block like this:
$(document).ready( function() {
/* ToDo Code */
});
November 26th, 2007 at 4:35 pm
jQuery is hardly based on Mootools. jQuery is much more powerful and lightweight due to the fact that it doesn’t have all of the bloat that mootools does.
November 28th, 2007 at 4:19 pm
@Ryan – This tutorial was written before jQuery was even 1.0. I should have have referenced my claim but even if you look up at jQuery 1.0 you can see comments that explain that the code was cloned from moo (http://code.jquery.com/jquery-1.0.js). Over the nearly two years that this tutorial has been written these two libraries have changed drastically and taken different directions.
January 17th, 2008 at 3:46 am
Thanks! at least someone tried to show a real 10 minutes jquery tutorial, though its a bit outdated. Anyhow I feel at home, even getting a simple task of new library done, so am thankful.
February 1st, 2008 at 3:51 pm
[...] Simple Introduction to jQuery [...]
February 7th, 2008 at 5:16 pm
This is a nice introduction to jQuery, but it could be a bit misleading to new users. jQuery has definitely evolved far beyond where it was at the time this tutorial was written.
Regardless though, it’s well written and informative. I’m a little embarrassed to give myself a shameless plug, but I just completed my first tutorial on jQuery plugins:
I’m trying to get some feedback on it, so I would definitely appreciate any input in the comments.
February 8th, 2008 at 2:34 pm
@Jeremy – jQuery has definetly evolved over the past 2 years! Just now, I was looking into jQuery UI. But the basics presented in this tutorial still apply as an introduction to jQuery.
June 2nd, 2009 at 1:01 pm
its a nice,simple and very usefull tool for web developers
June 5th, 2009 at 5:08 am
I am very beginner and really loved this article. I have got answers to my one hundred questions. Thanks so much.