In this crash course you will learn:
What Is jQuery?
Simply put, jQuery is a lightweight JavaScript library that makes JavaScript simple and easy to use. There are many things you can do with jQuery and a vast number of sites today are using it. With jQuery, you can manipulate the DOM such as adding, modifying or removing elements on your page.
Why Use jQuery?
The short answer is, jQuery helps us write with less code. Hence their slogan, write less, do more.
For instance, suppose you wanted to make a website where the user can change the background’s color by clicking on two buttons. You may have in your document something like this using vanilla JavaScript:
In jQuery things would look a lot more simplified and readable like so:
Importing jQuery
There are two ways you can go about importing jQuery. You can download the jQuery files and manually link it in your HTML document similar to how you would link a style sheet, or you can link to it directly via a CDN (Content Delivery Network). To link things manually download the jQuery file from http://jquery.com/download/ and choose rather or not you would like to link the compressed version or uncompressed version like so:
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
Linking things via a CDN is very similar. Find a CDN of your choosing, which in our case would be cdnjs, and grab the link to the file in the library you would want to use.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
TIP: Remember it is good practice to include all of your script references at the end of every page just before the body tag closes.
jQuery Syntax
Before we can begin using jQuery, there are a couple things you have to keep in mind about its syntax first. jQuery syntax, as quoted by W3Schools, is a syntax that
is tailor-made for selecting HTML elements and performing some action on the element(s).
jQuery syntax can be dissected into 3 main parts which are:
- Accessing / Defining jQuery
- The Selector
- The Action
A basic jQuery function might look like so:
$('p').hide();
To break things down a bit to match our 3 main parts from above:
- We first begin our function by declaring first we are going to use jQuery by putting a dollar sign ($) in front of the function before we begin our code.
- We then select our element within the parenthesis with quotes. Putting “p” simply means we are selecting all p tags within the document. You can select ids and classes just by declaring its symbol in front of the tag like you would in a style sheet. “#p” for all elements with the id and “.p” for all elements with the class.
- Lastly, we declare our action, which in this case is hide().
There are plenty of other actions within the jQuery library. All you have to do is know what you are looking for and search it up in the documentation for examples on how to use them.
TIP: You can access the jQuery documentation here: https://api.jquery.com/.
jQuery Basic Usages
There are many kinds of different things people use jQuery for. Some use them to edit HTML code, text, CSS, and plenty of other neat things that manipulate the DOM for live feedback. Here are a couple examples of commonly used actions.
Changing The Text
Altering The HTML
Adjusting The CSS
Hiding and Showing Elements
Appending and Prepending Elements
Conclusion
jQuery is a viral JavaScript library widely used today by many websites and supported by a lot of popular browsers. There are countless things you can do using jQuery and many different plugins you can integrate with it to perform specific tasks. All you have to do is know what you’re looking for.
