Home > Web Front-end > JS Tutorial > How to add attribute value to element in jquery

How to add attribute value to element in jquery

WBOY
Release: 2021-11-23 18:37:47
Original
12690 people have browsed it

Jquery method of adding attribute values ​​to elements: 1. Use the "$(element)" statement to obtain the specified element object; 2. Use the attr() method to add attributes and values ​​to the obtained element. The syntax is: "Element object.attr(attribute,value)".

How to add attribute value to element in jquery

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

How to add attribute values ​​to elements in jquery

In jQuery, you can use the attr() method to add attribute values ​​to elements, attr() Method sets or returns the attribute value of the selected element. Depending on the parameters of the method, the way it works is also different. Returns the attribute value of the selected element.

The syntax of this method is:

$(selector).attr(attribute,value)
Copy after login

attribute specifies the attribute whose value is to be obtained.

Let's take an example to see how to add attribute values ​​to elements. The example is as follows:

We add a div in html, which only has the class attribute. Then add a button to trigger the event of adding attributes. Then introduce jquery script into html. Then add a function in the script, the function of the button event.

The function is very simple. Just use jquery's attr method to set the attribute. The first parameter is the name of the attribute to be added, and the second parameter is the value of the attribute. Here we add an id attribute to the div.

<body>
    
    <div class="">
        <div class="jqyery">
            增加属性
        </div>
    </div>
    <div class="action">
        <input type="button" id="btn" value="设置属性" onlick="setAttr()" class="btn btn-primary" />
    </div>
    <scripr>
        function setAttr(){
            $(".jquery").attr("id","bd");
        }
    </scripr>
</body>
Copy after login

After running the page, from the page source code, this div now has no id attribute.

How to add attribute value to element in jquery

Click the button on the page to trigger the event and add the id attribute to the div.

After clicking, look at the source code again, and you can see that an id attribute has been successfully added to the div.

How to add attribute value to element in jquery

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to add attribute value to element in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template