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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现图片切换效果
Oct 19 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设置图片文件上传大小的具体实现方法
2013/10/11 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
js 函数调用模式小结
2011/12/26 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
谈谈Python中的while循环语句
2019/03/10 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
房屋授权委托书范本
2014/10/07 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python中的3种定义类方法
2021/11/27 Python