jquery attributes and styles (1)

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

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

jquery attributes and styles (1)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]