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 Tree Multiselect使用详解
May 02 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery zTree树插件的使用教程
Aug 16 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
浅谈js中的闭包
2015/03/16 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python中一行和多行import模块问题
2018/04/01 Python
django反向解析和正向解析的方式
2018/06/05 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
Java程序员面试90题
2013/10/19 面试题
优秀实习自我鉴定
2013/12/04 职场文书
应聘自荐信
2013/12/14 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
收银员岗位职责
2014/02/07 职场文书
七匹狼男装广告词
2014/03/21 职场文书
库房保管员岗位职责
2014/04/07 职场文书
买卖合同协议书范本
2014/10/18 职场文书
社区综治工作汇报
2014/10/27 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书