Each element has one or more attributes. The purpose of these attributes is to give additional information about the corresponding element or its content. For example: in the img element, src is the attribute of the element and is used to mark the address of the image.
There are three main DOM methods for operating attributes, getAttribute method, setAttribute method and removeAttribute method. Even so, there will still be many problems in actual operation, which will not be discussed here. In jQuery, using attr() and removeAttr() can solve everything, including compatibility issues
The attr() method is used in jQuery to obtain and set element attributes. attr is the abbreviation of attribute. , attr()
attr()has 4 expressions
attr (incoming attribute name): Get the attribute Value
attr(attribute name, attribute value): Set the value of the attribute
attr(attribute name, function value): Set the function value of the attribute
attr(attributes) : Set multiple attribute values for the specified element, that is: {Attribute name one: "Attribute value one", Attribute name two: "Attribute value two", … … }
removeAttr()Delete method
.removeAttr(attributeName): Remove an attribute (attribute) from each element in the matched element set
Advantages:
attr and removeAttr are both encapsulated by jQuery for attribute operations. Calling this method directly on a jQuery object makes it easy to operate attributes, and there is no need to specifically understand the problem of different attribute names in browsers
Questions to note:
There is a conceptual distinction in dom: Attribute and Property are both translated as "attributes", and the book "JS Advanced Programming" is translated as "features" ” and “attributes”. To understand simply, Attribute is the attribute that comes with the dom node.
For example: id, class, title, align, etc. commonly used in html:
<div id="phpcn" title="php中文网"></div>
And the Property is this DOM element as an object, and its additional Contents, such as tagName, nodeName, nodeType,, defaultChecked, and defaultSelected. Use the .prop() method to obtain or assign values.
To obtain Attribute, you need to use attr, and to obtain Property, you need to use prop.
Let’s look at an example to change the attribute value of the picture
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<img src="1.jpg" width="200" height="200" id="img">
<script type="text/javascript">
$("#img").attr('width','400');
</script>
</body>
</html>Note: First you need to have this picture 1 .jpg You can find a picture to try, and then run the results
How to use the attr() method to get the attribute value, please see the example below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
alert($("#ipt").attr('value'));
</script>
</body>
</html>You can see the pop-up The content displayed in the box is php Chinese website
Let’s look at how to delete the content of the element removeAttr()
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
$("#ipt").removeAttr("value");
</script>
</body>
</html>Note: Our text box originally has content. When the script language is executed, the content of the text will be deleted
Next Section