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

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

WBOY

Release： 2016-05-16 15:05:19

Original

2562 people have browsed it

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>

Copy after login

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>

Copy after login

Results: Show Orange Juice

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

<script>

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

</script>

Copy after login

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>

Copy after login

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>

Copy after login

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

<script>

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

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

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

</script>

Copy after login

Result:

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

4.2 Get the second