Introduction to how jquery dynamically adds and deletes class styles_jquery

Getting and setting styles Both getting and setting classes can be done using the attr() method. For example, use the attr() method to get the class of the p element. The JQuery code is as follows:

Copy code The code is as follows:

var p_class = $("p").attr("class"); //Get the class of the p element
[html]
Use the attr() method to set the class of the p element, The JQuery code is as follows:
[code]
1 $("p").attr("'class", "high"); //Set the class of the p element to "high"

In most cases, it replaces the original class with a new class instead of appending a new class to the original one.
Additional style What is additional class? If the original class of the p element is myClass, then after adding a class named high, the class attribute becomes "myClass high", which is the superposition of the two styles myClass and high. JQuery provides a special addClass() method to add styles. To make the example easier to understand, first add another set of styles in the style tag:

Copy the code The code is as follows:

1 .high{ color:red; }
2 .another{ font-style:italic; color:blue; }
and then add an "Add class" button to the web page. The event code of the button is as follows:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another"); // Add style
3 });

When you click the "Append class" button, the p element style will change to italic, and the previous red font will also change to blue. At this time, the p element has two class values ​​at the same time, namely "high" and "another". There are the following two provisions in CSS.
1. If multiple class values ​​are added to an element, it is equivalent to merging their styles. 2. If different classes set the same style attribute, the latter overrides the former. In the above example, it is equivalent to adding the following style to the p element:

Copy the code The code is as follows:

1 color : red; /* Font color setting red*/
2 font-style:italic;
3 color:blue;

Among the above styles, there are two A "color" attribute, and the subsequent "color" attribute will overwrite the previous "color" attribute, so the final "color" attribute value is "blue", not "red".
Remove style If the user wants to delete a certain value of the class when clicking a button, it can be done using the removeClass() method, which is the opposite of the addClass() method. Its function is to delete it from the matching element. All or specified classes. For example, you can use the following JQuery code to delete the class with the value "high" in the p element:

Copy the code The code is as follows:

1 $("p").removeClass("high"); //Remove the class with the value "high" in the p element
If you want to remove both classes of the p element To delete, you need to use the removeClass() method twice. The code is as follows:
1 $("p").removeClass("high").removeClass("another");
Query provides a simpler method . You can delete multiple class names with spaces. The code is as follows:
1 $("p").removeClass("high another");
In addition, you can also use a feature of the removeClass() method to complete it. Same effect. When it takes no parameters, all class values ​​will be deleted. The JQuery code is as follows:
1 $("p").removeClass(); //Remove all classes of the p element
Change style JQuery There is a method toggle(), the JQuery code is as follows:
1 toggleBtn.toggle(function(){
2 //Element display code ③
3 }, function(){
4 // Element hiding code ④
5 })

The function of the oggle() method here is to alternately execute the two functions of code ③ and code ④. If the element is originally displayed, hide it: If the element was originally hidden, show it. At this time, the toggle() method mainly controls repeated switching of behaviors.
In addition, JQuery also provides a toggleClass() method to control repeated switching of styles. Removes the class name if it exists, adds it if the class name does not exist. For example, perform the toggleClass() method on the p element.

Copy code The code is as follows:

1 $("p").toggleClass("another "); // Repeatedly switch the class name "another"

When you keep clicking the "Switch Style" button, the value of the class of the p element will repeatedly switch between "myClass" and "myClass another".
Determining whether a certain style is contained hasClass() can be used to determine whether an element contains a certain class. If so, it returns true, otherwise it returns false. For example, you can use the following code to determine whether the p element contains the class "another":

Copy the code The code is as follows:

1 $("p").hasClass("another");

This method is generated to enhance the readability of the code. Inside JQuery, the is() method is actually called to complete this function. This method is equivalent to the following code:

Copy code The code is as follows:

view sourceprint? 1 $("p").is(".another"); //is("." class);