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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JS函数式编程实现XDM一
Jun 16 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之autoload运行机制实例分析
2014/08/28 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP7 新增功能
2021/03/09 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
js自定义回调函数
2015/12/13 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
基于vue实现swipe分页组件实例
2017/05/25 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
详解爬虫被封的问题
2019/04/23 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python 函数中的参数类型
2020/02/11 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
软件测试笔试题
2012/10/25 面试题
安全横幅标语
2014/06/09 职场文书
政协委员个人总结
2015/03/03 职场文书