× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Getting started with jQuery

In this article we will learn about the different tools that can be used to write and test jQuery code. This article will build on this one and get more involved with the jQuery API.

Most likely you have heard of jQuery and its benefits in creating web applications. This article is the start of many discussions of jQuery and its features. The plan today is to download jQuery, learn about the different tools that can be used to write and test jQuery code, and work with a simple example.

To start, jQuery is a popular JavaScript library that simplifies HTML document traversal and manipulation. It also supports event handling, animation, and Ajax calls. In general, when we talk about a library, we are discussing a set of functionality that help the user accomplish specific tasks. The library needs to be consistent and easy to use. That is what jQuery delivers. It hides away some of frustrations of using JavaScript and the inconsistency between browsers. Later in this article, I will list some of the benefits of jQuery.

There are other jQuery foundation projects: jQuery User Interface, jQuery Mobile, jQuery QUnit, and Sizzle. Here is a brief description of each:

  • jQuery User Interface: This is a set of user interface interactions, effects, widgets, and themes that help developers build sophisticated web pages. Some of the widgets include: Button, Datepicker, Dialog, and Menu. You are able to use these controls out of the box to create highly responsive applications. When it comes to interactions, you can use the Draggable and Droppable elements that are similar to desktop applications. Finally, you can use the effects to add classes and color animations to make your web application stand out. There is a lot more to discuss on jQuery UI. For that I will be creating dedicated articles to discuss these controls in detail.
  • jQuery Mobile: It is not feasible anymore to create web applications without supporting mobile devices. jQuery Mobile is an HTML5-based user interface system that is designed to make responsive web sites and apps that are accessible on all popular smartphones and tablets.
  • jQuery QUnit: Unit testing frameworks are the core of creating reliable and bug-free applications. An example of these frameworks is QUnit. You can use it to test jQuery, jQuery UI and jQuery Mobile projects. The developers can create functions to test their code. That way when the application makes it to the hands of QA, most of the issues have already been fixed. In addition, the library of tests can grow, and the developer can run hundreds of tests against the code in few seconds. If any test fails, the developer can zoom in on the issue and get it resolved quickly.
  • Sizzle: This is a pure-JavaScript CSS selector engine that is multi-browser and open source.

Note: In this article, I am talking about the jQuery library in general, not about any specific foundation projects listed above.

As a web developer, you know that there are tons of libraries out there that you can use to simplify your web development experience. But one of the main issues that you are encountering is the ability to support different browsers and different versions of the same browser. For example, a specific feature might not work in IE 7, but works very well in IE 8. However, you are reluctant of creating browser specific code. You need to use a library that abstracts that from you, so you can concentrate on the core features. jQuery will provide that browser-agnostic approach of coding and a lot more. I am not saying that the other libraries lack in this regard, but jQuery has many features that make it stand out from the crowd.

There are many benefits for using jQuery. Some of these benefits include:

  • It handles cross-browser issues. When using JavaScript alone, you will need to write browser specific code because different browsers (and different versions of the same browser) have different implementations of JavaScript. This becomes a nightmare when trying to implement code that works across browsers. This is not the case with jQuery. Most of the browser-specific code is abstracted from you. When you write jQuery code, you hardly need to know the browser and browser version you are working with.
  • jQuery code is very efficient and compact. With jQuery, you can chain actions together, and it is very common to replace a dozen of JavaScript code with a single line of jQuery code.
  • jQuery is very extensible. jQuery provides a plugin framework that makes it easy to extend the core functionality.
  • Great documentation and tutorial. The jQuery web site (http://www.jquery.com ) contains a detailed documentation and examples of the API. In addition, since jQuery is widely used, there are many discussions and questions answered on the jQuery forums.

Getting jQuery

To start, you need to download the jQuery from http://www.jquery.com . When you visit the site, you will see the following on the right hand side. As of this writing, the current version is 2.0.3:

Download jQuery

Figure 1: Download jQuery

When you click on this link, you will be forwarded to a page that contains different jQuery versions (jQuery 1.x and jQuery 2.x).

Start by reading the details of each version to know which one will suit your needs. The key item that you will need to know is the browser support. As jQuery progresses, it drops the support for older browser versions. For instance, version 2.0.3 does not support IE 6, 7, or 8. If your web site needs to accommodate these versions, then you will need an earlier version of jQuery. In this article, I will use version 2.0.3 to create the examples. Clicking on the link will open up a browser tab that contains the code. To avoid that, right click on the link and “Save as”. You can save the “.js” file anywhere on your computer. Here is a sample of the files that I have downloaded:

Downloaded jQuery files

Figure 2: Downloaded jQuery files

What is the difference between these files, and which one would I need? As you can see, the difference is the “min”. This is the minified version of the file. In other words, the spaces have been stripped out and the variables are replaced with shorter ones.

The result is a smaller size file (82k instead of 237k). As a developer, you will use jquery-2.0.3.js during development. The reason is that if you need to debug the code (debugging jQuery code will be the subject of another article), it is easily readable.

On the other hand, when deploying the code to production, you will use jquery-2.0.3.min.js. This is a smaller file and faster to download.

Development tools:

After downloading jQuery, the first question that comes to mind is: what tools should I use to write and test the code. There are many tools out there ranging from free to costly that you can use to create web applications, including writing jQuery code. For the simplest approach you can use Notepad. You can write the html code and the jQuery code in the same file, or you can put the JavaScript code in a separate file. However, as the files get larger and larger you will notice that Notepad is not efficient. After all, Notepad is a simple editor. It is hard to tell that you mistyped a function, or you missed a closing HTML tag. You can upgrade to Notepad++ (a free download) which contains many helpful features like code coloring, and the ability to test your code from within the tool. I recommend using Notepad++ for experimenting with jQuery and creating small to medium size files. But, as your projects get more involved, I suggest using IDEs (Integrated Development Environments) such as Visual Studio. The Express version of Visual Studio is free. It lacks some advanced features, but nothing that you need for most of your development. You can also use Sublime Text which supports many helpful features. My goal in this discussion is to tell you that there are many text editors out there (mostly free) that you can use to write your code. But I will let you decide which one works for you. In my case, I feel comfortable using Visual Studio. The code you see below is written using Visual Studio Express for Web 2012 (version 2013 is already out as well). When I need to experiment with a feature, I use JsFiddle (http://jsfiddle.net ). JsFiddle is an online editor that provides support for working with jQuery.

Now that you have written the code, how are you going to test it? You can use your favorite web browser. In my case, I work with either Google Chrome or Firefox. I like the features they provide especially the developer tools. These tools come handy when debugging the code. In other words, you know that your code is not working as expected and you need to find out where the problem is. You can set breakpoints (places where the code execution will stop), and step through the code one line at a time while watching the content of the variables to zoom in on the issue. We will have a separate article on debugging jQuery code. I rarely use IE because the developer tools are not as mature. Again, it is your choice here regarding which web browser you feel most comfortable with. Keep in mind, however, that you will need to test your code in many different browsers (Firefox, Chrome, IE, Opera, …) to make sure that the code is working as expected. In addition, you need to test in many different versions of the same browser to avoid any surprises.

Referencing jQuery:

Now that you downloaded jQuery, you will need to reference it in your code to use its functionality. For the sake of this article, I am using an HTML 5 form that reads some information from the user. The code looks like the following:

Listing 1: Customer information form

<!DOCTYPE html>
    <title>Getting started with jQuery</title>
	 <legend>Customer Information</legend>
	 <label>First Name:</label>
	 <input type="text" placeholder="first name" /> 
     <br /><br />
	 <label>Last Name:</label>
	 <input type="text" placeholder="last name" />
     <br /><br />
	 <label>Programming Language:</label> 
     <br />
	 <select multiple="multiple">
	 </select> <br /><br />
	 <label>Comments:</label> <br />
	 <textarea rows="4"></textarea> <br /><br />
	 <button type="submit" class="btn">Submit</button>

This code will ask the user for the first name, last name, the programming language(s) of choice, and some comments. As it stands right now, this code is not using jQuery. You will need to add a reference to jQuery in the “head” section of the page. Currently, I have the jQuery files and the HTML form in the same directory, as so:

File locations

Figure 3: File locations

I added the reference to jQuery using the script tag. Here is how the header looks like:

Listing 2: Header code

    <title>Getting started with jQuery</title>
    <script src="jquery-2.0.3.js" type="text/javascript"></script>

The source attribute (src) points to the JavaScript file. Since this file and the HTML one are in the same folder, the name of the file will suffice. In other cases where the files are in different directories you will need to be more specific in pointing to the appropriate file (such as ../src/jQuery/jquery-2.0.3.js).

Using jQuery:

Now that the reference has been added, you can start writing code that calls the jQuery API. Before doing so, let’s get a terminology out of the way: The DOM is the Document Object Model. This represents the structure of the page you are working with. In our case, we have an HTML page that contains a head and a body. Within the body, there is the form that contains labels and input boxes… and so on. When the browser loads the page, it loads these specific tags and it will have a clear idea of the structure on the document. What is important to us in this case is making sure that the DOM is ready before we start executing code against specific elements. jQuery provides that guarantee through the “ready()” function. In other words, we can say when the DOM is ready, we want to do such and such. Since we are working with JavaScript, we will put all that code in a <script> tag. The code will be:

Listing 3: Setting the “ready” function

        $(document).ready(function () {


But wait, what is the $ doing there? This is the jQuery function. In other words, we could say jQuery(document) instead of $(document). $ is the shortcut, and as you can see it is easier to write that than writing jQuery every time. You do not have to use the $, though. You can replace it with something else, as in:

Listing 4: Substituting the $ function

var q = jQuery.noConflict(); //now you can use q instead 

Now that the document is ready, what can I do? “ready” takes a function as a parameter that contains all the code you need to execute. Say for example, I want to change the background color of the input boxes to yellow to bring that to the user’s attention.

As you can see, this involves using the CSS (cascading Style Sheet). jQuery contains such functionality. There is a function called “css” that takes as a first parameter the attribute you would like to change, and as a second parameter, the value of that attribute. For our purposes, we need to reference the first name and last name and change their CSS. To do so, we need to give these elements unique ids (You can also use CSS classes to do the same thing). Here are the changes we will be making to the elements:

Listing 5: Adding Ids to the input boxes

<label>First Name:</label>
	 <input type="text" placeholder="first name" id="firstName"/> 
     <br /><br />
	 <label>Last Name:</label>
	 <input type="text" placeholder="last name" id="lastName" />
     <br /><br />

Notice the unique ids at the end of each tag. Referencing these elements through their ids is very similar to the way it is done in CSS. We will use the “#” sign. Now the jQuery code will look like the following:

Listing 6: Changing the background color

        $(document).ready(function () {
            $('#firstName').css('background-color', 'yellow');
            $('#lastName').css('background-color', 'yellow');

As you can see, we get the elements using $ and #. Then, we call the css function to change the background color to yellow. The browser will display the following:

 Customer information form

Figure 4: Customer information form


In this article, we discussed how to download and reference jQuery. We talked about the different tools that can be used to write and test jQuery code. We also walked through an example that illustrates how to use jQuery to traverse and manipulate the DOM. In the upcoming articles, we will delve more into the details of the jQuery API. Stay tuned…

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login