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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
js实现录音上传功能
Nov 22 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JavaScript中的闭包
2016/02/24 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
解决Python requests 报错方法集锦
2017/03/19 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python随机模块random使用方法详解
2020/02/14 Python
Python实现画图软件功能方法详解
2020/07/28 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
企业安全生产责任书范本
2014/07/28 职场文书
2015年清明节活动总结
2015/02/09 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python