The powerful jQuery programming libraries has transformed the web dramatically in the last few years.  Now we can prototype backend effects and animations much quicker and with much shorter codes. At first the huge collections of jQuery functions may seem a little over whelming to a newbie but the reality is that it’s not that hard to figure out its syntax, and if you are already familiar with JavaScript then it should not be a problem at all.

Even if you are not well versed using JavaScript and new to such programming languages even then it should not take long to get started. Here I have provided some tips for the newbie programmers. If you are planning for a career in frontend web applications then I highly recommend that you get yourself acquainted with this programming language. If you just start understanding the basic syntax and terminology it will push you towards a much understanding of DOM manipulation and effects.

Getting Started

The first step will be to include the most recent version of jQuery. For this you can go to jquery.com and look for the most recent version of the language. You can set up your document by two ways either by directly downloading the file from jquery.com and packaging it with your web application. Or by including an external document from Google which hosts all versions of jQuery live via their servers. The benefit of including an external Google document is that you will save you time on each page load.

Next step will be confirming if the document has loaded properly. You can do this in JavaScript as well but with jQuery you get advanced selectors with which you can achieve it much more quickly. Here is an example of the code:

$(document).ready(function() {

//do stuff

});

This code uses the $() selector syntax of jQuery. Any object that is placed inside the parenthesis will become the focal point for all the functional code written later. In the above code it is the webpage document object. Within the core function we can include any number of methods to perform directly on page load.

Creating Functionality

In the beginning you will have to spend a few hours in browsing the jQuery tutorials section as you can struggle to understand how constructors are used to target elements. Selector is the most important part of any jQuery Call and you will be working with selectors in almost all of your scripts.

Here i will create some basic functionality by building a small alert box upon clicking a link. There are a number of ways of doing that and you can choose one according to your needs. You can give the link a class or ID which can become the target in jQuery. The Ids that always begin with a hash symbol (#) are unique throughout the page. The classes that always starts with a period (.) and can be used multiple times.

Here is some basic HTML and jQuery code that will display our alert box.  We are using two script tags together, the first is added within our heading and includes the most recent jQuery library code while the second scripting tag will be written in the HTML.

<body>

<script type=”text/javascript”>

$(document).ready(function() {

                    $(“a”).click(function(e) {

                                         e.preventDefault();

                                         alert(“hey there!”);

                    });

});

</script>

As you can see the code is added directly after the opening body tag but this isn’t necessarily required as jQuery scripting is actually loaded before the full document. This is the reason why we select the entire document and pass the ready () function to check if it is finished loading, right in the beginning of the code. This is the basic structure of jQuery so you will have to get yourself used to with this template.

Breaking Down the Code

Once our document has been loaded we call a new selector. This will attach a click even handler onto all the a links of the page. No matter what is the value set for href, the code inside your function will be loaded anyways.

If your links lead externally then the first part of the code prevents such a behaviour. You can store the even taken from any object by passing in a variable to your function which in this case is e. In the code above we are storing the click even from any hyperlink on the page, but the preventDefault () method will stop any link from loading further.

In the end we call our alert () function. For the testing this out you can simply add a new link into your HTML document. Keep in mind that you also have to add the JavaScript code above and attach the latest jQuery library from Google Code APIs.

Creating Fade-ins and Fade-outs

While the jQuery scripting library can be used for a number of purposes like DOM programming, dynamic animations and applying text effects but the simplest of these effects to understand are the fades. These reduces or increases the opacity of any HTML element on your page.

In the code the below i have worked out a simple fading effect which applies to specific types of paragraphs. This includes styling to make them stand apart from the rest of the page.

<style type="text/css">
p.abc { font-family: Arial, Helvetica, sans-serif; background: #ccc; padding: 3px 7px; }
</style>

This style can be added anywhere and you can even include them into a separate .css file. This style is targeting paragraph elements with the class “abc”. The font is set to Arial, it is given some padding and background colour is set to a light grey. Opacity can also be set here but it is easier to include it in our new jQuery code.

We opened a $ (document) .ready() even for our link alert box in the beginning. It is easy to add in some new code within this call inside our ready () function. This can be a little confusing so instead of including just the new code i have added the whole code so you can see what changes have been applied.

<script type="text/javascript">
$(document).ready(function() {
                    $("a").click(function(e) {
                                         e.preventDefault();
                                         alert("hey there!");
                    });
 
                    /* set opacity 30% */
                    $("p.abc").css("opacity","0.3");
                    $("p.abc").hover(function() {
                                         $(this).stop().animate({
                                                             opacity: 1.0
                                         }, "slow");
                    }, function () {
                                         $(this).stop().animate({
                                         opacity: 0.3
                                         }, "slow");
                    });
});
</script>

After the click event handler I’ve added two separate parts of code. The first part sets all paragraphs of the class “abc” to 30 percent opacity. You can change this number according to the decimal values, such as 0.5 for 50 percent.

A similar method has been set to the .click() handler which is hover (). Every time you hover over a paragraph element with the class of abc our function will be called. For your practice try adding this code above into your same document from before. It is amazing the amount of functionality that can be built in jQuery all in a matter of just a few minutes.

Conclusion

This is just a brief introduction to the syntax behind jQuery and some of its methods. It is a powerful programming language and it has already changed the way we use the internet. The user interfaces can be drafted in a couple of hours with full animations and wonderful effects.

jQuery is quite extensive and its developers have created and released a lot of plugins for free all powered on the jQuery library. Just use jQuery sparingly in your code and if you use the right balance you can start building great interfaces quickly.