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

　　jQuery中操纵元素属性的方法:
　　attr(): 读或者写匹配元素的属性值.
　　removeAttr(): 从匹配的元素中移除指定的属性.

attr()方法 读操作

　　attr()读操作. 读取的是匹配元素中第一个元素的指定属性值.
　　格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined.
 
　　注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值.
　　看例子:

代码如下:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                alert($("p").attr("title"));//获取属性
                // this code can only get the first element's attribute.
            });
        });
    </script>
</head>
<body>
<p title="title1">paragraph 1</p>
<p title="title2">paragraph 2</p>
<br/>
<button>get title</button>
</body>
</html>

　　运行结果:弹框显示: title1.
 
　　想要分别获取每一个元素的属性,需要使用jQuery的循环结构,比如.each()或.map()方法.
　　上面的例子可以改成:

代码如下:

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            //get attribute for every element in selection.
            $("p").each(function () {
                alert($(this).attr("title"));
            });
        });
    });
</script>

　　即可分别获取每个元素的属性.

attr()方法 写操作

　　attr()写操作. 为匹配元素的一个或多个属性赋值.
　　一般格式: .attr(attributeName, value), 即为属性设置value.
　　返回值类型:jQuery.也即支持链式方法调用.
 
　　执行写操作的时候,如果指定的属性名不存在,将会增加一个该名字的属性,即增加自定义属性,其名为属性名,其值为value值.
 
　　写属性是为匹配集合中的每一个元素都进行操作的,见例子:

代码如下:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#button1").click(function(){
                $("p").attr("title","Hello World");
            });
        });
    </script>
</head>
<body>
<input type="button" id="button1" value="button1"></input>
<p>This is a paragraph.</p>
<div>This is a div.</div>
<p>This is another paragraph.</p>
<div>This is another div.</div>
</body>
</html>

　　点击按钮之后所有的p都加上了title="Hello World”的属性.

　　写操作还有以下两种格式:
　　.attr(attributes)和.attr(attributeName, function).
　　下面分别介绍.

.attr(attributes):

　　这里attributes类型是PlainObject,可以用于一次性设置多个属性.
　　什么是PlainObject呢,简单理解就是大括号包围的键值对序列.可以参考问后链接说明.
　　键和值之间用冒号(:)分隔,每个键值对之间用逗号(,)分隔.
 
　　注意: 设置多个属性值时,属性名的引号是可选的(可以有,也可以没有).但是class属性是个例外,必须加上引号.
 
　　例子:

代码如下:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function () {
                $("p").attr("title", "Hello World");
            });
            $("#button2").click(function () {
                $("div").attr({"title": "some title for div", "hello": "World"});
            });
        });
    </script>
</head>
<body>
<input type="button" id="button1" value="button1"></input>
<input type="button" id="button2" value="button2"></input>
<p>This is a paragraph.</p>
<div>This is a div.</div>
<p>This is another paragraph.</p>
<div>This is another div.</div>
</body>
</html>

　　点击两个按钮之后,元素变为:

　　其中<div>的hello是一个新增的自定义属性,其value为World.
 
.attr(attributeName, function(index, oldValue)):
　　使用一个function来设置属性值.function的第一个参数是index,第二个参数是该属性之前的值.
　　看例子:

代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
}
span {
color: red;
}
b {
font-weight: bolder;
}
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div")
.attr("id", function (index, oldAttr) {
if (oldAttr) {
return "div-id" + index + oldAttr;
} else {
return "div-id" + index;
}
})
.each(function () {
$("span", this).html("(id = '<b>" + this.id + "</b>')");
});
});
</script>
</head>
<body>
<div id="someId">Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
</body>
</html>

　　上面的例子,对应的页面结果如下:

 
　　当使用一个方法来设定属性值的时候,如果这个set的function没有返回值,或者返回了undefined,当前的值是不会被改变的.
　　即操作会被忽略.
　　还是上面的例子,attr()其中的function返回undefined:
　　如下:

代码如下:

<script type="text/javascript">
    $(document).ready(function () {
        $("div").attr("id", function (index, oldAttr) {
            return undefined;
        }).each(function () {
            $("span", this).html("(id = '<b>" + this.id + "</b>')");
        });
    });
</script>

　　返回的页面效果如下:

　　即没有进行任何修改操作,还是保持原来的属性值.
 
　　注意:jQuery不能修改<input>和<button>的type属性,如果修改会在浏览器报错.
　　这是因为IE浏览器中不能修改type属性.

removeAttr()方法

　　移除匹配元素集合中每一个元素的指定属性.
　　removeAttr()方法调用的是JavaScript的removeAttribute()方法,但是它能用jQuery对象直接调用,并且它考虑到并处理了各个浏览器上的属性名称可能不统一的问题.
　　例子:

代码如下:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[type=button]").click(function () {
                $("div").removeAttr("title");
            });
        });
    </script>
</head>
<body>
<input type="button" value="ClickMe"></input>
<div title="hello">Zero</div>
</body>
</html>

　　点击按钮后,<div>的title属性会被删除.
 
　　注意: 用removeAttr()移除onclick在IE6-8上都不会起作用,为了避免这个问题,应该使用.prop()方法.
　　比如:

代码如下:

$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );

赞 (0)

相关推荐

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

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

  • 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操纵DOM元素属性 attr()和removeAtrr()方法

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

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

  • jquery更改元素属性attr()方法操作示例

    本文实例讲述了jquery更改元素属性attr()方法.分享给大家供大家参考,具体如下: jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写, 是js中setAttribute()和getAttribute()的简化 最基本常用的用法: $("img").attr("src","img/a.jpg"); $("img").attr("width","1

  • jQuery 实现DOM元素拖拽交换位置的实例代码

    实现步骤 1.html + bootstrap 布局画3个面板. 注:面板样式 position 属性必须是绝对位置或者相对位置. 2.监听面板的的 mousedown事件. 记录当前对应面板的位置target_index,设置面板透明拖动. 3.监听当前被拖动的面板的mousemove事件. 根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置. 4.监听当前被拖动的面板的mouseup事件. 当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchange

  • jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

  • 处理及遍历XML文档DOM元素属性及方法整理

    用于处理XML文档的DOM元素属性 复制代码 代码如下: childNodes:返回当前元素所有子元素的数组: firstChild:返回当前元素的第一个下级子元素: lastChild:返回当前元素的最后一个子元素: nextSibling:返回紧跟在当前元素后面的元素: noedValue:指定表示元素值的读/写属性: parentNode:返回元素的父节点: previousSibling:返回紧邻当前元素之前的元素: 用于遍历XML文档的DOM元素方法 复制代码 代码如下: getEle

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • JQuery 获取Dom元素的实例讲解

    废话不多说,直接上代码 (function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(selector, context); } VP.fn = VP.prototype = { constructor: VP, init: function (selector, context) { var _document = window.document, elem, m

  • jQuery创建DOM元素实例解析

    本文实例讲述了jQuery创建DOM元素的使用技巧.分享给大家供大家参考.具体分析如下: 利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 复制代码 代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript 复制代码

  • jQuery中DOM树操作之使用反向插入方法实例分析

    本文实例讲述了jQuery中DOM树操作之使用反向插入方法.分享给大家供大家参考.具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置.通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效.可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容.此时,利 用反向插入方法,可以帮我们解决问题. 像.insertBefore()和.appendTo()这样的插人方法,一般

  • 详谈jQuery unbind 删除绑定事件 / 移除标签方法

    jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 返回值: jQuery 参数: type (String) : (可选) 事件类型 data (Function): (可选)

随机推荐