Before You Begin
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
Simple enough, right? Here is an example that you will see and use very frequently…
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.
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.