Oct 17, 2009

Learning The Basics of jQuery Faster Than Ever!

Posted by Devin R. Olsen on in JavaScript Tutorials | 3 comments

When ever someone is talking about jQuery the frist thing that should come to your mind is JavaScript, or rather client side (for the most part). jQuery was made so that you could “Write less, do more” in JavaScript as jQuery’s slogan says. To really understand jQuery you must think about what it is you need to know first:

What is jQuery?
When do I use jQuery?
How do I use jQuery?

What is jQuery?

jQuery was made by John Resig and the jQuery Team. jQuery is a JavaScript library that sums up popular JavaScript functionality and or methods into neat, very cross browser / version friendly little functions if you will.

jQuery now is broken up into two areas of library’s, we have the standard jQuery library that mainly sums up most JavaScript standard functionality. We also have the jQuery UI library for helping to build rich and interactive internet application user interfaces.

Both jQuery and jQuery UI, separate or together are considerably tiny in comparison to all you can accomplish with one or the other. In a nut shell jQuery can do all the standard things JavaScript alone can do and then some, but much quicker and with less code.

When Should I use jQuery?

JavaScript should be used as the icing on the cake for most web sites however when dealing with internet applications that use AJAX as its crux JavaScript can be vital. So its up to the developer to determine what areas of his or her site / application should use JavaScript and how it should be able to fall back and still function without JavaScript.

NOW STOP, just at the point where you start to realize what areas should be using JavaScript, replace standard JavaScript with jQuery. It’s as simple as that folks. jQuery is not this big next gen method or scary tactics but simply a newer way to write the same old stuff, just quicker.

So to answer the question of when to use jQuery, I would have to say any time you use JavaScript in your sites or applications. With that said it is very important to note that you should not ditch the old methods of DOM and Traversing elements with JavaScript because jQuery still has a few little areas to improve on and being able to mix the old and the new can create some really great stuff.

How do I use jQuery?

First things first, be sure to include a copy of either standard jQuery, or jQuery and jQuery UI into the header of your document.

Next is jQuery syntax so lets talk about the infamous $ cash char. When ever your documents are accessing the jQuery lib(s) and you use the $ followed by () parentheses you are stating you are performing a jQuery action and its lib(s) better listen up.

Most of the time with jQuery you will first point to elements to perform some sort of action or gathering. With jQuery there are many ways to do this that previously, were very long and cross browser tedious. Like the old methods of JavaScript, the most basic of ways to point or gather from elements is through class names and elements id but now with jQuery its much simpler and robust.

Here is an example of the old DOM method of class and id element pointing.

var element = document.getElementById("elementsId");
var elements = document.getElementsByClassName("elementsClass");

Now check out jQuerys version:

var element = $("#elementsId");
var elements = $(".elementsClass");

Ok wow right off the bat you can see that’s a lot simpler right?Things to notice are the jQuery innate $ followed by parentheses that surround either an element id or class.

Note that for classes we use the . and for ids we use the #.

We most commonly only use the # pound and . period when writing CSS. Does this mean we can use CSS in some way to gather our elements? That’s right, the developers of jQuery have gone as far as to allow you to not only declare elements one via id and class name, but also use CSS selectors, Holy CRAP Batman!!

If you dont know what CSS selectors are, I suggest you read up on them. To put it simply, it’s a way to point to groups or very specific patterns of children and or sibling elements with CSS alone.

Here is a little example of using CSS selectors in a jQuery element gathering.

//Matches all direct descendent children elements of #main.
var all = $("#main > *");

//Finds all inputs that are next to a label.
var inputs = $("label + input");

//Matches the first selected element.
var firstOf = $("tr:first");

Check that out, not only can you point to elements with standard DOM class and id methods much quicker but you can use CSS selectors such as element type selector (label or input), Child selectors (>) and even pseudo selectors (:first). There are a great deal more of selector types that jQuery has to offer, click here if you would like to read more.

Ok, this is boring just showing you how to make variables that point to elements… let’s do get more in depth.

jQuery was designed so a developer such as yourself, could write great and very fast scripts and do so in one long string of a function if you will. Lets make simple example of adding a click function to an element in one of our documents. For argument sakes, let’s say we have a <button></button> element that has an id of “#btn“. How would we add an onclick event to our element with jQuery?
[sourcecode language=’javascript’]$(“#btn”).click();[/sourcecode]
Again impressive how quickly you can write such things with jQuery. Believe it or not this has assigned a click event to our button element. Now lets add some function to the click event.

$("#btn").click(function(){

});

Ok I stated above that jQuery was designed for each function or jQuery declaration you make to be one long string. As you can see here we have found our element, assigned a click event and given anonymous function to the click event all with one string of code.

Because we have assigned anonymous function to our click event we can then use yet another jQuery selector the “this” selector. The “this” selector is nothing new to JavaScript, I however just wanted to point out its available also in jQuery.

So let’s do something fun to our button shall we.

$("#btn").click(function(){
    $(this).animate();
    $(this).css();
});

Great see how because we are with in this buttons elements click event, its acceptable to use the $(this) selector. Also notice we have introduced two new jQuery calls, animate() and css(). The animate() is, well you guessed it animates certain aspects of an element such as height, width font size and borders. The css() is simply a way to directly set css style to elements without any animations or limitations.

Lets give our button an animated font size of 25px and a background color of black.

$("#btn").click(function(){
    $(this).animate({
        fontSize: "25px",
        color: "#fff"
    });

    $(this).css({
        backgroundColor:"#000"
    });
});

Here is an example of the above code:

Thus, allowing viagra uk sales it to become and stay harder for long. These generic cialis samples consist of eating a proper healthy diet, daily exercise, restrictive alcohol consumption and quit cigarette smoking. Green tea, one example is will lowest prices for cialis never be created with boiling water. Another method levitra online canada used by doctors to treat pulmonary arterial hypertension patients.Always inform your doctor the safety or possibility of using the natural supplements is that these are produced only from 100 percent natural supplements and therefore these don’t come with any unwanted health effects.
Works great! Lets take a look at what we added shall we.

First with-in both animate() and css() parentheses we add a pair of curly brackets ({ }). We then list out both the style names such as, fontSize a colon : and finally the styles value within quotes. Again notice how we use the same setup for CSS style in both animate and css jQuery calls and how simple it all really is.

If you would like to see all the basic effects such as animate one can do with jQuery simply go here.

In the sakes of making this tutorial short, lets recap what we have learned. We learned what jQuery is and when best to use it. We also learned how to declair the use of jQuery and how to point to different elements with ids, classes and even CSS selectors. We learned how to assign an event to an element and give the event functionality. We even learned how to alter and even animate an elements CSS. I hope you can walk away with a bit of confidence in what jQuery is and how to get started using it. Its up to you to go and read up on all jQuery has to offer, or better yet see if jQuery already offers a quicker way to an old traditional JavaScript method.

jQuery has covered almost all areas of JavaScript and produced better, quicker and far more cross browser friendly ways to do them.

Here is a little list of links that will provide you some great insight into all the areas jQuery offers to assist you the next time you goto write your JavaScripts.

Thats your jQuery crash course everyone.

Thanks!

Devin R. Olsen