What is jQuery?
jQuery is nothing more than a javascript framework. It is important to note that it isn’t a language like PHP, HTML, or CSS. You could call it an addon for Javascript. The whole idea behind jQuery is to make our lives easier. Just as the jQuery logo says, “Write less, do more”. We don’t want to waste time on something that can be done much faster!
JQuery-write Less Do More
Why should I use jQuery?
Why not stay with Javascript or go use Mootools (another Javascript framework). Simply because it is easier. Most developers agree that it is better to start with jQuery and then switch to other frameworks. But everybody has their own opinion about this. Here are some reasons why to learn jQuery:
- It has a light-weight library
- Easy to understand syntaxes
- As their slogan says, “Do more, write less”
- A lot of the selectors used in jQuery come from CSS so all you CSS folks are welcome!
- Powerful built in functions
- Super easy intergration with Ajax and JSON
- It is relatively new framework so it’s evolving very fast (Currently at version 1.4)
Now you know what jQuery is lets begin!
Before you can start writing any jQuery code, you need to download the jQuery library. You can download it at http://www.jquery.com. The two versions they offer aren’t different in any way at all except for their size. Only the production version is compressed. This is recommended if you finally lauch your website.
If you want to link the jQuery library to your website you can use the following syntax:
<script type="text/javascript" src="path-to-jquery-library.js"></script> Now let’s write so
The idea behind jQuery is to make the life of a coder easier. Lets say you have never heard of jQuery before and want to use javascript to change the text color of an element called someText when the page loads. This is one way do it:
function changeColor(){
document.getElementById('someText').style.color = "#000";
}
window.onload = changeColor();
This doesn’t look that strange but think about how you would have to do it if you wanted to do more than one thing on page load. You would have to have a function that contains all the functions. That would have to be called at on page load. This results into long lines of code and very inefficient. This sounds very confusing so the wonderfull jQuery developers decided to do it different. This is what they came up with:
$(document).ready(function(){
//Place code that should run on page load });
There are a few advantages using this code. But lets look at this bit by bit.
$(document)
$(“#someDivId”) or $(“.someClass”)
.ready()
We are using ready() instead of onload. The biggest advantage of this is the code only waits till the DOM tree has loaded. For example, back in the days when we used Javascript and we used onload on a page with a very large image we had to wait before the page and the image had completly loaded before any Javascript could be executed.
function(){ });
All the code you want to execute on page load goes inside this blank function. Of course if there is any code you don’t want to run on page load you put it outside this function.
Now lets take that pure Javascript example we wrote earlier to change the color of the text and rewrite it in jQuery.
$(function(){
$(".someText").css({"color": "#000"});
});
Finished! Much easier. You might have noticed that I wrote $(function(){ instead of $(document.ready(function{. Both ways are perfectly correct but one is faster. A shortcut. But now lets investigate what we did.
$(“.someText”)
As i said before $() selects an element. Inside the brackets you write a selector. So in this example we wrote .someText. This selects an element with a class of someText. The next lesson will explain what selectors are. But for now, a good thing to remeber is that if you want to select an element with a class you use a dot (.) and then the class name. Like in CSS.
If you want to select an element with an id you use the # symbol followed by the name.
.css()
With this you can change the CSS of elements on the page. If you want to change multiple things on an element, you seperate the CSS with a comma
But what you can also do with .css() and which most other built in functions, is select CSS. So if we want to know which color or div called content has. We would write this:
In the variable color_of_div the text color of the element with an id of content is stored. If you don’t understand it yet, lets take another example. Lets say we want to know the background image of our div.
If the div doesn’t have a background it will of course return none.