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实战_读书笔记1—选择jQuery
Jan 22 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
Angular实现响应式表单
2017/08/04 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
tensorflow 查看梯度方式
2020/02/04 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
python中PyQuery库用法分享
2021/01/15 Python
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
学习张林森心得体会
2014/09/10 职场文书
幸福中国演讲稿
2014/09/12 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
十二生肖观后感
2015/06/12 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript