You can use the attr () method to obtain and set styles and set classes. For example, you can use the attr () method to obtain the class of the p element and set the style to obtain the class and set the class. For example, if you use the attr () method to obtain the class of the p element, the JQuery code is as follows:
The Code is as follows:
Var p_class = $ ("p"). attr ("class"); // obtain 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 the new class, rather than appending the new class on the basis of the original.
What is an append class? If the original class of the p element is myClass, after a class named high is appended, the class attribute becomes "myClass high", that is, the superposition of the myClass and high styles. JQuery provides a special addClass () method to append styles. To make the example easier to understand, add another style group to the style label:
The Code is as follows:
1. high {color: red ;}
2. another {font-style: italic; color: blue ;}
Then add a "APPEND class" button to the webpage. The event code of the button is as follows:
1 $ ("# btn_3"). click (function (){
2 $ ("# nm_p"). addClass ("another"); // append a style
3 });
Then, when you click the append class button, the p element style changes to italic, and the previous red font changes to blue. In this case, the p element has two class values, namely, "high" and "another ". There are two rules in CSS.
1. if multiple class values are added to an element, it is equivalent to merging their styles. 2. If different classes have the same style attribute set, the latter overwrites the former. In the preceding example, the following style is added to the p element:
The Code is as follows:
1 color: red;/* set the font color to red */
2 font-style: italic;
3 color: blue;
There are two "color" attributes in the above style, and the "color" attribute will overwrite the previous "color" attribute, therefore, the final value of the "color" attribute is "blue" instead of "red ".
Remove style if you want to delete a value of class when you click a button, you can use the removeClass () method opposite to addClass, it is used to delete all or specified classes from matching elements. For example, you can use the following JQuery code to delete the class with the value of "high" in the p element:
The Code is as follows:
1 $ ("p"). removeClass ("high"); // remove the class whose value is "high" in the p element
If you want to delete both classes of the p element, 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 by spaces. The Code is as follows:
1 $ ("p"). removeClass ("high another ");
You can also use a feature of the removeClass () method to achieve the same effect. When it does not contain parameters, all class values will be deleted. The JQuery code is as follows:
1 $ ("p"). removeClass (); // remove all classes of the p element
There is a method toggle () in JQuery for style change. The JQuery code is as follows:
1 toggleBtn. toggle (function (){
2 // element display code ③
3}, function (){
4 // element hiding code ④
5 })
The oggle () method is used to execute functions ③ and ④ alternately. If an element is displayed, hide it. If the element is hidden, it is displayed. In this case, the toggle () method controls repeated switching of behavior.
In addition, JQuery also provides a toggleClass () method to control repeated switching on styles. If the class name exists, delete it. If the class name does not exist, add it. For example, the toggleClass () method is used to operate the p element.
The Code is as follows:
1 $ ("p"). toggleClass ("another"); // repeated switching class name "another"
When you click the "Switch style" button, the class value of the p element will be repeated between "myClass" and "myClass another.
Whether a style hasClass () exists can be used to determine whether the element contains a class. If any, true is returned. Otherwise, false is returned. For example, you can use the following code to determine whether the p element contains a class with "another:
The Code is as follows:
1 $ ("p"). hasClass ("another ");
To enhance the readability of the Code. In JQuery, the is () method is actually called to complete this function. This method is equivalent to the following code:
The Code is as follows:
View sourceprint? 1 $ ("p"). is (". another"); // is ("." + class );
