JavaScript

JavaScript tutorial 40: Manipulating elements using jQuery

In the previous JavaScript tutorial knowledge bit, we have studied about the purpose of the dollar sign, and we have learned that how we can select any elements using jQuery. In this knowledge bit, we will learn a little more about jQuery and we will learn to manipulate the properties of HTML elements. We will also discuss the .CSS method and its purposes.

We have seen in the previous lesson that how we can select any element. Now in this JavaScript tutorial, we are going to introduce one method that will help us make things visual and help us alter the style this method is called .CSS

JavaScript tutorial: Manipulating elements using jQuery

Manipulating Style

In jQuery, .CSS() method is used to manipulate the styling of HTML elements. We pass some properties and values to .CSS method to change the styling of HTML elements. So let take an example, here we are using the same HTML site which we have used in the previous lesson. Here is the source for our HTML code below:

Source Code

<!DOCTYPE html>
<html>
<head>
<title>Including jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Including jQuery to Project</h1>
<h2><a href="http://Geeksread.com">GeeksRead.com</a></h2>
<ul>
<li id="selectID">HTML</li>
<li class="byclass">CSS</li>
<li class="byclass">JavaScript <a href="https://geeksread.com">vist our site</a></li>
</ul>
</body>
</html>       

So let see that if we want to select and manipulate the properties of <h1> then we can simply by selecting <h1> tag and then use .css method with property and value. Here is the demonstration below:

$("h1").css("color", "green");       

You can notice that we have used $(“h1”) to select the <h1> tag and then used .css method to manipulate the properties. Here is the output below:

 

JavaScript tutorial: manipulating elements using jquery

 

You can notice that the color of heading turned to green from black.

Now we are going to create a JavaScript object with multiple properties like background color, border, text-align. Then we assign that object to the variable, and then we pass that variable to heading h1 to manipulate its properties. Here is the demonstration below:

var styling = {

outline: "5px solid red",

backgroundColor: "red",

border: "5px solid white",

textAlign: "center",

color: "white"

}       

This is a JavaScript object which consists of some CSS properties, now we want to apply that properties to HTML heading tag.

$("h1").css(styling);       

So you can notice that if we write the above code, then we will first select the heading h1 and apply the styling object. and our styling object contains CSS properties. Here is the output below:

 

JavaScript tutorial: Including jquery in your project

 

Hopefully, you can notice that jQuery is already proven to be pretty powerful and we can also manipulate HTML properties but jQuery save a lot of time and make our code cleaner.

So if we want to manipulate the properties of multiple elements, like we have three <li> in our site. Now if we want to change the color of all the <li> then we can do by selecting li by using the dollar sign and then can change the property using .CC method. Here is the demonstration below:

$("li").css("color","red")       

So when we run this code it will change the color of all the <li> elements.

 

 

We can also change the color of <li> without using jQuery, but it’s a bit tricky you can notice in the following example:

var listyling = document.querySelectorAll("li");
for(var i=0; i<listyling.length; i++){
listyling[i].style.color = "green";
}       

You can notice that we need to write bunches of lines there to change the properties without jQuery. Here is the output below:

 

 

So it’s a doable job but significantly, you will need to write more to get your job get done. You need to select all the li first using querySelector() and then you need a loop and change each <li> property individually.

Conclusion:

In this javascript tutorial, we have studied that how we can manipulate the properties of HTML element using jQuery. In this lesson, we have focused on selecting element using jQuery and then we have learned to manipulate the properties using .CSS method.

8 Comments

Most Popular

To Top