What is jQuery – The Perks and The Drawbacks

AD

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

monogram of jquery

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

jquery graph

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.

  1. 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.
  2. 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="http://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

dont do it

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.

Legal Note: Some of the data was obtained from jQuery.com

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved