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 Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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
php 代码优化之经典示例
2011/03/24 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
python网络爬虫采集联想词示例
2014/02/11 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python读取几个G的csv文件方法
2019/01/07 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
机电专业毕业生推荐信
2013/11/10 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
自我鉴定注意事项
2014/01/19 职场文书
教育技术职业规划范文
2014/03/04 职场文书
医院保洁服务方案
2014/06/11 职场文书
体育节口号
2014/06/19 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
2015年共青团工作总结
2015/05/15 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
学校食堂管理制度
2015/08/04 职场文书