In this crash course you will learn:
What Is jQuery?
Why Use jQuery?
The short answer is, jQuery helps us write with less code. Hence their slogan, write less, do more.
In jQuery things would look a lot more simplified and readable like so:
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:
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.
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.
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:
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.
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