Learning Jquery: The Basics

Download jquery here.

First lets go over the basics of jquery coding. All jquery starts with a “$” no matter what! In all of your jquery documents ( which is just a javascript file) you need the following code in your document, this code is to load your functions if you do not add this code your jquery will be useless.

$(document).ready(function() {
// all of your code goes here
});

What that code does is simply load all of your functions quickly, without slowing down your page it is only in jquery. For everyone that knows a little about javascript you probably know the “window.onLoad()” function, it does the same thing as “$(document).ready(function() {” but it waits until the entire page finishes loading then it loads in the javascript. This makes your javascript very slow especially if you have large images, the jquery code loads all of the javascript once all of the important stuff has loaded. Like the HTML and CSS structure, which means your javascript are now the coolest kids on the block.

Now that we have that out of the way let us go over calling classes and whatnot, look here:

$('.comments')

All this does is find all of your content inside the CSS class “.comments” , if your replaced the ‘.comments’ with something like ‘p’ jquery would find all of your paragraphs. Same thing for CSS id’s just use a “#” instead of a dot.
So now lets build on our code, let’s add a CSS class to everything inside inside “.comments”. Call it stripe, and it would add a background of a light grey or something. Also note that I am referring to comments in wordpress.

$('.comments').addClass('stripe');

Now all of our comments have a background of a light grey, so now lets make our comments striped like a lot of wordpress comments. Since the comments are in a list lets take advantage of that.

$('.comments:odd').addClass('stripe');

Now this will apply the “stripe” class to every other comment, making our comments striped =). Haha I like how I doubled this tutorial to tell you how to stripe your comments.

You now know how to find a class, id, or HTML elements using jquery and add a class to it. You can also replace “.addClass” with “.removeClass” to of course remove classes from your selected elements. What about highlighting comments oMouseOver?

$('.comments').mouseOver(function() {
$('this').addClass('hover');
});

“$(’this’) refers back to the last “$(”)” which in this case would be “.comments”, so then the mouse over event adds a function that just says to add the class “hover”. Of course this function would only happen when someone triggers the .mousOver event (when someone hovers over a comment). Obviously the “hover” class would do something like add a new background color or a border, you choose. Although this looks promising we cannot leave the code like this, because then when someone hovers a comment it will not simply remove the “hover” class when they move their mouse away it will stay there. Let’s fix that!

$('comments').mouseOut(function() {
$('this').removeClass('hover');
});

Don’t you just love how easy and short jquery is? The really cool thing is that we are going to chain the .mouseOver and .mouseOut events togethor to make it even shorter. This little trick can be kind of confusing at first, I did not feel comfortable chaining code when I first started jquery. Here it is:

$(".comments").mouseover(function() {
$(this).addClass('hover'); })
.mouseout(function() {
$(this).removeClass("over");
});

Now the code is even shorter! I’m guessing you are pretty much in love with jquery right about now so I will leave you two love birds some alone time. I’ll be back with another fabulous article on learning jquery, and this time it’s on animations and all that fun stuff.