attr()方法在jQuery中习惯于组or返回所选元素的属性和值。
语法如下：
- 要返回属性的值：
$(selector).attr(attribute)
- 设置属性和值：
$(selector).attr(attribute, value)
- 要使用函数设置属性和值：
$(selector).attr(attribute, function(index, currentvalue))
- 设置多个属性和值：
$(selector).attr({attribute:value, attribute:value, ...})
参数
- 属性：此参数用于指定属性的名称
- 值：用于指定属性的值
- 函数(索引, 当前值)：它用于指定一个函数, 该函数返回要设置的属性值
- 指数：借助此参数接收到的元素的索引位置。
- 当前值：它用于接收所选元素的当前属性值。
示例1：
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method
</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
lsbin</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" >
</ h3 >
< img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132-120x300.png"
alt = ""
width = "120"
height = "300"
class = "alignnone size-medium wp-image-915678" />
< br >
< br >
< button >Click</ button >
< script >
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", "300");
});
});
</ script >
</ center >
</ body >
</ html >输出如下：
之前单击按钮：
单击按钮后：
示例2：
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
lsbin</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" ></ h3 >
< img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132-120x300.png"
alt = ""
width = "120"
height = "300"
class =
"alignnone size-medium wp-image-915678" />
< br >
< br >
< button >Click</ button >
< script >
$(document).ready(function() {
$("button").click(function() {
alert("Image width: " +
$("img").attr("width"));
});
});
</ script >
</ center >
</ body >
</ html >输出如下：
之前单击按钮：
单击按钮后：
示例3：
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
</ head >
< body >
< center >
< h1 style = "color:green;" >
lsbin</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" >
</ h3 >
< img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132.png"
alt = ""
width = "120"
height = "300"
class =
"alignnone size-medium wp-image-915678" />
< br >
< br >
< button >Click</ button >
< script >
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", function(n, v) {
return v - 50;
});
});
});
</ script >
</ center >
</ body >
</ html >输出如下：
之前单击按钮：
单击按钮后：
示例4：
<!DOCTYPE html>
< html >
< head >
< title >jQuery attr() Method
</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
</ head >
< body >
< center >
< h1 style =
"color:green;" >
lsbin</ h1 >
< h2 > jQuery attr() Method</ h2 >
< h3 style = "color:lightgreen;" ></ h3 >
< img src =
"https://media.lsbin.org/wp-content/uploads/20190221153831/1132.png"
alt = ""
width = "120"
height = "300"
class =
"alignnone size-medium wp-image-915678" />
< br >
< br >
< button >Click</ button >
< script >
$(document).ready(function() {
$("button").click(function() {
$("img").attr({
width: "150", height: "100"
});
});
});
</ script >
</ center >
</ body >
</ html >输出如下：
之前单击按钮：
单击按钮后：
