What is jQuery? Why jQuery? How to use jQuery?

What is jQuery? Why  jQuery? How to use jQuery? are the most common questions asked by someone new to jQuery. In this article, I am going to answer those three main big questions along with some helpful resources to get you started with jQuery.

First things first.

• jQuery is applicable for: Web Developers & Web Designers.
• Prerequisites: You will need at least basic knowledge of HTML, CSS and JavaScript.

What is jQuery?

Short & Simple: jQuery is an awesome library (or a collection of predefined functions) that helps you speed up web development.

The official jQuery statement is: “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”

If you feel that all the above is technical for you to understand and you feel like asking What is jQuery again, then simply know that jQuery is a helper. Helper of what? You may ask. jQuery is your helper and helps you in reducing the amount of time and efforts you spend on writing tens and hundreds of lines of JavaScript code, be it validating your form, or be it animating an element of a web page.

So for example, if you write native JavaScript code that spans over 20 lines, it’s possible that you can use jQuery to achieve the same functionality by writing only 5 lines of code. Amazing? Yes, it is! jQuery is really so wonderful and so awesome that once you get a hang of it, I bet you will never want to code again in plain old JavaScript.

Why  jQuery?

Why to use jQuery is an interesting question. Although there are many reasons than can be covered within this article, some of the main reasons are:

• Compact yet Powerful: jQuery is very well written JavaScript code and very compact and powerful. The code required to achieve the desired tasks is very minimal. This dramatically increases the productivity of the developer by enabling them to speed up development process.
• Reusable: Because of the reasons mentioned above, the code does not bloat and does not have an overhead. This helps keep the code very concise, simple and reusable.
• Lightweight Footprint: jQuery has an amazingly light weight foot print.  This means that your RAM consumption is very small to execute your JavaScript commands and this helps improve your efficiency.
• AJAX Functionality: Gives you quick access to AJAX functionality and achieve the same results as can be received using traditional JavaScript using very few lines of code.
• Animation Support: jQuery support differnent animation modes such as Fade In, Fade Out, Slide in, Slide Out, Fade Out Time, Slide In Time and a lot, lot more.
• Feature Rich: jQuery has many features that simply fall beyond the scope of discussion of this article. But in short, jQuery helps you develop feature rich applicable for web based applications. You can use jQuery for Interaction, Usability, controlling positioning and layouts of different elements on a web-page and a lot more.
• CSS3 Compliant: jQuery supports the latest CSS3 technologies and is hence CSS3 compliant.
• Cross-browser Compatible: jQuery is cross-browser and hence can be deployed freely and expected to perform and retain cross-browser compatibility.
• Learning Curve: The learning curve is very, very small. The code is so simple that it can be understood with minimal knowledge of HTML and JavaScript.
• Helpful Community: If you are ever caught up in weird situations and need help, then jQuery has a helpful community of members who will help you out willingly. You can post your questions in jQuery Forum.

So now that you know why jQuery, a good place to start would be the official jQuery website.

How to use jQuery:

It’s very simple. You just download a single JavaScript file containing everything comes out of the box with jQuery (Recommended method). Now you can include this file within your web page to access all of it’s predefined functions. You may using the following mark-up to include it within your web page (HTML, PHP, etc.) just above the </head> tag:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

There is another way as well. You can simply refer to remotely hosted (on Google servers) jQuery script and include a path to that file. That way you will have one less file to carry around. You can do this by adding the following markup, instead of the above shown markup:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

Or if you would like to explore all available options, then you can do so by visiting Download section for jQuery.

Difference between Minified and Uncompressed jQuery files:

If you have visited the link above, you will notice that there are 2 versions of the same jQuery file. One is Minified and other is Uncompressed. There is no difference between these two files in terms of functionality. However, there are 2 differences that you should be aware of:

1. The Minified version of the file occupies less disk space and hence loads up faster than the Uncompressed version.
2. The Uncompressed version is easier to read and understand. Because the Minified version is compressed, its really hard to read it make sense out of it.

So when to use Minified and Uncompressed versions of jQuery?

Use the Uncompressed version for developing your application locally. When you move your app. to Production, then replace the Uncompressed version with the Minified version to speed up loading time of the script.

Which version of jQuery should be used?

Always use the latest version by visiting Download section for jQuery. With almost every newer version, more features are added and some existing features are deprecated. So to keep the library current and to make sure that your app. complies to the latest standards, it is highly recommended to always use the latest version.

Sneak Peak at jQuery Code:

Here some tiny bits of code that you can write in jQuery. Please do note that these examples are purely for demo sake and the true power of jQuery is much more beyond than what is being discussed in this article:

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#my_div").addClass("myclass");
});
</script>

Can you guess what’s happening in the above code? C’mon, take a wild guess! If you guessed that a class called “myclass” is being added to a div called “my_div”, then you are 100% correct! See, that wasn’t hard, was it?

Tutorials:

If the entire concept of jQuery interests you, then you can start of by visiting the Tutorials section.

That’s it for this article!

Hopefully this article was able shed more light on the hot questions: What is jQuery? Why jQuery? How to use jQuery? Do you want to contribute anything towards making this article better for new users to understand? Please feel free to share you views by commenting below.