jQuery .attr()和.removeAttr()方法操作元素属性示例


Posted in Javascript onJuly 16, 2013

今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性。大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值。那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现:

1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr());
2 .removeAttr():jQuery中的.removeAttr()方法主要用来删除一个元素的一个(或多个)属性(详情参考.removeAttr())。

下面先来简单看一下.attr()和.removeAttr()两种方法的语法格式:
.attr()方法
.attr()方法有两种功能,第一种是读取元素的属性值,第二个是修改元素的属性值

读取属性的语法
.attr(attributeName );//attributeName 为需要获取的元素的属性名
上面返回的是字符串“string”,值得注意的是.attr()方法只获取第一个匹配元素的属性值,如果你需要每个单独的元素的属性值,需要依靠jQuery的.each()或者.map()方法来实现。

为元素设轩属性值的语法
.attr(attributeName, value);//其中attributeName为元素需要设置的属性名,value是对应的元素值
上面返回的是一个对象,主要用来为指定元素设置一个或多个属性。

.removeAttr()方法
.removeAttr(attributeName);//其中attributeName 是要移除的属性名

.removeAttr()方法使用原生的javaScript中的removeAttribute()函数,但是它的优点是能够直接被jQuery对象访问调用。
上面我们一起简单的了解了一下.attr()和.removeAttr()方法的语法,下面我们一起来看看其具体的应用,首先我们来看一个简单的html Demo:

这种方法用来制作图片翻转是很方便的,如:
html:

<img src="images/a.jpg" alt="header" width="80" height="80" class="img"/>

js:
$("document").ready(function(){ 
$(".img").hover(function(){ 
$(this).attr({ 
"src":"images/b.jpg", 
"alt":"change the page" 
}) 
},function(){ 
$(this).attr({ 
"src":"images/a.jpg", 
"alt":"header" 
}); 
}); 
});
Javascript 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
详解js类型判断
May 22 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
浅谈Vue的响应式原理
May 30 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
js判断屏幕分辨率的代码
Jul 16 #Javascript
js 调用父窗口的具体实现代码
Jul 15 #Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 #Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 #Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 #Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 #Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 #Javascript
You might like
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
js date 格式化
2017/02/15 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
django表单的Widgets使用详解
2019/07/22 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
8种常用的Python工具
2020/08/05 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
应用英语专业自荐信
2014/01/26 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
项目经理岗位职责
2015/01/31 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
个人业务学习心得体会
2016/01/25 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书