jQuery里面的attr（）方法实例详解

17-12-25 来源：[db:作者]

收藏我要投稿

这个是上个星期在公司的时候遇到的问题，都不知道在学校学的啥一直没有弄清楚，趁着周末好好补补。

说说attr()这个方法吧。

这里写一段通用的代码：

<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
   <li title="苹果汁">苹果</li>
   <li title="橘子汁" value="123">橘子</li>
   <li title="菠萝汁">菠萝</li>
</ul>
<button>点击按钮看attr()方法的效果</button>
<h3></h3>
</body>

1、返回属性的值：

语法：attr(属性名) 
$(document).ready(function(){ 
$("button").click(function(){ 
var vatext= $("ul li:eq(1)").attr("value"); 
$("h3").text(vatext); 
}); 
}); 
这时h3标签获取了第二个li里面value的值：

这里写图片描述

2、设置属性和值：

语法：attr(属性,属性值) 
<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("ul li:eq(0)").attr("title","圣诞节要吃苹果"); 
var vatext=$("ul li:eq(0)").attr("title"); 
$("h3").text(vatext); 
}); 
}); 
</script> 
这是第一个li的title属性值变成了我们自己定义的内容：

这里写图片描述

3、使用函数设置属性和值：

语法：attr(属性,函数值) 
<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("ul li:eq(1)").attr("title",function(){ 
return this.value; 
}); 
var vatext=$("ul li:eq(1)").attr("title"); 
$("h3").text(vatext); 
}); 
}); 
</script>

这里写图片描述

4、设置多个属性和值：

语法：attr(属性:属性值,属性:属性值…) 
其实感觉这个和第二个差不多的性质，只是加了属性和属性值。 
<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("ul li:eq(1)").attr({title:"我想喝柠檬汁，不想喝橘子汁",value:"123长大了变成了321"}); 
var vatext1=$("ul li:eq(1)").attr("title"); 
var vatext2=$("ul li:eq(1)").attr("value"); 
$("p").text(vatext1); 
$("h3").text(vatext2); 
}); 
}); 
</script> 
原来p标签和H3标签的值都改变了：

这里写图片描述

温馨提示：

删除属性用removeAttr（）方法就可以了。

本来说讲attr（）方法和data（）方法的，attr（）讲完就那么多了，data（）放在下一篇文章吧。

点击复制链接与好友分享!回本站首页