Home >Web Front-end >JS Tutorial >Jquery attr() method detailed explanation of attribute assignment and attribute acquisition_jquery

Jquery attr() method detailed explanation of attribute assignment and attribute acquisition_jquery

WBOYOriginal: 2016-05-16 15:05:192611browse

The attr() method is used in jquery to get and set element attributes. attr is the abbreviation of attribute. Attr() is often used in jQuery DOM operations. attr() has 4 expressions.

1. attr(attribute name) //Get the value of the attribute (get the attribute value of the first matching element. This method can easily get the value of an attribute from the first matching element. If the element does not have a corresponding attribute, returns undefined )

2. attr(attribute name, attribute value) //Set the value of the attribute (Set an attribute value for all matching elements.)

3. attr(attribute name, function value) //Set the function value of the attribute (Set a calculated attribute value for all matching elements. Do not provide a value, but provide a function, and the value calculated by this function is attribute value. )

4. attr(properties) //Set multiple attribute values for the specified element, namely: {Attribute name one: "Attribute value one", Attribute name two: "Attribute value two", ... ...}. (This is the best way to set many attributes in batches across all matching elements. Note that if you want to set the class attribute of an object, you must use 'className' as the attribute name. Or you can directly use 'class' or ' id'. )

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery中attr()方法</title>

<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>

<style>

p{color:red}

li{color:blue;}

.lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;}

</style>

</head>

<body>

<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>

<ul>

<li title="苹果汁">苹果</li>

<li title="橘子汁" alt="123">橘子</li>

<li title="菠萝汁">菠萝</li>

</ul>

<script>

...

</script>

</body>

<html>

1.attr(name)//Get the value of the attribute

1.1 Use attr(name) to get the title value:

<script>

alert($("ul li:eq(1)").attr("title"));

</script>

Results: Show Orange Juice

1.2 Use attr(name) to get the alt value:

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

Result:

Showing 123

2. attr(name,value) //Set the value of the attribute

2.1 Use attr(name,value) to modify the title value to: Don’t eat oranges

<script>

$("ul li:eq(1)").attr("title","不吃橘子");

alert($("ul li:eq(1)").attr("title"));

</script>

Result:

Show not to eat oranges

3. attr(name,fn) //Set the function value of the attribute

3.1 Set the value of the alt attribute to the value of the title attribute.

<script>

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>

Result:

Showing 123

4.attr(properties) //Set an object in the form of "name/value" as the attributes of all matching elements

4.1 Get the second 25edfb22a4f469ecb59f1190150159c6 in ff6d136ddc5fdfeffaf53ff6ee95f185 and set the title and alt attributes.

<script>

$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

Result:

Showing 2, don’t drink orange juice, not 123

4.2 Get the second 25edfb22a4f469ecb59f1190150159c6 setting class in ff6d136ddc5fdfeffaf53ff6ee95f185.

<script>

$("ul li:eq(1)").attr({className:"lili"});

</script>

Result:

997e5fd6e999f170f86521020088b6a6Applebed06894275b65c1ab86501b08a632eb

e3ecc1c88decfb39a676b02065d345d5Orangebed06894275b65c1ab86501b08a632eb

abef1be40c1bfd754abc1858cbe85f94Pineapplebed06894275b65c1ab86501b08a632eb

4.3 Get the setting id of the second 25edfb22a4f469ecb59f1190150159c6 in ff6d136ddc5fdfeffaf53ff6ee95f185.

<script>

$("ul li:eq(1)").attr({id:"lili"});

</script>

Result:

997e5fd6e999f170f86521020088b6a6Applebed06894275b65c1ab86501b08a632eb

e3ecc1c88decfb39a676b02065d345d5Orangebed06894275b65c1ab86501b08a632eb

abef1be40c1bfd754abc1858cbe85f94Pineapplebed06894275b65c1ab86501b08a632eb

4.4 Get the second 25edfb22a4f469ecb59f1190150159c6 in ff6d136ddc5fdfeffaf53ff6ee95f185 and set the style.

<script>

$("ul li:eq(1)").attr({style:"color:red"});

</script>

Result:

997e5fd6e999f170f86521020088b6a6Applebed06894275b65c1ab86501b08a632eb

a0b96ea48419e2bd58e6c19365092fb4Orangebed06894275b65c1ab86501b08a632eb

abef1be40c1bfd754abc1858cbe85f94Pineapplebed06894275b65c1ab86501b08a632eb

It is wrong to add alt in li. It can only be used in img, area and input elements (including applet elements). For input elements, the alt attribute is intended to replace the submit button image. In order to explain the attr() method in detail here, there is no suitable attribute, so alt is used as an example. It is only for learning and reference of the attr() method usage.

Here is the difference between alt and tite.

alt: This is the text used to describe the graphics. When the picture cannot be displayed, these texts will be displayed instead of the picture. The text will also be displayed when the mouse is moved over the image.

title: It is the text that will be displayed after the mouse is placed on it.

So how to delete attributes?

The keyword to delete attributes in jquery is: removeAttr. Note that A is capitalized. See how to use it:

The same html code in usage one, I want to delete the title attribute of li, then this is it:

<script>

$("ul li:eq(1)").removeAttr("title");

</script>

It’s that simple, attr is actually a simplified implementation of getAttribute in native js, and removeAttr is the abbreviation of removeAttribute.

So is there an attribute similar to attr()?

val() in jquery is similar,

$(this).val(); Gets the value of an element node, equivalent to $(this).attr("value");

$(this).val(value); Set the value of an element node, equivalent to $(this).attr("value",value);

The above detailed explanation of attribute assignment and attribute acquisition of the Jquery attr() method is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement：

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

Previous article：Window.Open opens the form and if nested code_javascript skillsNext article：Window.Open opens the form and if nested code_javascript skills

See more

Jquery attr() method detailed explanation of attribute assignment and attribute acquisition_jquery

Related articles