Dec 01

jQuery Basics

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…

$(someSelector).doSomethingToTheSelector();

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…

Screen Shot 2015-12-01 at 9.33.33 AM

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.

About The Author

Kenny Sutherland is currently a student at Christopher Newport University working towards a degree in Information Systems. His work is primarily focused on the front-end and back-end development of OMS+. Kenny is showing true leadership skills and DataXstream is proud to extend an offer for full-time employment upon completion of his studies at CNU. Kenny brings a lot to the table, including skills in JavaScript, HTML, and several other programming languages. He recently took home first place at CNU’s Software Fair!

Leave a reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This site uses Akismet to reduce spam. Learn how your comment data is processed.