JQuery Tutorial

Please click the link below for the detailed JQuery tutorial. This is the best Online tutorial for Jquery.

JQuery Tutorial


Please feel free to give your opinion on this tutorial

JQUERY

jQuery is a JavaScript library (or framework), created by John Resig in 2006. I am a Web Developer and I have several years of experience working with JavaScript. I watched the language mature from what is now called Web 1.0 (when it was used simply as a script language to process form input) to Web 2.0. It was a little after I learned about JavaScript's Object-Oriented capabilities that I first heard of jQuery from a friend. My friend is also a hobbyist Web Developer, who instant messaged me the link to the jQuery website (www.jquery.com) and said I might find it interesting. At the time I was a little hesitant to give jQuery a try. After all, what was this jQuery, a JavaScript querying framework of some sorts? What did it query and how? What could I do with it?

Looking at the jQuery black website's front page, and the large "Download the most-recent version" button it all seemed like I would spend a long time to learn about the benefits, advantages, disadvantages (or pros and cons) of this framework. I have already spent enough time learning about Object-Oriented JavaScript and experimented with my own website frameworks written in JavaScript. Why would I consider learning a JavaScript framework that someone else wrote?

The simple jQuery world

jQuery was starting to ring in my ears more often than I had expected as the time went by. I heard that important Internet-based companies were using jQuery. I knew there may have been something about it I should know, but still couldn't dedicate enough time to learn anything about it. All I heard was that there were some kinds of jQuery "plugins" that everyone wrote and uploaded on the Internet. I was starting to get more curious, and even made plans to look at jQuery in the near future. It was only a few weeks later that I was interviewing with an Internet-based company, one of the candidacy requirements was basic knowledge of JavaScript and jQuery. To test my level of expertise with JavaScript, I was asked to write my own jQuery plugin by the software engineers in the company. I knew little about jQuery but was getting increasingly surprised at how easy it was to program by calling various methods of the framework. The framework that in a peculiar way asked you to call each method with a function represented by the dollar sign ($) character. But more about this later in this blog.

So what kind of things can you do with jQuery?

My first jQuery shuffle plugin, called gShuffle (play with gShuffle) features some of the interesting things you can do with jQuery. For this plugin I decided to slice up a picture of the Mona Lisa painting by Leonardo DaVinci. You will find more information on that page. You can also take a quick look at the gShuffle source code and see for yourself how simple the code is that achieves a fairly complex (compared to the old Web 1.0 standards) "shuffle" effect.

For those who may not know, using dynamic properties of web programming is the new trend (I am writing this as of December, 2008) in the industry and jQuery makes it just that much simpler to work with dynamic elements. No longer would I need to create utility functions for things such as fade-in and out effects, sliding and resizing effects and coming up with clever ways to capture events with JavaScript code to keep my HTML code clean of those onclick = '...' commands within the tags. jQuery makes assigning a function to capture dispatched events incredibly simple and elegant. It is possible to assign a callback function to all DOM (document object model) elements of interest on your page with a single function call! Of course it would also do so in a multi-browser compatible way.

Is jQuery faster than JavaScript?

jQuery is a web development framework that is written in JavaScript and therefore cannot be "faster" than JavaScript. However, jQuery certainly makes your code much more elegant. jQuery uses CSS-like selectors (the space, the pound sign, the dot and the greater than sign) to select a set of desired elements and apply any function to them. If you are curious about how jQuery does this, the source code is available at their website as a regular js file and does not contain anything that you would not expect from JavaScript. The developers of MooTools have created a page that demonstrates performance of several JavaScript frameworks that inlcudes jQuery. jQuery is a very well-designed framework and it is no surprise that it scores high among the top frameworks as the MooTool's CSS Selector Speed Test page demonstrates that.

Should I use jQuery or JavaScript?

This is a good question. This really depends on the circumstances and what kind of things you are working on. I see that the web-based applications that assume heavy-traffic bandwidth will benefit from jQuery's size. All, or at least most developers will obviously benefit from jQuery's syntax, short learning curve, and the logical way in which jQuery works (it is possible to create multi-chained statements where each member function returns a jQuery object for the element you are working with, so that you can apply additional code to the elements that are returned). On the other hand, for projects where bandwidth volume plays little role, regular Javascript code may be used if the programmed doesn't feel comfortable with using jQuery yet. Having said this, it is difficult to go back to "regular" JavaScript programming once you have experienced front-end web development with jQuery, especially if you are working with a lot of dynamic elements in your project.

Should I use jQuery or Prototype?

There is a heated debate in the Web Developer community as to which framework is better, and which one to choose for your own projects. The answer to this question is not simple due to the increasing number of different JavaScript frameworks, their feature sets, the learning curve, the .js file size for websites that care about bandwidth and finally, the script execution speed (in particular the CSS-selector algorithms). It seems that quite a few people who started with the Prototype library are now baptising to jQuery for a few of those reasons. That's not to say that jQuery is better than Prototype or vice versa. There is simply no "best" JavaScript framework, and it is the choice that is left to the developer. It seems that once you learn jQuery it is difficult to make a different choice. There are probably less people who have converted to Prototype from jQuery.