jquery implements style setting, appending, removing and switching methods _jquery

This article illustrates how jquery implements style setting, appending, removing, and switching. Share to everyone for your reference. The specific analysis is as follows:

With jquery, the style of an element can be quite easy to manipulate. Let's take a look at how to use jquery to get, set, append, delete, and some other actions for element styles.

Get and set style

Getting class and setting class can be done using the attr () method. For example, use the attr () method to get the Class,jquery code for the P element as follows:

var P_class = $ ("P"). attr ("class");
Gets the class of the P element

Use the attr () method to set the Class,jquery code for the P element as follows:

$ ("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 an 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:

. high{color:red;
another{font-style:italic; color:blue;}

Then add a button with the "Append Class class" to the page, and the event code for the button is as follows:

$ ("#btn_3"). Click (function () {
  $ ("#nm_p"). AddClass ("another");
  Append style
});

Finally, 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:

color:red;  /* Font Color SET Red * * 
font-style:italic; 
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."

removing styles from

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:

$ ("P"). Removeclass ("High");
Remove class with the value "high" in the P element

If you want to delete the P element's two classes, use the two Removeclass () method, the following code:

Copy Code code as follows:

$ ("P"). Removeclass ("High"). Removeclass ("another");

jquery provides a simpler way to do this. You can delete more than one class name as a space, with the following code:

Copy Code code as follows:

$ ("P"). Removeclass ("high another");

In addition, you can use an attribute 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:

$ ("P"). Removeclass ();
Remove all class for P element

Toggle Style

jquery has a method toggle (), the jquery code is as follows:

Togglebtn.toggle (function () {
  //Element display code ③
}, function () {
  //element hidden code ④
})

The toggle () 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.

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

When you repeatedly click the Toggle Style button, the value of the class of the P element is myClass between "MyClass" and "another".

Determine if a style is included

Hasclass () can be used to determine that a class is not contained in an element and, if so, returns True, otherwise it returns false. For example, you can use the following code to determine if the P element contains a "another" class:

Copy Code code as follows:

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

This 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:

$ ("P"). Is (". another");//is (".") +class);

I hope this article will help you with your jquery programming.