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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
AngularJS中使用three.js的实例详解
Jul 21 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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连接MYSQL数据库的3种常用方法
2017/02/27 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python补齐字符串长度的实例
2018/11/15 Python
python使用requests.session模拟登录
2019/08/09 Python
通过实例解析python and和or使用方法
2020/11/14 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
八一慰问活动方案
2014/02/07 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
代理人委托书
2014/09/16 职场文书
决心书格式及范文
2019/06/24 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js