This is a beginners guide and information to getting started with jQuery. As you might know jQuery is light weight and cross browser, and is a leading JavaScript library. It was created by John Resig, while he was working in Mozilla.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
What is JavaScript library?
JavaScript libraries help you write more organised JavaScript code. These libraries are built on top of JavaScript and helps the programmer to write more maintainable cross-browser JavaScript.
Write less, do more
As it says on the home page, jQuery helps you to reduce your JavaScript code with clever, short and easy to understand syntax.
Why do we need jQuery? (or any other js framework)
In short, for faster development and better maintenance. If you have developed web application, you know the pain for writing vanilla JavaScript and hacking it to work as expected on all available browsers. The code base becomes huge and cluttered, which in turn effects the application maintenance. You could minimize it, by the clever use of JavaScript objects and prototyping. But a new developer may not be able to follow your code, unless it is properly documented and you are trying to re-invent the wheel.
If you are using a js framework like jQuery, then you can be sure that it is properly documented and there is a huge community out there to help you out.
Other JavaScript libraries?
There are lots of other js frameworks like Mootools, Dojo, Prototype, YUI and many more. Deciding which one to select depends on various factors like the project requirement, resource available, deadline etc.
What I liked about jQuery is that is easy to get started and get cracking. They say Mootools is great, I found their documentation poor. Mootools is a great choice if you are going to develop a complex application with lots of custom objects in it. jQuery is more focused on manipulating collections returned by the selectors.
For example jsFiddle is built on Mootools, building that on jQuery would have been harder.
How can jQuery help?
- Its fast - Test JavaScript framework selectors speed at slickspeed
- Cross browser - Forget about writing js hacks for IE, same code works everywhere.
- Small size - just 55kb
- Easy animations and CSS3 selectors.
- Makes your REST client simple, with built in ajax support.
- Extremely simple to get started
Onload event
Most javascript developers use the onload event either in the body tag or window.onload in javascript. But when using jQuery you don't do it like that.
Instead, you load the jQuery. file and use $(document).ready(); function available. Most jQuery functions allows callbacks. Callback functions are called up on an event.
$(document).ready(function () {
alert('loaded');
});
This will alert 'loaded', when the document is loaded. Here the callback function is defined as an anonymous JavaScript function, which jQuery calls on the event of 'document ready'. Read about the difference between onload & document ready here.
Selectors
To get started with jQuery you should need an understanding of selectors. Selectors always return us a collection of jQuery objects, which we can manipulate. We may select an object using its id, class name, tag name or its combinations. The rules are similar to CSS rules. Id is referred using '#', class is referred using '.' and tags are selected using the tag name.
For example an element with id myelement is selected by
$('#myelement')
All elements with class myclass is selected by
$('.myclass')
And all p elements can be selected by
$('p')
As you have figured out all p elements with class myclass is selected by
$('p .myclass')
After selecting an element or group of element, you can manipulate is using various functions available in jQuery or in plugins. You may as well write your own jQuery plugins.
Now let us look at doing something with jQuery and JavaScript. We will try a simple example of changing the text content in an html element. Here is the content we want to change:
We will change the 'Old Text' to 'New Text'
Change html text using JavaScript
Fiddle here: http://jsfiddle.net/gh/gist/library/pure/3775927/Now the same stuff in jQuery.
Change html text using jQuery
Fiddle here: http://jsfiddle.net/gh/gist/jquery/1.8/3776540/In jQuery we did that in one line and the code is so much easy to understand. Also it processes fast as it doesn't wait for the complete all content to load, as soon as the DOM is available, jQuery starts it job.
