Using jQuery To Manipulate Classes and IDs

This article demonstrates how to use jQuery to select and manipulate Classes and IDs. Included are jQuery methods, examples, and HTML snippets.

Developing an interactive yet straightforward website front end is not an easy job, and it takes effort, creativity, and coding skills to bring a website to the point where it is attractive to the user. Moreover, these are not the only things; a website must be easy-to-use to interact with the website without feeling any “negative” user experience.

While knowing HTML, CSS, and JavaScript is the essential first step, jQuery can make your job a little bit easier. Hence, in this tutorial, we will learn what jQuery is and how to manipulate Classes and IDs through jQuery.

jQuery To Manipulate Classes and IDs
jQuery To Manipulate Classes and IDs

What is jQuery?

jQuery is a small and “feature-rich” JavaScript framework that allows you to do more by writing less code. jQuery includes traversing the DOM, creating CSS animations, selecting elements, handling events, form data, and Ajax.

It is one of the most widely used and popular JavaScript libraries, released in 2006 by John Resign. The open-source library has cross-browser compatibility. It can have the same purpose that JavaScript has, that is, using it on the client-side development of the website.

In simple words, jQuery is a more efficient way with fewer lines of code to use JavaScript on your website. It has some built-in actions that allow you to do HTML and CSS manipulation, event-handling, adding animation, and using AJAX. jQuery allows you to manipulate HTML elements through selectors and perform several operations.

How To Install jQuery?

The first and foremost step of using jQuery is including the library in the HTML web page. Hence, add jQuery in your project by including it in the head with a link element:

  1. (External) Including jQuery through CDN (Google APIs, Stackpath.com)
  2. (Self-hosted) Including jQuery after downloading it from their official website
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

What are HTML classes?

HTML classes work to group similar HTML elements. They are a standard way to define related HTML elements using the same class name; later, you can access them simultaneously. As a result, different elements can have the same class, which elements can also include multiple classes in the class attribute. With the class attribute, it makes it easy to style or script multiple elements at once because you can add a “.” before the class name to call these classes.

Example:

<div class=“div-random”> 
  <p class=“random-class”>This is a paragraph element created with a ‘p’ tag having the class name random-class.</p> 
</div>

CSS code:

.random-class{
  color: #fff;
  font-size: 14px;
}

In this example, a paragraph has a class called “random-class”; which is for adding styles, like changing the color of the text to white and font size to 14 px.

What Are HTML IDs?

The HTML id attribute is a way to identify elements; they have to be unique for each element, unlike classes. To define them, you can use the ID global attribute of the HTML elements, and as the name specifies, an id cannot repeat. The purpose of IDs is when linking to an element, you can easily reference them in scripting or styling. You can access these IDS by adding a “#” before the id name. It is a valuable way to manipulate each unique element instead of accessing a group of elements.

Example:

<div>
  <h1 id="newHeading"> This is a heading with id newHeading. </h1> 
</div>

CSS code:

#newHeading {
  color: #ff3;
  background-color: blue;
}

In this example, a heading contains the id “#newHeading”, which can be accessed in the CSS file to add styling.

Elements can have both id and multiple classes. However, id has to be a unique name while classes can repeat in other elements.

How to use jQuery To Select IDs and Classes

With jQuery, you can select elements by IDs and classes by using $(selector) the standard jQuery selector. For example, using $(".class") to select an element by a class or $("#id") to select an element by an ID.

Now, the real deal is, how to select IDs and classes through jQuery for further manipulation? Well, worry not, we have got it all covered in this tutorial.

You have downloaded, or integrated jQuery and have created some elements with IDs and classes. Now, all you have to do is call these elements through jQuery. Fortunately, jQuery selectors allow you to select elements with specific ids or classes and later manipulate them. In addition to having jQuery selectors, it uses CSS selectors as well. The basic syntax goes as:

$(selector).action();

Example:

$("#secondPara").action //selects elements with id secondPara.
$(".style1") //selects elements with class name "style1".
$("p") //selects all "p" elements.

How to use jQuery To Manipulate IDs and Classes

With jQuery, you can manipulate the IDs and Classes of elements by using the $(selector) jQuery standard selector. After an element has been selected, you can apply jQuery methods to the selector. For example, $(selector).someAction(). A few methods that manipulate element classes and IDs are:

  • .addClass()
  • .toggleClass()
  • .hasClass()
  • .removeClass()
  • .removeAttr()
  • .attr()

There are multiple possibilities. You can select an ID or a class of an HTML element and add some actions to it. For instance, you can add specific CSS styles, hide them, animate it, and use it for further manipulation.

Here are some examples with code of using jQuery to manipulate IDs and Classes.

Example:

<div class=“first-div”>
  <h1 id=“newHeading”> Great Developers! </h1>
  <h2 id=“newHeading2” class=“hidden-cls”> I am new developer </h2>
  <p id=“firstPara” class=“style1”> Someday, you will be a great front end developer equipped with all the necessary skills. </p>
  <p id=“secondPara” class=“style2”> You are already a developer with great skills. </p>
  <button id=“#btn1” class=“btn btn-primary”> Click me! </button>
</div>

jQuery code:

$(document).ready(function(){
  $(“#btn1”).click(function(){ //perform a function on click of btn1
    $(“#secondPara”).hide(); //hides element with id secondPara
    $(“.style1”).css(“background-color”: “orange”); //adds style to all elements with class “style1”.
    $(“p”).addClass(“common-para”); //adds common-para class to all p elements.
    $(“#newHeading2”).toggleClass(“hidden-cls”); //toggles between adding and removing class “hidden-cls”.
  });
});

Moreover, you can do “chaining” of actions through jQuery. It means you can chain actions simply by appending the previous with the addition of a “.” Hence, you can run multiple commands by finding the desired element once.

Example:

$(document).ready(function(){
  $(“#btn1”).click(function(){ //calls a function of click of btn1
    $(“.style1”).css(“color”: “purple”).fadeToggle(“slow”); //selects the class style1, changes the color of text to purple, and fades in/out slowly. 
  });
});

In this example, on click of #btn1, a function triggers which manipulates the CSS of class “style1”. It changes the color of the text to purple and makes the text fade in and out slowly.

More About jQuery

jQuery is an easy way to integrate JavaScript into your web application. It does not replace JavaScript but allows you to use some built-in functionalities easily.

Other than that, you can use jQuery to animate elements, hide them, or make them slide. Some other actions you can perform with jQuery are:

  • .animate() 
  • .delay()
  • .fadeIn()
  • .fadeOut()
  • .hide()
  • .show()
  • .toggle()

Furthermore, you can also use jQuery events to trigger some functions on a specific event, like:

  • .dblclick()
  • .click()
  • .blur()
  • .on()
  • .mousedown()
  • .mouseleave()
  • .mouseover()
  • .ready()
  • .submit()
  • .scroll()
  • .select()

Recommened Articles

Other Articles