In jQuery, The. is () and. hasClass () judgment class examples

Righteousness and usage

The Hasclass () method checks whether the selected element contains the specified class.

Grammar

$ (selector). Hasclass (Class)

Parameter description

Class required. Specifies the class that needs to be found in the specified element.

. Hasclass ("ClassName"): For the. Hasclass () method, you can refer to jquery api--hasclass ()
. is (". ClassName"): For the. is () method, you can refer to the jquery Api--is ()

Now let's take a quick look at their usage.

I. Hasclass ()

The Hasclass () method is used to check whether the selected element contains the specified class name and its syntax:

$ (selector). Hasclass ("ClassName");//Where class is the required value, specifies the name of the class that needs to be looked up in the specified element.

Hasclass () can also write multiple classes at the same time but they were previously separated by spaces, as follows:

$ (selector). Hasclass ("className1 className2");

Ii.. Is ()

The IS () method is also used to check whether the selected element contains the specified class name, and its use is:

$ (selector). Is (". ClassName");

The same is () can also be written with multiple class names, such as:

$ (selector). Is (". Classname,.classname");

For more detailed usage, you can view this: jquery Api--hasclass (), jquery Api--is (). Now let's take a look at an example:

If the div element has a class called "bgred", then we add the background color to red, and if we don't have the class name, I set the background color to blue and we'll look at the code together:

HTML Code:

<div class= "Bgred" > has class name "Bgred" </div>
<div> No class name "Bgred" </div>
<div> No class name "Bgred" </div>
<div class= "Bgred" > has class name "Bgred" </div>
<p>
<button id= "Istest" >is ('. bgred ') </button>
<button id= "Hasclasstest" >hasclass ('. bgred ') </button>
<button id= "Reset" >reset</button>
</p>

JQuery Code:

. is ()
$ ("#isTest"). Click (function () {
var $divTest = $ (". Demotest div");
$divTest. each (function () {
if ($ (this). Is (". bgred")) {
$ (this). CSS ("Background-color", "Red");
} else {
$ (this). CSS ("Background-color", "Blue");
}
});
});

. Hasclass ()
$ ("#hasClassTest"). Click (function () {
var $divTest = $ (". Demotest div");
$divTest. each (function () {
if ($ (this). Hasclass ("bgred")) {
$ (this). CSS ("Background-color", "Red");
} else {
$ (this). CSS ("Background-color", "Blue");
}
});
});

Reset
$ ("#reset"). Click (function () {
Location.reload ();
});

Effect:

The last two methods have the same effect. But from a performance standpoint, hasclass () is faster than is (), let's do a test:

function Usingis () {
for (var i=0; i<10000;i++) {
$ ("Div#testdiv"). Is (". Test");
}
}
function Usinghasclass () {
for (var i=0; i<10000;i++) {
$ ("Div#testdiv"). Hasclass ("test");
}
}

Usingis ();
Usinghasclass ();

The result: Usingis () is 3191.663ms, while Usinghasclass () is 2362.523ms. You can also change the test conditions here to test.

Finally, in summary: although. is () and. Hasclass () Both methods can be used to check whether an element has certain class names, but in performance,. Hasclass () method is stronger, so we can use it in practical application. Hasclass () method to check whether an element has some specific class name. In other words:. is () and. Hasclass (), but. Hasclass () performance is stronger than. is ().