J.me

A little guide of using jQuery

JQuery is Javascript library that can help you write code smaller and easier to take a good care of event handling, animating, AJAX and more. With jQuery, we can make our webpages more beautiful. You can see that I used it for my side menu here. 🙂

This article didn’t intend to teach you how to became the jQuery master and I’m far away from a master. It just for the case you didn’t know about jQuery yet and want to start with it, then this will be a good guide for you. If you want a more complete tutorial, go to the jQuery documentation.

To use jQuery, you must first download it on jQuery website, then load the jQuery js files on your HTML document. For example

<html>
<head>
    <script type=”text/javascript” src=”jquery.js”></script>
    <script type=”text/javascript”>
        // your code here
    </script>
</head>
<body>
    <!– your html content –>
</body>
</html>

Now, you can start writing your Javascript code using the jQuery API. Also, you can also separate your Javascript code and load it.

Here is a little example use hover event and then show some box below it, also use the click event to show some alert.

Example

See… Quite cool eh? I use this on my side menu. So how to make this kind of code? It’s pretty easy using jQuery.

<script type=”text/javascript”>
$(document).ready(function(){
    $(“#example-links”).hover(function(){
        $(“#example-box”).show(500);
    }, function(){
        $(“#example-box”).hide(500);
    });
    $(“#example-links”).click(function(){
        alert(“You clicked the example links!”);
    });
});
</script>

Look, that is the Javascript. Complicated? No, read carefully… First, we need to place all of our script on $(document).ready() event. So, this will set all of your event handler once the DOM (Document Object Model) is ready. You can have as many $(document).ready() event as you want in your header or body tags.

This event, need a callback function. Here we made the callback function directly on the ready event argument, without separated function. So the code is mostly like this

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

Ok, this make it clearer right? This is the basic of jQuery, most event are called like this.

Next, the selector, as you can see in this code, we have at least two unique selector, #example-links and #example-box. If you has known CSS, it is probably very clear to you. This select element that based on its id attribute. Then, enclose it with $( and ) will construct the jQuery object. Oh, don’t forget to enclose the selector with quotes.

$(“#example-links”).click(function(){
    alert(“You clicked the example links!”);
});

This line set the click event handler for element with example-links id. So, while users click on this links, the alert box will be prompted.

$(“#example-links”).hover(function(){
    $(“#example-box”).show(500);
}, function(){
    $(“#example-box”).hide(500);
});

Now look on this line, it set the hover event handler. You can see that we have two function as the argument. The first one will be called when users hover the mouse on the element, while the second one will be called when the mouse out from the element. Inside the function, we call the show and hide effect for #example-box element. For more information about the events, effects, and more, see the documentation page.

I think the code is quite understandable now, if you at least have basic on Javascript before. Now the HTML

<a id=”example-links” style=”font-size: 20px;” href=”#”>Example</a>
<div id=”example-box” style=”margin: auto; background: #ff9999 none repeat scroll 0% 0%; display: none; width: 200px; height: 200px;”>This is an example box.</div>

That’s all. Hope you find it useful. 🙂

No comment yet

Leave a comment