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:
12 Comments
This code throws error.
$(“p”).style(“color”, “yellow”);
Error: $(“p”).style is not a function
Are you sure the code is correct?
In jQuery 1.1 you can use the css function. I updated the post to reflect this. Thanks Pianio12.
Pianio12, you have to include the jQuery library in your page for the example code to work ;)
Nice article for the begginer. thanks a lot
Actually it won’t work if you don’t place your code in a block like this:
$(document).ready( function() {
/* ToDo Code */
});
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.
@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.
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.
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.
@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.
its a nice,simple and very usefull tool for web developers
I am very beginner and really loved this article. I have got answers to my one hundred questions. Thanks so much.
2 Trackbacks
[...] 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. [...]
[...] Simple Introduction to jQuery [...]