Shulou(Shulou.com)06/01 Report--

This article mainly explains "jquery how to operate element attributes", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "jquery how to operate element attributes" bar!

Methods to operate element attributes are: 1, methods to manipulate class attributes, including addClass (), hasClass (), removeClass (), toggleClass (); 2, methods to operate specified attributes, including attr (), prop (), removeAttr ().

The operating environment of this tutorial: windows7 system, jquery1.12.4 version, Dell G3 computer.

JQuery attribute operation method

The method describes addClass () to add the specified class name (class attribute value) to the matching element. Attr () sets or returns the properties and values of the matching element. Prop () sets or returns the properties and values of the matching element. HasClass () checks whether the matching element has the specified class (class). RemoveAttr () removes the specified attribute from all matching elements. RemoveClass () removes all or specified classes (class) from all matching elements. ToggleClass () adds or removes a class (class) from the matching element.

The jQuery attr () and prop () methods return or set properties

The prop () method is similar to the attr () method in that it is used to get or set the HTML property of an element, but there is a fundamental difference between the two.

JQuery officially recommends that attributes with values of true and false, such as checked, selected and disabled, be operated using the prop () method, while other attributes are recommended to use the attr () method.

(function () {$('input [type = "radio"]') .change (function () {var bool = $(this) .attr ("checked"); if (bool) {$("p"). Text ("you chose:" + $(this). Val ()) }) Apple, banana, watermelon

In this example, we actually want to determine whether the checkbox is selected by $(this) .attr ("checked"), and if so, get the value value of the checkbox. But after running the code, I found that it had no effect at all! Why is that?

In fact, the checked, selected, and disabled attributes of a form element cannot be obtained using the attr () method, but must be obtained using the prop () method. Therefore, it works by replacing the attr () method with the prop () method.

In fact, the emergence of the prop () method is to make up for the deficiency of the attr () method in the operation of form properties. Remember: if a property cannot be obtained or set using the attr () method, it can be achieved by changing the prop () method.

The removeAttr () method deletes an attribute

In jQuery, we can use the removeAttr () method to delete an attribute of an element.

Syntax:

$() .removeAttr (property name)

JQuery class name operation

Class name operation, which refers to adding a class or removing a class to an element, thus controlling the style of the element as a whole.

In jQuery, there are three types of CSS class name operations.

Add class.

Delete the class.

Toggle class.

The addClass () method adds class

In jQuery, we can add a class to the element using the addClass () method.

Syntax:

$() .addClass (class name)

The removeClass () method deletes the class

In jQuery, we can use the removeClass () method to delete a class for the element.

Syntax:

$() .removeClass (class name)

The toggleClass () method toggles class

In jQuery, we can use the toggleClass () method to switch class names for elements. Toggle, in fact, means "switch". After that, we will come into contact with this word a lot, such as toggle (), slideToggle () and so on. Friends should pay attention to and compare it.

Syntax:

$() .toggleClass (class name)

The toggleClass () method is used to check whether the element has a class. If the class does not exist, add the class; for the element. If the class already exists, delete the class for the element.

Thank you for your reading, the above is the content of "how jquery manipulates element attributes". After the study of this article, I believe you have a deeper understanding of how jquery operates element attributes, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.