您的位置：首页 > Web前端 > JQuery

jQuery 里面的attr（）方法

2017-12-24 13:12 134 查看

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

说说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).
4000
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（）放在下一篇文章吧。

注意：上文中所写的为个人版权，如需转载请注明出，欢迎联系作者，一起讨论学习。

邮箱：823376567@qq.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航