Introduction to jQuery Programming Library

If you already program in JavaScript, you'll find that jQuery is a much more convenient, flexibly library to use. You might think that jQuery is another language, but it's actually a library based on JavaScript. As you learn jQuery, it will become apparent that it's based on JavaScript. You can make highly customizable, fast, user-friendly client side applications that improve the usability on your site. In this article, we'll introduce you to jQuery and show you how to create sample applications.

What is jQuery?

In the last few years, JavaScript usage has increased. More programmers are creating libraries that other programmers can plug into their applications. The advantage over JavaScript is that it's fast.

To illustrate, consider an old server-side application. Every time the user clicks a button or selects an item from a dropdown menu, the application had to do a round trip to the server. This means that all data is sent to the web server, the web server processes the request, and then the information is sent back to the user's browser.

With JavaScript, the user can make a selection and all processing is done on the user's local browser. The result is that processing is much faster, and it takes much of the resource usage off of the web server so that it can perform other more important tasks.

Even though JavaScript is fast, it's tedious to work with each item in the DOM (document object model). The DOM is the page that loads in the browser, and each HTML element is given an ID. To manipulate these HTML elements, you must use its ID or other properties that uniquely identify each one. With jQuery, it's much easier to identify elements, create variables to reference these elements, and then change their properties. This is the beauty of jQuery and why it's preferred over using standard JavaScript.

You will find many web applications already use jQuery. It's become a very popular language that makes web development much more convenient and easier to use when implementing client-side scripting. Even if you know JavaScript, jQuery has many different referencing models and syntax that isn't present in JavaScript. For this reason, you must learn jQuery in addition to learning JavaScript or the syntax and methods will look unfamiliar to you.

If you plan to work in web development, it's highly likely that you will run into jQuery code. It's become one of the most common JavaScript libraries on the web.

jQuery and Web Browsers

To understand jQuery and the way it works, you should first understand the way a browser works and HTML displays. You should also understand the difference between a server-side application and a client-side one. Server-side programming was explained in the previous section. Both types of scripting have a very unique way of working and require different testing, debugging, operating system requirements, and security issues.

Remember that jQuery is client-side scripting. This means the browser must execute the code you create on your site. Most users have a browser that understands JavaScript and jQuery, but some users have unknown browsers. This means that your code might not work if the browser developers don't efficiently code for jQuery support. For the most part, if the browser can run JavaScript, it can also execute jQuery. It's a good general rule of thumb but not guaranteed.

The only way to be sure that a browser works with your jQuery code is to test it in each browser. This is one disadvantage to client-side scripting. You must account for different operating systems and browser versions. Newer browsers may run your code just fine, but older browsers that don't have the latest JavaScript support could crash.

When you work with client-side scripting, you must determine the browsers and browser versions you will support. Most developers only support more recent browsers to streamline the process. Not only does JavaScript run differently on older browsers, but they also work differently in some browsers. For instance, there are some small nuances between Internet Explorer and Firefox and Chrome when programming JavaScript. You need to keep different libraries and code sets for these differences, which can be tedious and difficult to track for developers.

The difference in browsers and support is why it's important for every developer to test their application in different browsers and even on different operating systems. You can create virtual machines with each browser or you can install each browser on one virtual machine. Don't forget that you need to test with different browser versions, which means you need a VM for each version.

Web Tools

There are numerous web tools on the market that help you work with UI elements in your pages. You don't need to manually create tabs, tooltips, and form elements anymore. Designers and jQuery developers have created libraries that do it for you. You still need to implement these libraries and plug them into your application, but you can do this with minimal effort.

These web tools are convenient if you are new to jQuery, because they no longer require you to code different elements on a page. With forms, you can make calls to form elements and manipulate values without creating classes and libraries to do it for you.

Pre-made tools also reduce the chances that you create bugs in your applications. These web tools are tested and used by other developers, so the bugs and issues have been worked out. This is another advantage to using premade tools on the market. To find the right tool, you can perform a Google search or visit jQuery's website to find the right solution. When you do a search, check the ratings to ensure that there have been plenty of downloads and the developer continues to support the library.

Once you implement a library into your code base, it's very difficult to remove or change it. For this reason, make sure any library is right for your project and has the necessary support from the developer.

jQuery Basics

Now that you have a background in what jQuery can do for you, it's time to take a look at the jQuery syntax. You'll notice that jQuery is similar to JavaScript because it's based on JavaScript. However, there are small differences in syntax.

Let's first take a look at the way you can reference all elements on a page. For instance, you might want to reference all list objects (li in HTML) on the page. You reference them using the following code.

var htmlLists = jQuery( 'li' );

Notice that the syntax is similar to JavaScript. You define a variable using the "var" keyword. The second "htmlLists" item is the name of the variable. So far, it's the same as JavaScript syntax.

The "jQuery" keyword is where we define that we want to use the jQuery library. This is the specific jQuery notation that you need to use throughout your program. Inside the function parenthesis is the HTML tag shorthand that you use inside your document. You can place any HTML tag in the parenthesis and jQuery will grab all elements in your document and assign the reference to the variable we named htmlLists. With this variable created, you can now use htmlLists as if you are using methods and properties directly within the page. As long as the method and property exists with the element, then you can use it in your jQuery code.

jQuery has shorthand that lets you skip typing the term "jQuery" with all of your functions and replace it with a dollar sign. Take the above statement.

var htmlLists = jQuery( 'li' );

It can be replaced by the following code.

var htmlLists = $( 'li' );

Notice the dollar sign replaces the jQuery notation. When you work with jQuery, you will rarely find any coder who types out the jQuery word. Instead, they use the dollar symbol as a standard.

You can also retrieve elements based on its ID. Each element is given a unique ID. It must be unique or you have a syntax error in your page. Take a look at the following code.

var firstName = $( '#firstname' );

In the above statement, one element is assigned to the variable. The form text box named "firstname" is assigned to a jQuery variable named firstName. This type of assignment lets you manipulate the form element's value and properties without continually specifying the element using longer notation.

Include jQuery in Your Projects

Before you can use jQuery, you must include the libraries in your project. You not only include jQuery libraries, but you also include the tools and add-on libraries downloaded from the Internet.

The jQuery developers upgrade and make changes to the code base, so the file you use determines the jQuery version that you support. You have two options when you include a file. You can include a local file stored on your local web server, or you can include a cloud file from a cloud provider. Several providers offer cloud implementation for JavaScript includes. The advantage is that you don't need to host the files on your own.

First, take a look at the code to include a local jQuery file on your web server.

Notice that the include file is located in the opening and closing head tags. Any of your script tags should be located in the head tag unless otherwise specified by the developer.

Next, you can choose to include files in the cloud. Google is an example of a provider that offers cloud implementation for jQuery includes. The following code is an example.

Notice that the source is a Google domain but the file is still the same. You can get the URL from Google and choose a version. The version is in the file name. In this example, we included version 1.13.5 in our code.

If you decide to change versions, you must test your code. You can break your application if you upgrade your application's jQuery file without first testing it. You also need the latest version if you decide to use any newer features included in new jQuery versions.

Your First jQuery Application

You don't have to be an expert in jQuery to get started and write your own first program. Remember that jQuery works directly with your HTML DOM, so you first need a web page. The following code is a basic HTML page you can use to set up your project.

<!doctype html>

<html>

<head>

<title>First jQuery</title>

</head>

<body>

// jQuery goes here

</script>

</body>

</html>

Notice that we first have the script include in the head section, and then we have a placeholder for the jQuery script. The script tag within the HTML body is where you create your jQuery code.

Something you must include in all of your jQuery code is a "document.ready" function. This function signals that the jQuery code can execute once the document is fully loaded. If you don't include this function, your code might execute before the DOM loads and it won't be able to access elements and throw errors.

Take a look at the HTML now with the document.ready function.

<!doctype html>

<html>

<head>

<title>First jQuery</title>

</head>

<body>

               $( document ).ready(function() {

                               // Your code here.

});

</script>

</body>

</html>

Now that we have the ready function in place, we can add the code that must be executed. Let's create a button that will display a message when it's clicked.

<!doctype html>

<html>

<head>

<title>First jQuery</title>

</head>

<body>

               $( document ).ready(function() {

                               $( "#clickme" ).click(function( event ) {

                               alert( "You clicked!" );

});

});

</script>

</body>

</html>

Notice that we added an HTML button with an ID of "clickme" to the page. We can use this ID to trap the click event, override it and set our own functionality. In this example, we trap the click event and create our own function. Within the custom function, we have an alert window that shows the text "You clicked!" Each time you click the button, this event fires and the text is shown.

That's it! You've created your first HTML page that implements jQuery.

jQuery Chaining

One convenient part of the jQuery syntax is the way you can chain methods together without specifying the variable with each method call. Take a look at the following code.

$("#firstname").text("John Smith").css("color", "blue");

In the above code, notice that two methods are used. Instead of specifying the "firstname" element each time, you can chain together methods to perform a list of tasks. In this example, we first assign the firstname element with the text "John Smith," and then we set the color of the text to blue. This type of shorthand reduces the amount of code you need on your pages, and it makes it much easier to read for coders who must maintain your code.

When You Shouldn't Use jQuery

There aren't many reasons that you shouldn't use jQuery. Because jQuery was one of the first framework libraries available for JavaScript, it's had a lot of time to evolve and develop into a robust option for developers. Even with its ability to enhance numerous applications, it shouldn't always be the framework you use with every instance.

A common element on a web page is a carousel of moving images. You can use jQuery, but CSS3 and plain JavaScript are much more efficient and better for performance. For very client-side heavy applications, you should choose plain JavaScript, HTML5 or CSS3 if you have the option. This combination is much more efficient than using the jQuery libraries.

Another reason to avoid jQuery and opt for plain JavaScript is if you need complete control of your code and you don't want to rely on many dependencies. Dependencies can be risky, because you're forced to maintain them, keep them updated, and ensure your code works with each new version.

For most projects, you don't need to avoid jQuery. The framework powers many websites across the globe. Because of its JavaScript foundation, it's easy to learn. If you know JavaScript, it's much easier to pick up on the jQuery framework and understand the way it works.