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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue实现移动端图片上传功能
Dec 23 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
sql注入与转义的php函数代码
2013/06/17 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
node通过express搭建自己的服务器
2017/09/30 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python开发之文件操作用法实例
2015/11/13 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
归途列车观后感
2015/06/17 职场文书
python基础详解之if循环语句
2021/04/24 Python
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python