What does query class operation mean?

Time:2021-7-30

Class operation is to operate the element style by operating the class name of the element. When the element style is complex, if it is implemented through CSS () method, it needs to write a long code in CSS, which is neither beautiful nor convenient. By writing a class name, it will be very convenient to add or remove the class name. The following code demonstrates the addition, deletion and switching of classes.

1. Preparation

First prepare an HTML web page, and then operate the web page with jQuery code. The HTML code is as follows.

  <style>
  .current { background-color: red; }
  </style>
< div > add class name < / div >
< div class = “current” > delete class name < / div >
< div class = “current” > switch class name < / div >
In the above code, line 2 defines the style of the current class as the background color is red, and lines 5 and 6 define two div elements with the class name current.

2. Addclass() add class

The addclass () method adds one or more class names to the selected element. The basic syntax is as follows.

$(selector).addClass(className)

In the above code, classname represents the name of the class to be added. The example code is as follows

<script>
  $(“div”).click(function() {
  $(this).addClass(“current”);
  });
  </script>
After the above code is executed, click the “add class name” button in the page to add the current class name on the div element, and the background color is changed to red.

If you add multiple classes, separate the class names with spaces, as shown in the examplegameThe code is as follows.

$(this).addClass(“current current1 …”);

Removeclass() removes the class
The removeclass () method removes one or more classes from the selected element. The basic syntax is as follows.

$(selector).removeClass(className)
In the above code, the classname parameter can be passed in one or more class names separated by spaces. If the parameter is omitted, it means that all class names are removed. The following is a code demonstration.

<script>
$(“div”).click(function() {
$(this).removeClass(“current”);
});
</script>
After the above code page is executed at www.cungun.com, click the “delete class name” button in the page, the current class name on the div element will be removed and the background color will disappear.

Toggleclass() switch class
The toggleclass () method is used to add or remove a class for the element. If the class does not exist, it will be added. If the class exists, it will be removed. The basic syntax is as follows.

  $(selector).toggleClass(className, switch)
In the above code, classname represents one or more class names added or removed, and multiple class names are separated by spaces; The switch parameter is used to specify that only classes are deleted or added. Set to true to add, and set to false to remove.

The following code demonstrates the use of toggleclass ().

<script>
  $(“div”).click(function() {
  $(this).toggleClass(“current”);
  });
  </script>
After the above code is executed, click the “switch class name” button on the page. When the current class name exists on the div element, it will be removed, otherwise it will be added. The switching effect of font background color can be realized.