jquery更改元素属性attr()方法操作示例
更新时间：2020年05月22日 11:16:36 作者：NO0b
这篇文章主要介绍了jquery更改元素属性attr()方法,结合实例形式简单分析了jquery更改元素属性attr()方法基本功能、语法及相关使用技巧,需要的朋友可以参考下
本文实例讲述了jquery更改元素属性attr()方法。分享给大家供大家参考，具体如下：
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写,
是js中setAttribute()和getAttribute()的简化
最基本常用的用法:
$("img").attr("src","img/a.jpg");
$("img").attr("width","100px");
attr()有四种用法,先列举表达式:
语法:
$(selector).attr(attribute) //返回被选元素的属性值。
$(selector).attr(attribute,value) //设置被选元素的属性和值。
$(selector).attr(attribute,function(index,oldvalue)) //用函数返回值设置被选元素的属性和值。
$(selector).attr({attribute:value, attribute:value ...}) //为被选一个以上的元素设置属性和值。
第一个$(selector).attr(attribute)是用来得到属性值的, 只有一个参数就是属性名
var srcImg = $('#img_1').attr("src");
第二个是最基本常用的方式:
$(selector).attr(attribute,value)
第一个参数是属性名, 第二个参数是想为该属性赋的值
$('#img_1').attr('src','img/1.jpg');
第三种是用函数的返回值给属性赋属性值, 该函数可接收并使用选择器的 index 值和当前属性值。
$(selector).attr(attribute,function(index,oldvalue))
这是W3School上一个点击按钮减少 img 50宽度的小实例
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-50;
});
});
第四种其实就是上边第二种方式的拓展, 可以一次修改很多属性的属性值
$(selector).attr({attribute:value, attribute:value ...})
$('#img_1').attr({"width":80px, "height":50px});
还有可以用removeAttr删除属性:
$("img_1").removeAttr ("style");
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery对于显示和隐藏等常用状态的判断方法,给出了两种较为常用的判断方法,非常具有实用价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了使用jQuery在移动页面上增加按钮和给按钮添加图标的方法,用到了针对移动开发的jQuery mobile库,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery中实现text()的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
下面小编就为大家带来一篇使用jQuery5分钟快速搞定双色表格的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
幻灯片自动播放图片是当前网站比较流行的一个展示方式，这里项目需要，我自己做了一个简单的，就不详细讲解了，代码很简单。直接看效果图和代码吧，希望对大家有所帮助2013-09-09
jquery isType() 类型判断代码，需要的朋友可以参考下。2011-02-02
这篇文章主要介绍了jQuery中prepend()方法用法,以实例形式较为详细的分析了prepend()方法的功能、定义及使用技巧,并对比分析了与text()方法的不同之处,需要的朋友可以参考下2014-12-12
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消) ，需要的朋友可以参考下。2012-01-01
这篇文章主要介绍了jQuery实现的简单拖拽功能,结合实例形式分析了jQuery鼠标事件响应及页面元素动态修改相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery模拟Marquee实现无缝滚动效果,结合完整实例形式分析了jQuery针对图片与文字的无缝滚动效果实现技巧,需要的朋友可以参考下2016-09-09
最新评论