欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【jQuery .attr()和.removeAttr()方法操作元素属性示例】,下面是详细的讲解!
jQuery .attr()和.removeAttr()方法操作元素属性示例
今天主要和大家一起分享一下如何使用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="http://www.jb51.net/article/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"
});
});
});
关于jQuery .attr()和.removeAttr()方法操作元素属性示例的用户互动如下:
相关问题:JQUERY click removeAttr怎么让命令失效
答:(1)$("#btn").removeAttr("class").unbind("click"); (2) $("#btn").bind("click",btn);方式绑定事件,是先通过CSS样式找到对应的元素对象,然后为这个元素的对象绑定! >>详细
相关问题:Jquery attr removeAttr属性取消
答:先把超链接的原值取出来, var link = $(".aclass").attr("href"); 如果想按钮A点击时,超链接失效可以这样写 $(".aclass").attr('href',"javascript:;") 按钮b点击时,直接赋值就好了 $(".aclass").attr("href",link); >>详细
相关问题:jquery的select标签removeAttr("disabled")无效
答:disabled这个属性在火狐浏览器下是无法移除的,因此,如果你必需要移除的话,只能用js来刷新下页面, $(".app_reget").removeAttr("disabled")if (navigator.userAgent.indexOf('Firefox') >= 0){ window.location.reload(); } >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
