Complete FAQ related to jQuery and Plugins – Beginners guide to work with jQuery

Its been some time since we discussed about many plugins and jQuery frameworks. Be it a scroll to top, lavalamp jQuery menu or Related posts widget, all are based on jQuery! During the time I was learning the usage of jQuery and its related plugins, I have faced many problems! Especially the problem which beginners feel is understanding the concept and USAGE of the JavaScript Properly! This results in improper insertion of the jQuery framework. The worst example of this is to follow A-Z everything from a particular tutorial and thereby inserting the same framework multiple times and also different version of jQuery framework.

So, today we shall answer a few questions related to jQuery which is asked by beginners many times. After going through the FAQs completely, you shall be able to

Insert the jQuery framework in your website template properly.
Use as many plugins you want without any contradiction of course by learning the basic concepts of jQuery.
Do more with the powerful client side scripting language.

So lets start now…

What is jQuery and how to use it?

Saying simply, jQuery is nothing but a powerful JavaScript codes [or better say Library], which when included on our blog/website template, lets us to call many functions easily and do more effects without writing huge amount of codes. For example, if we are using the vTip plugin, then we only need to write a 2 lines code, to make that effect (Provided that we have jQuery framework on our site).

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.

So, if you have this framework with you, then you have many additional options available at your hand which you can do with JavaScript.

This to remember that, jQuery is not a new programming language. It is completely a new and Better JavaScript Library. If you have the knowledge of JavaScript, then you can even make your own plugins for jQuery. Learning jQuery does not take more than going through its basic and few advanced calling techniques and usage types.

For this, you may prefer the following documentation:

For more please use the official Tutorial.

How am I supposed to get jQuery? Does it cost?

Downloading the latest jQuery No! jQuery is a free and Open Source project. If you are an JavaScript expert, then you can also contribute and make your own Plugin for jQuery. For getting jQuery you can use the following methods

Go to the Official jQuery Website.
Now Select the version you wish to have. If you want jQuery framework for using its benefits and plugins then select the “Production” version. It is a minified code without any comments on the JavaScript Library, which causes it to load fast keeping the site loading time minimum. If you are going to modify the core jQuery code then select the “Development” version.
Now just click on download button and you have your jQuery framework.

How to insert/include jQuery framework on my Website/Blog?

There are basically two ways. Choose the one that suits you the best

1. You yourself host your jQuery framework:

Just download the jQuery framework as stated above.
Now upload the framework on a particular directory say “javascript” directory on your root website directory.

On your website template insert the following script tag before the closing </head> tag.

<script type="text/javascript" src="http://www.yoursite.com/javascript/jquery-1.3.2.min.js"></script>

Now you are ready to power up your site with loads of jQuery plugins we are going to discuss.

Let Google host the jQuery for you:

If you are using some platforms like blogger then possibilities are that you can not upload files directly over your server. In that case you can let Google to host jQuery for you! When it comes to Google’s jQuery hosting, it is pretty much fast [even faster from your very own shared host]. So you can completely rely on it! Just follow the process below:

Go to the jQuery section of the Google AJAX Library page. (To visit the Library page, click here)
Now note down the path of the jQuery file (As shown on the image below)… Right now the latest version of jQuery is 1.3.2 and its path is

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

So we shall use this for now! But if a later version of framework is available the time you are reading this tutorial then please use that framework instead
Now instead of downloading it, just put it directly on a script tag of course before the closing </head> tag of your template.
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
```
Voila! Now you are done letting Google hosting your jQuery.

Previously we have talked about inserting jQuery framework directly on blogger template! You can use either of the methods. With the following method you will be able to take advantage of the cache interface of browsers. So I recommend the above method. Also there has already been a huge discussion at encosia on the proper hosting and insertion of jQuery framework which gives weightage to the 2nd method stated above (Letting google to host your jQuery)

Ok! I have the jQuery framework… Now??!!

Now, now is the time to explore the power of this Library. With hundreds of Open Source and Free plugins on jQuery directory, you don’t even need to code anything to get some cool effect. Here is a List of useful plugin sources

That was only 5! There are many which we shall be discussing over time. You can check it any time at this category. Do check the documentation available with each Plugin for the proper execution and modification.

Can I use jQuery with CSS? or What advantages can I get as a Web developer?

Best question. Basically jQuery was designed to ease up the writing of JavaScript codes. Previously, which could have taken 100 lines of JS coding to make one tweak, now takes only 1 line (believe it! It does take only one line). jQuery comes with a powerful CSS selector, using which you can easily work on classes and IDs of HTML tags from your own markups.

Here is a complete and good tutorial from which you can understand the usage of jQuery as a Web Developer. Note that this tutorial pre-assumes that you are well familiar with HTML and CSS. If not then learn both the markup languages from here and here.

Do I need to attach different version of jQuery for plugin compatibility?

Of course NO. And another big NO. When jQuery is developed/upgraded to the next version then it automatically takes care of the plugin compatibility.

Suppose if a plugin says it is compatible with jQuery version 1.2.6 / above and you have the framework 1.3.2 already in your site then you do not need to include the jQuery version 1.2.6 separately for that plugin. That one will work fine under 1.3.2 also (If not stated otherwise on the documentation) and you just need to include the Plugin codes.

If you include multiple version of jQuery frameworks then this may result in non-function ability of both plugins and any other code you are using!

Some Important Links at once:

Official jQuery site
Plugin Repository at official site
Official Tutorial Collections on jQuery
W3schools HTML, CSS and JavaScript Tutorials
Google AJAX API page for hosting jQuery
Learning the basic usage of jQuery, Getting started with jQuery and application as a web developer.
Official guide to solve more of your FAQs
LearningjQueryBlog – A good place to learn about core function of jQuery

So that was our quick and complete guide for starting yourself up with jQuery. I hope you have found it useful.

Did I missed any point or are you having any further queries? If so feel free to give us your feedbacks and ask your queries…