Syntax and Selectors of jQuery

Published on: January 7, 2018

Welcome to tutorial number 1 of the Easy jQuery series part of!

In this tutorial, we look at how selectors in jQuery work and practice its syntax. jQuery follows the same format as CSS selectors so it should be easy. Get a very quick intro into selectors and syntax here.

In JavaScript, we select HTML elements using something like document.getElementById("id"). jQuery makes it a little easier and all you need to do to select the same ID is do $("#id"). See how much shorter it is? The pound symbol comes in because it follows CSS selectors as well, making things much easier!

Here's a quick table to get you used to the different types of HTML elements that you can grab and apply a multitude of jQuery methods. 

Type Example
tag $("div")
class $(".nums")
id $("#name")
current element $(this)

We cover the first three types in this tutorial. We will come back to $(this) in the future! Watch the Easy JavaScript tutorial on The 'this' keyword in JS to learn more about what it is and how to use it. 

I hope you've enjoyed this tutorial! If you have any questions or concerns or comments, please scroll down to the comments section and let your mind speak! Hope you enjoy the tutorial series. 

To fork the fiddle and follow along:

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!