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"
});
});
});

赞 (0)

相关推荐

  • 详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法

    详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法

    jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined.   注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: 复制代码 代码如下: <!DOCTYPE html>

  • jquery使用remove()方法删除指定class子元素

    本文实例讲述了jquery使用remove()方法删除指定class子元素的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function

  • jQuery使用removeClass方法删除元素指定Class的方法

    本文实例讲述了jQuery使用removeClass方法删除元素指定Class的方法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function

  • jQuery remove()过滤被删除的元素（推荐）

    jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤. 该参数可以是任何 jquery 选择器的语法. 下面的例子删除 class="italic" 的所有 <p> 元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/

  • jQuery .attr()和.removeAttr()方法操作元素属性示例

    今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(

  • jQuery学习3：操作元素属性和特性

    先看一个例子: 复制代码 代码如下: <a id="easy" href="#">http://www.jb51.net</a>现在要得到a标签的属性id.有如下方法: 复制代码 代码如下: jQuery("#easy").click(function() {     alert(document.getElementById("easy").id); //1     alert(this.id); /

  • JavaScript利用html5新方法操作元素类名详解

    JavaScript利用html5新方法操作元素类名详解

    目录 1.classList属性 2.实务应用 早先JavaScript处理起来特别不方便,需要先取到class属性,然后对字符串进行处理. 现在html5给所有元素增加了classList属性来操作类属性,非常方便. 1.classList属性 先看如下代码: <ul class="nav"> <li class="active">栏目1</li> <li>栏目2</li> <li>栏目3&l

  • jQuery cookie的公共方法封装和使用示例

    本文实例讲述了jQuery cookie的公共方法封装和使用.分享给大家供大家参考,具体如下: common.js放入公共方法: /** * 刷新cookie */ var cookiesPath = '/'; var cookiesTime = 3 / 24; function refreshCookie() { var cookieData = $.cookie(); $.each(cookieData, function (_key, _value) { $.cookie(_key, _v

  • jQuery获取选中内容及设置元素属性的方法

    获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr

  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

  • 遍历DOM对象内的元素属性示例代码

    直接上代码: 例如要获取一个id为"btn"的按钮的所有属性 复制代码 代码如下: function showBtn() { var tmp=""; var objBtn = document.getElementById("btn"); for(var i in objBtn) { tmp += i+":"+objBtn[i]; } alert(tmp); }

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

  • jQuery第三课 修改元素属性及内容的代码

    jQuery第三课 修改元素属性及内容的代码

    1. 操作属性 上文介绍了如何筛选到需要的元素.得到了元素之后就要对其进行操作.一个常见的需求是遍历得到的元素集,对每一个元素进行一个操作.jQuery提供的函数是 each(iterator),其中iterator是一个函数,接受一个整数作为参数,表示第几个元素.看一个简单的例子. 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Operatio

  • javascript操作元素的常见方法小结

    本文实例讲述了javascript操作元素的常见方法.分享给大家供大家参考,具体如下: 获取元素方法一 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如: <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> .... <div i

随机推荐