jquery更改元素属性attr()方法操作示例


Posted in jQuery onMay 22, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
python利用sklearn包编写决策树源代码
2017/12/21 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
pycharm的python_stubs问题
2020/04/08 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
电子商务专业学生的学习自我评价
2013/10/27 职场文书
正规的求职信范文分享
2013/12/11 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年纪委工作总结
2015/05/13 职场文书