jQuery is an amazingly powerful library that enhances the functionality of JavaScript and makes it easier to use. The manipulation of HTML elements and CSS properties becomes much simpler with jQuery, as well as animations and Ajax calls. jQuery is used everywhere now and it is absolutely necessary for front end developers to know how to use it.
Before You Begin
Before you start diving into the magical world of jQuery, you need to have some knowledge of HTML, JavaScript, and some basic programming concepts like functions. Also note that since jQuery is a JavaScript library, the jQuery code you write will reside in your JavaScript and HTML files.
The Preparation
In order to use jQuery, you must have access to the jQuery library by referencing it in your HTML document with a <script> tag. I am not going to go into the specifics of doing this, but there are two ways of referencing the jQuery library. You can download a version of the library and reference its local file path or you could reference a CDN (Content Delivery Network) if you don’t want to download it. Using a CDN could boost the performance of your website by reducing the jQuery loading time on the client’s machine.
jQuery Function Breakdown
jQuery works by calling a jQuery function that selects something, turns it into a jQuery object, and performs some action on it. The concept is simple, but extremely powerful once you realize its full potential. The syntax can look a bit odd at first, but is easily distinguishable from the rest of your JavaScript code. It looks like this…
Let’s break down what is going on here. The first thing that we see is how to define a function in jQuery. The “$” denotes that this is a jQuery function just like “function” denotes a JavaScript function. Immediately after that, we select whatever we want to manipulate by passing it into the function. This could be a variable, an object, or an HTML element; pretty much anything. Finally, we call another function to manipulate the selector.
Simple enough, right? Here is an example that you will see and use very frequently…
Review
In this example we are passing in the Document Object Model (DOM) and turning it into a jQuery object! The “ready” function is used so that any jQuery actions we put inside the “ready” function will execute once the DOM has finished loading completely. This is important because if we didn’t wait for the DOM to load, things could execute improperly and give us unexpected results. So inside the ready function we can pass in other functions or write one on the fly. In this case, once the DOM is loaded and only when the DOM is loaded, the log statement is executed. From here we can manipulate the DOM and call even more functions inside the anonymous function.
Conclusion
From here, you can do some really advanced stuff with jQuery. Event handling and animations are only a function call away. Check out the jQuery API to learn how far you can go.
