- January 22, 2011
jQuery is basically a JavaScript library and it was designed to make the client-side scripting of HTML more simple. The person responsible for its birth is John Resig at BarCamp NYC in 2006.
It is an open-source software and dual-licensed by MIT License and the GNU General Public License. Version 2. jQuery has received an enormous success and it is used by 31% of the 10,000 most visited websites over internet. This makes jQuery the most popular JavaScript library being used today. We have been sharing jQuery related posts for some time now, so I came up with a post that just defines this new fashion of developing websites.
Introduction
The best thing I like in the syntax is that document navigation is quite easy, the code is also very compact (their slogan is Write Less, Do More); yet it works great for:
- Creating Animations
- Handling Events
- Selecting DOM Elements
- Developing Ajax Programs
jQuery is excellent for developing dynamic web pages and page elements. It allows the developers to create plugins that would work on top of the JavaScript library. These capabilities enable the designers to make abstractions for low-level interactions and animations, and also to create high-level widgets.
Perks
Simplicity
It can be added to any HTML code in using this simple method.
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> ..... </script> </head>
You can download jQuery from jQuery Download Page
Implementation
There are two basic ways to use jQuery.
- via the $ function, which can be called the default work method for the jQuery object. $ functions, often called commands, are patchable; so each of them returns a jQuery object.
- via $.-prefixed functions. These are utility functions which do not work on the jQuery object per se.
Typically, access and manipulation with multiple DOM nodes begins with the $ function being called with a CSS selector string, which results in a jQuery object referencing matching elements in the HTML page.
Plugins
jQuery has got a very well organized architecture. Developers can use it to create their own add-on code to take its functionality to a whole new level. There are millions of jQuery plugins already available on internet for free, including Ajax helpers, data grids, XML tools, drag and drop, cookie handlers…. and the list goes on and on. Probably the best place to download jQuery Plugins is jQuery’s homepage
Special Effects
Another fancy thing about jQuery is that can create special effects with very little code. Here’s an example of an onClick Fade Out function:
<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script src="//code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<script>
$("p").click(function () {
$("p").fadeOut("slow");
});
</script>
</body>
</html>Now, when you will click this link, it will slowly disappear. You can check this demo and some more good example tutorials here.
Drawbacks
Quite honestly, there are not many drawbacks, in fact, there are none. It’s just that sometimes one tool is not suitable in a situation. It’s just a case of appropriateness. There still are a few things that you should know before you decide to use jQuery on your website.
Use of Selector
jQuery always crosses through all the elements each time you use selectors. This makes the application dull.
Solution: Cache your selections with some variable(s) if you are using the same selection at multiple places. And if you are not selecting an element more than once, just don’t cache selection by assigning it to some variable.
Browser Display
There have been many cases where the code worked fine in one browser, but some properties changed in the other. Actually this is not a jQuery specific problem, this happens with many JavaScript based applications, so it is critical that you don’t just test your page in one or two browsers, but in all of them (at least the four major ones, IE-Firefox-Chrome-Opera).
Conclusion
Simply put, jQuery is great. You can easily perform tasks such as:
- drop down menus
- drag and drop elements
- animations and form validation
All of these with very little coding. Since it synchronizes well with PHP, .Net and most of the other languages, it is a pretty handy resource.