当前位置:主页 > jquery教程 > jQuery .attr()和.removeAttr()方法操作元素属性示例

详解jQuery .attr()和.removeAttr()方法操作元素属性

发布:2020-01-27 17:17:18 56


我们帮大家精选了jQuery相关的编程文章,网友咸安晏根据主题投稿了本篇教程内容,涉及到jQuery、attr、removeAttr、元素属性、jQuery .attr()和.removeAttr()方法操作元素属性示例相关内容,已被547网友关注,涉猎到的知识点内容可以在下方电子书获得。

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="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中的deferred用法分享

    发布:2020-04-20

    deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案。接下来通过本文给大家介绍jQuery中的derferred使用方法,非常不错,需要的朋


  • jquery+thinkphp实现跨抓取数据的方法

    发布:2019-06-06

    这篇文章主要介绍了jquery+thinkphp实现跨域抓取数据的方法,结合实例形式分析了thinkPHP结合jQuery的ajax实现跨域抓取数据的相关操作技巧,需要的朋友可以参考下


  • JQuery代码片段精选整理

    发布:2020-04-06

    这篇文章主要介绍了12个超实用的JQuery代码片段,代码简洁,具有实用价值,感兴趣的小伙伴们可以参考一下


  • 实例详解JS中Attr用法

    发布:2020-01-13

    本文通过实例代码给大家介绍了js中的attr的用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧


  • jQuery动态加载css的知识点详解

    发布:2020-02-15

    使用jQuery来加载一个外部的 css 文件,首先创建一个 link 元素,并将它添加到 标记中即可。那么基于jquery代码如何实现呢?下面小编给大家介绍jQuery动态加载css文件实现方法,需要的朋友参考下


  • jQuery的图片滑块焦点图插件整理推荐

    jQuery的图片滑块焦点图插件整理推荐

    发布:2022-07-07

    给大家整理一篇关于jQuery的教程,本文给大家整理了9款基于jQuery的图片滑块焦点图插件,效果都非常炫酷,演示和下载地址都给大家整理好了,有需要的小伙伴直接拿走吧,不用跟我客气^_^


  • jQuery子元素过滤选择器实例用法

    发布:2021-06-05

    这篇文章主要介绍了jQuery子元素过滤选择器用法,结合实例形式分析了jQuery中nth-child、first-child、last-child、only-child等进行子元素过滤操作的相关技巧,需要的朋友可以参考下


  • jquery解决IE输入框不能输入的问题

    发布:2020-07-21

    下面小编就为大家带来一篇用jquery快速解决IE输入框不能输入的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


网友讨论