JavaScript

jQuery Selectors | Explained

JavaScript is most commonly used for manipulating the HTML elements of a webpage by accessing them with the help of the DOM (document object model), it can even be used to display animations and other effects as a result of a certain action done by the user. To do all this, JavaScript first needs a reference to the HTML element that we want to manipulate.

Selecting the elements of the HTML webpage can take a few lines of code in the JavaScript but with jQuery, the code becomes concise and looks very readable. jQuery supports the selections of almost all the selectors defined in the CS3, as well as provides some built-in custom selectors as well.

Adding jQuery to our HTML page

To be able to jQuery in our project, we first need to import jQuery by putting a link to a jQuery file in the script tag. The most effective method of importing jQuery is to use a google CDN hosted jQuery, in the HTML file use the following lines in the script tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>

The Factory Function

The jQuery selector functions are often referred to as the factory function, it starts with a dollar sign “$” followed by round brackets or parenthesis “()”. This factory function is used to refer to an element of the webpage, and you can add an event by using a dot operator. For example:

$(document).ready(function(){
    // inside the body of the function
 }
);

jQuery Selectors

jQuery selectors or factory functions work on three major selectors namely: Tag ID, Tag Name, Tag Class.

  • Tag Name: This is used to select the name of the element from the dome, for example, if you want to select all the h1 tags.
  • Tag Class: This is used to choose an element with a certain class; for example, if you want to select an element with the class “myClass” you can use $(‘.myClass’)
  • Tag ID: This is used to select an element with a specific ID; for example, to choose an element with an id of “myID” you can use $(‘#myID’)

Selecting Elements by Name

To showcase the use of jQuery selectors we are going to first go over the selection of elements using the tag name. Suppose you want to select all the <p> tags on a web page and give them a background color of yellow. Let’s create some P tag in the HTML with the following lines:

<center>
  <div><p>A p tag</p></div>
  <div><p>Another p tag</p></div>
  <div><p>Yet another p tag</p></div>
</center>

You should see the following output on the webpage:

To manipulate the <p> tags use the following script code:

$(document).ready(function () {
  $("p").css("background", "yellow");
});

With the above lines, the output will look like this

We even have filter selectors; suppose we only want to select the last <p> tag then we can use the following script code:

$(document).ready(function () {
  $("p:last").css("background", "yellow");
});

This will give us the following output:

As you can see, we were able to select on a specific <p> tag using the filtered name selector.

Selecting Elements by ID

To demonstrate the ID selectors, we have the following lines in the HTML file:

<center>
  <div><p id="hello">A p tag with the ID hello</p></div>
  <div><p id>Another p tag</p></div>
  <div><p id>Yet another p tag</p></div>
</center>

As you can see, the first <p> tag has the ID “hello”, to manipulate this element using its ID, we can use the following script code:

As you can see in the image above, we were able to select an element using its id and manipulate its styling property using jQuery id selector.

Selecting an Element by Class

To select an element using the class, we use the dot before the name of the class in the factory function, to be able to demonstrate the use the jQuery class selector, let’s give one of the p tags some class. Our HTML code will look like this:

<center>
      <div><p id="hello">A p tag with the ID hello</p></div>
      <div><p >Another p tag</p></div>
      <div><p class="myClass">Yet another p tag but with some class</p></div>
</center>

To select the class “myClass” and give it a background of red, we use the following script code:

$(document).ready(function () {
  $(".myClass").css("background", "red");
});

With the above code, you will see the following output:

As you can see, we were able to manipulate the element with the class “myClass” by using jQuery class selectors.

Conclusion

JavaScript’s most famous library jQuery is highly useful and time saving when it comes to manipulating elements on a webpage, the only pre-req of using jQuery in a project is to add a link to the jQuery library by using a google CDN hosted jQuery. The jQuery consists of a function which is called the factory function which allows users to select elements of the webpage and manipulate their properties. The factory function ‘$(‘ ’)’ works on 3 basic selectors which are namely, ID selector, Name Selector and Class Selector.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.