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把获取到的input值转换成json
May 15 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
python简单的函数定义和用法实例
2015/05/07 Python
Python函数参数操作详解
2018/08/03 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python实现倒计时小工具
2019/07/29 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
物业管理应届生求职信
2013/10/28 职场文书
加拿大留学自荐信
2014/01/28 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
电气工程自动化求职信
2014/03/14 职场文书
食品销售计划书
2014/04/26 职场文书
教师业务培训方案
2014/05/01 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2015年入党决心书
2015/02/05 职场文书
小学班主任教育随笔
2015/08/15 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技