jQuery里面的attr（）方法实例详解
程序员文章站
2022-03-05 13:29:48
这个是上个星期在公司的时候遇到的问题，都不知道在学校学的啥一直没有弄清楚，趁着周末好好补补。
说说attr()这个方法吧。
这里写一段通用的代码：
这个是上个星期在公司的时候遇到的问题，都不知道在学校学的啥一直没有弄清楚，趁着周末好好补补。
说说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（）放在下一篇文章吧。