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实现图片放大点击切换
Jun 06 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
实例讲解python函数式编程
2014/06/09 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
名片管理系统python版
2018/01/11 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python socket实现简单聊天室
2018/04/01 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python如何发布程序的详细教程
2018/10/09 Python
django form和field具体方法和属性说明
2020/07/09 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
局域网定义和特性
2016/01/23 面试题
给校长的建议书400字
2014/05/15 职场文书
社会发展项目建议书
2014/08/25 职场文书
党性分析自查总结
2014/10/14 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python