Learning Jquery: The Basics

by Hayes Potter. 20 Comments -

First I want to make sure we are all on the same page about Jquery. I am going to assume that since you are reading this you know that Jquery is a javascript library, but you don’t have the faintest clue on how to write code using Jquery. Sure you have jquery installed on your website and have used a couple of plugins, but as far as you know you have to assign this class to an element then the plugin works. Well I am here to change that to make your life easier, like the jquery slogan “Write Less, Do More”.

This guest article was written by Hayes, the 13 year old web developer and designer.
Have some web development, web design or blogging skills? Contribute to CatsWhoCode!

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.

Comments (20) - Leave yours

  1. Tim K. said:

    Use may instead consider writing your last example as such:

    $(document).ready(function() {
    $(’.comments’).hover(function() {
    $(this).addClass(’hover’);
    }, function() {
    $(this).removeClass(’hover’);
    });
    });

  2. noris said:

    if you do not add this code your jquery will be useless.

    i don’t agree with this statement. its just executes the script the moment dom finished loading, which the way we wanted. it is not a necessity.

  3. hayes said:

    Thanks for the comments and I understand the $(‘this’) problem, but at this point I sort of forget whether it was $(this) or $(‘this’). I know I am not wrong on the “this” expression though.

    Sorry for some of the errors I kind of rushed through writing this because of stupid school stuff.

    • Jon said:

      When you are referring to ‘this’, you never put it inside double or single quotations. So to clarify, the correct way is $(this).

  4. CISSP said:

    Ive been using jquery in that too much some happening now, and the additional that you benediction it, the additional you will it. Easy to use, besides nimble break curve also.Great tutorial, shows how manageable sound is to use.

  5. basiL said:

    Thanks for the fantastic post. Article was so simple to understand a newbie like me. Both article and comments helped me a lot. I was fed up with copy/paste 1 or 2 times. Thanks a lot.

  6. Investor said:

    Yeah, I think that Jquery is a lot easier to grasp than mootools, and I just started learning both of them today. I never used much javascript in any of my websites before but Im going to start now hopefully.

  7. Richard said:

    Useful when starting jQuery. It would have been better if you didn’t specialize the tutorial for wordpress or people who have used it. Plus providing the css classes / the entire code would have helped.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!