jquery implements style settings, append, remove, and toggle methods

The examples in this article describe how jquery implements style settings, append, remove, and toggle. Share to everyone for your reference. The specific analysis is as follows:

With jquery, the element's style operation becomes quite simple. Let's take a look at how jquery can be used to get, set, append, delete, and other actions for element styles.

Get and set style

Both the Get class and the set class can be done using the attr () method. For example, using the attr () method to get the Class,jquery code for the P element is as follows:

1 var p_class = $ ("P"). attr ("class"); 2 // gets the class of the P element

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

1 $ ("P"). attr ("' Class", "High"); 2 // 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 to the original.

Append style

What is an append class? If the original class of P element is myClass, then after appending a class called High, the class attribute becomes "MyClass high", which is the overlay of myClass and high two styles. jquery provides a dedicated addclass () method to append styles. To make the example easier to understand, first add another set of styles to the style tag:

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

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

1 $ ("#btn_3"). Click (function() {2   $ ("#nm_p"). AddClass ("another"); 3   // Append Style 4 });

Finally, when you click the Append Class button, the P element style becomes italic, and the previous red font becomes blue. At this point the P element has two class values, namely "High" and "another". The following two rules are available in CSS.

1. If you add more than one class value to an element, it is equivalent to merging their styles.
2. If the same style attribute is set for different classes, the latter overrides the former.

In the example above, the equivalent of adding the following style to the P element:

1 color:red;  /* font Color Set red */ 2 font-3 color:blue;

In the above style, there are two "color" properties, and the subsequent "color" property overrides the previous "color" property, so the value of the final "color" property is "blue" instead of "red".

Remove Style

If a user clicks a button and deletes a value from class, it can be done using the Removeclass () method, which is the opposite of the AddClass () method, which removes all or the specified class from the matching element. For example, you can use the following jquery code to remove the class with the value "high" in the P element:

1 $ ("P"). Removeclass ("High"); 2 // Remove class with a value of "high" in the P element

If you want to remove the two classes of the P element, use the two Removeclass () method, which is the following code:

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

jquery offers a much simpler approach. You can delete multiple class names in a space, with the following code:

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

In addition, a feature of the Removeclass () method can be used to accomplish the same effect. When it does not take parameters, the value of class is removed, and the jquery code is as follows:

1 $ ("P"). Removeclass (); 2 // remove all class of P element

Toggle Style

There is a method toggle () in jquery, and the jquery code is as follows:

1 togglebtn.toggle (function() {2   // element Display code ③3 function () {4   // element Hide Code ④ 5 })

The function of 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 mainly controls repetitive switching on behavior.

In addition, jquery provides a Toggleclass () method to control the repetition of the switch on the style. If the class name exists, delete it and add it if the class name does not exist. For example, the P element is Toggleclass () method operation.

$ ("P"). Toggleclass ("another"); // repeat switch class name "another"

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

Determine if a style is included

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

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

This method is created to enhance the readability of the code. The IS () method is actually called inside jquery to accomplish this function. The method is equivalent to the following code:

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

It is hoped that this article will be helpful to everyone's jquery program design.

Reprinted from: Concise Modern Magic original address: http://www.jb51.net/article/67654.htm

jquery implements style settings, append, remove, and toggle methods