js setAttribute与jquery中attr用法比较

下面我们来具体看一下attr的用法:
一、attr:取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回
undefined 。其中name为string.下面我用一个img元素演示一下这种用法: 复制代码 代码如下: //html文件中
www.hj8828.com 1
//我们可以用attr获得img元素的src属性,具体用法如下: ${ var imgSrc = $;
alert; //显示 })
二、attr:为所有匹配的元素设置一个属性值。key为string属性名,value为object属性值,用法演示:
复制代码 代码如下: //html文件中
//使用此方法设置img的src属性 $.attr; //文件中显示
www.hj8828.com 2 })
三、attr:这是一种在所有匹配元素中批量设置很多属性的最佳方式。
注意,如果你要设置对象的class属性,你必须使用’className’
作为属性名。或者你可以直接使用.addClass 和 .removeClass. 复制代码 代码如下: //文件中
$.attr({src:”, title:’this is a
image’, className: ‘filter’}); }) //
显示为www.hj8828.com 3
四、attr:为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
复制代码 代码如下: //文件中
www.hj8828.com 4 $.attr{ return this.src });
//显示 www.hj8828.com 5 })
以上介绍的是attr的一些用法,下面是removeAttr的用法
remove故明思意就是移除的意思,从每一个匹配的元素中删除一个属性。它的具体用法就是:
复制代码 代码如下: //文档中
www.hj8828.com 6 $.removeAttr; //显示
www.hj8828.com 7 })
以上介绍了attr和removeAttr的基本用法,在实际的工作中还会遇到一些更为复杂的应用,这就需要我们掌握基本用法的同时,多多总结和尝试其他用法。

根据大体上的意思我感觉js
setAttribute与jquery中attr工作是完全一样的,只是jquery中简写了并且工能更强大了,下面我来分别介绍一下他们的用法。

setAttribute(string name, string
value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
1、样式问题

setAttribute(“class”,
value)中class是指改变”class”这个属性,所以要带引号。
vName代表对样式赋值。

例如:

 代码如下

复制代码

var input = document.createElement(“input”);
input.setAttribute(“type”, “text”);
input.setAttribute(“name”, “q”);
input.setAttribute(“class”,bordercss);

输出时:<input type=”text” name=”q”
class=”bordercss”>,即,input控件具有bordercss样式属性
注意:class属性在W3C
DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。
使用setAttribute(“class”,
vName)语句动态设置Element的class属性在firefox中是行的通的,但在IE中却不行。因为使用IE内核的浏览器不认识”class”,要改用”className”;
www.hj8828.com,同样,firefox 也不认识”className”。所以常用的方法是二者兼备:

 代码如下

复制代码

element.setAttribute(“class”, value); //for firefox
element.setAttribute(“className”, value); //for IE

2、方法属性等问题

例如:

 代码如下

复制代码

var bar = document.getElementById(“testbt”);
bar.setAttribute(“onclick”, “javascript:alert(‘This is a test!’);”);

这里利用setAttribute指定e的onclick属性,简单,很好理解。
但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。

 代码如下

复制代码

document.getElementById(“testbt”).className = “bordercss”;
document.getElementById(“testbt”).style.cssText = “color: #00f;”;
document.getElementById(“testbt”).style.color = “#00f”;
document.getElementById(“testbt”).onclick= function () { alert(“This is
a test!”); }

在不同浏览器上的不同表现

一、setAttribute的问题

elementNode为<tr>…</tr>

希望对其增加一个单击行的事件处理函数,
写法1:
table1row1.setAttribute(“onclick”, “selectrow1(this)”);
IE8, Firefox, google chrome 能正确触发click 事件
IE6,IE7则不能触发click 事件。
写法2:
table2row1.onclick = function() { selectrow2(this) };
所有测试浏览器均能触发click 事件

故为了兼容在不同的IE中,我们可以统一使用如下语句。
table2row1.onclick = function() { selectrow2(this) };

jquery 定义和用法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数,其工作方式也有所差异。
返回属性值
返回被选元素的属性值。

语法

$(selector).attr(attribute)参数 描述

设置多个属性/值对

为被选元素设置一个以上的属性和值。

语法

$(selector).attr({attribute:value, attribute:value …})参数 描述
attribute:value 规定一个或多个属性/值对。

attribute 规定要获取其值的属性。

用法一: $(选择器).attr(属性名) 它的作用就是获取指定元素( $(选择器)部分
)的指定属性的值. 看例子:

有这样一段html: