一、attr的用法
1:作用:为html标签添加属性、设置html的属性值或获取对应标签的属性值
(1)设置标签的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("div.chapter p a").attr({
href : 'http://www.baidu.com', //设置超练级的跳转地址
title : '百度' //设置超链接的标题
});
});
</script>
</head>
<body>
<div class="chapter">
<p>
<a>百度</a>
</p>
</div>
</body>
</html>
运行结果:firebug
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
var href = $("div.chapter p a").attr('href');
console.log(href);
});
</script>
</head>
<body>
<div class="chapter">
<p>
<a href="http://www.baidu.com">百度</a>
</p>
</div>
</body>
</html>
结果:用firebug控制台得出结果:http://www.baidu.com
(3)值回调
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("div.chapter p a").attr({
title:function(index){
return 'baidu'+index;
}
});
});
</script>
</head>
<body>
<div class="chapter">
<p>
<a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com">百度</a>
</p>
</div>
</body>
</html>
结果:firebug视图