Adding and Deleting Classes You're sure what this means.
I didn't understand what this part was when I first saw it, but when I saw it, I understood it.
That's not difficult. I just didn't know because I saw a book roughly .. ^^
Adding a class uses addClass().
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
<p class="base">hello world</p>
Looking at the example source above, the result is:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</html>
Source result above
hello world
You can add the below CSS to the base class of the above source.
.base_text{font-weight:bold;color:hotpink}
So the text of the base class will turn bold and hot pink?
var base = $('.base');
base.addClass('base_text');
The source above means adding base_text to the base class.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var base = $('.base');
base.addClass('base_text');
});
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</html>
View results
As shown above, css in base_text has been applied as well.
Now let's look at removeClass();
Now you know what removeClass() does? The opposite of addClass() is to remove a class.
It's so easy, so let's finish this one example. ^^
<div id="each1" class="common">hello world</div> <div id="each2" class="common">hello world</div>
.common{font-size:20px;color:hotpink}
If you write like this and see the source result above, each1, each2 has class common, so the font size is 20 pixels in color hot pink.
You get the same result as above. If you add the following jQuery source to the above result, removeClass ('common') is applied to IDeach2, so it is not a common class, so you can get away from the influence of font color hot pink and font size of 20 pixels.
var id2 = $('#each2');
id2.removeClass('common');
Result.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var id2 = $('#each2');
id2.removeClass('common');
});
</script>
<style>
.common{font-size:20px;color:hotpink}
</style>
</head>
<body>
<div id="each1" class="common">hello world</div>
<div id="each2" class="common">hello world</div>
</body>
</html>
So we learned about addClass() and addRemove().
In the next lesson, you will learn about attr to change the attributes of an element.
Thank you for visiting. If you have any inquiry or explanation of mistakes, please use the comments below.
ALL COMMENTS 0
Sort by
