A brief overview of jQuery

Among many JavaScript libraries, jQuery attracted me the most because it is lightweight, it is simple and has intuitive syntax. Another great thing is that elements are selected just like you got used to in CSS. No wonder this is the most popular library. In this article, I'll try to explain the key points in jQuery. In our examples we'll use jQuery in old and simple html pages, so you will need only a Notepad Smile. So, let's start.

I started to explore jQuery recently and I am amazed. I will continue to explore the possibilities and make few articles based on my "research" Smile

To start using jQuery you will have to download jQuery library and then link jQuery.js on html page. In examples in this article, I'll write JS code directly on html pages, but I do really hope so you use external js files.

<head>
    <title>My first jQuery page</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>

What jQuery offers?

You can select any DOM element using selectors, you can access element's attributes, attach to events in a more intuitive way that classic JavaScript. You can find a very useful FAQ on jQuery website that will show you some basic information and some tricks as well.

Let's see just a few examples of how easy jQuery is. For more detailed descriptions and questions, please visit jQuery official documentation.

Some examples

In case you didn't know that, all JavaScript code is run after all images are downloaded. There is a simple code snippet in jQuery that will enable your code to run after document is downloaded but WITHOUT images.

<script type="text/javascript">
     $(document).ready(function(){
        // some code here
     });
</script>

Like I mentioned earlier in this article, jQuery selectors are very similar to CSS. Let's take a look at the code snippets below:

jQuery code:

$("#someDiv").css("border","1px Solid #000000");

CSS code

#someDiv
{
    border: Solid 1px #000000;
}

You see that we select element someDiv by it's name in the same way in jQuery like we do it in CSS. In the example above I added 1px black border to <div> element "someDiv'. Let's take a look at few more examples:

$("a").css("color","#ff0000");

In the example above, I colored all <a> elements to red color. In the same way you can select elements by it's class name:

$(".someClass").css("color","#ff0000");

or you can select multiple elements, or just child elements of a given element and so on.

Summary

In this brief overview you saw what jQuery is, and where you can find more information. In next articles I'll show you some examples and how jQuery works with ASP.NET.

AddThis Social Bookmark Button

Published Tuesday, March 18, 2008 11:07 AM by janko
Filed under: , ,
Powered by Community Server (Commercial Edition), by Telligent Systems