How jquery dynamically add and remove class style methods introduction _jquery

The attr () method can be used to get the class and set class for the set style. For example, use the attr () method to get the Class,jquery code for the P element as follows:

Copy Code code as follows:

var P_class = $ ("P"). attr ("class"); Gets the class of the P element
[HTML]
Use the attr () method to set the Class,jquery code for the P element as follows:
[Code]
1 $ ("P"). attr ("Class", "high"); Set the P element's class to "high"

In most cases, it replaces the original class with the new class, rather than appending the new class on the original basis.
Append style What is the Append class? If P element original class is MyClass, then append a class named High, the class attribute becomes "MyClass high", namely myClass and high two kinds of style superposition. jquery provides a special addclass () method to append styles. To make the example easier to understand, first add another set of styles to the style label:

Copy Code code as follows:

1. high{color:red;
2. another{font-style:italic; color:blue;
After you add a button with the "Append Class class" to the page, the event code for the button is as follows:
1 $ ("#btn_3"). Click (function () {
2 $ ("#nm_p"). AddClass ("another"); Append style
3});

When you click the Append Class Class button, the P element style changes to italic, and the previous red font changes to blue. At this point P element also has two class values, namely "High" and "another". The following two rules are in CSS.
1. If you add more than one class value to an element, it is equivalent to merging their styles. 2. If a different class sets the same style attribute, the latter overrides the former. In the example above, the equivalent of adding the following style to the P element:

Copy Code code as follows:

1 color:red; /* Font Color SET Red * *
2 font-style:italic;
3 color:blue;

In the above style, there are two "color" properties, and the following "color" property overrides the previous "color" property, so the value of the final "color" property is "blue" instead of "red."
Remove a style If a user clicks a button to delete a value of class, it can be done using the Removeclass () method opposite the AddClass () method, which removes all or the specified class from the matching element. For example, you can use the jquery code below to remove class with the value "high" in the P element:

Copy Code code as follows:

1 $ ("P"). Removeclass ("High"); Remove class with the value "high" in the P element
To delete the two classes of the P element, use the two Removeclass () method, which is as follows:
1 $ ("P"). Removeclass ("High"). Removeclass ("another");
Query provides a simpler way to do this. You can delete more than one class name as a space, with the following code:
1 $ ("P"). Removeclass ("high another");
, you can also use one of the features of the Removeclass () method to accomplish the same effect. When it takes no parameters, the value of class is removed, and the jquery code is as follows:
1 $ ("P"). Removeclass (); Remove all class for P element
Swap style jquery has a method toggle (), the jquery code is as follows:
1 Togglebtn.toggle (function () {
2//Element display code ③
3}, function () {
4//Element hidden code ④
5})

The Oggle () method here is to alternately execute code ③ and code ④ two functions and hide it if the element was originally displayed: If the element was originally hidden, it is displayed. At this point, the toggle () method is primarily to control repetitive transitions in behavior.
In addition, jquery provides a Toggleclass () method to control repetitive transitions on styles. If the class name exists, delete it, and add it if the class name does not exist. For example, a Toggleclass () method operation is performed on the P element.

Copy Code code as follows:

1 $ ("P"). Toggleclass ("another"); Repeat Toggle class name "another"

When you click the Toggle Style button, the value of the P element's class repeats between "MyClass" and "MyClass another".
To determine if a style hasclass () can be used to determine that there is no class in the element and, if so, return true, or false. For example, you can use the following code to determine if the P element contains a "another" class:

Copy Code code as follows:

1 $ ("P"). Hasclass ("another");

A method is created to enhance the readability of the code. Within jquery, the is () method is actually invoked to accomplish this function. This method is equivalent to the following code:

Copy Code code as follows:

View Sourceprint? 1 $ ("P"). Is (". another");//is ("." +class);