首先,我们需要先说一下。
属性分为两类:
一类属性的取值为布尔类型,如 checked、selected 和 disabled 等。
另一类属性的取值为数值或字符串,如value、name、id、class等。
jQuery 官方建议:取值为布尔类型的属性,建议使用 prop() 方法来操作,而其他的属性都建议使用 attr() 方法来操作。
下面我们先来讲一下attr()方法的使用
一、添加单个属性
- $('#span2').attr('value','span2name');
复制代码
二、添加多个属性
- $('#span3').attr({'value':'span3name','sex':'男'});
复制代码
三、链式操作
- $('#span4').attr({'value':'span4name','sex':'男','age':20}).removeAttr('age');
复制代码 下面请看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加属性 attr</title>
<script src="./jquery.js"></script>
</head>
<body>
<div id="box">
<span id="span1" name="spanname" value="spanvalue" class="spanclass" sx="spansx">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
<span id="span4">这是span4</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
console.log($('#span2'));
$('#span2').attr('value','span2name');
$('#span3').attr({'value':'span3name','sex':'男'});
$('#span4').attr({'value':'span4name','sex':'男','age':20}).removeAttr('age');
</script>
</html>
以上,我们分别用attr方法添加了单个属性、多个属性和链式操作(即在一条语句中,可以同时添加和删除属性)。
执行结果如下:
以上就是关于attr方法添加属性的操作方法,请大家动手练习一下。
|