jquery attr
- 5 DOM元素
- prk/彭仁夔 2008-08-22
- 构建了jquery对象,也能对jquery的集合中元素进行局部的调整。现在就是操作。对于jquery对象中Dom元素进行操作。对jquery进行dom的操作就是对jquery对象集合的所有元素都进行操作(有的时间只是第一个元素)。
- 对于dom的操作可以分成对元素的属性,内容,CSS,insert这几个方面进行操作。
- 5.1 dom元素的属性
- 对dom元素的操作,对元素的属性进行操作是很重要的一项。我们可以通过dom元素的原始方法对元素元素进行操作,但是由于浏览器的兼容等各方面的问题,jquery和其它的lib一样,都提供了一个完好兼容的操作。
- 5.1.1 Attr
- 名称及描述 返回 兼容性
- getAttribute( name )
- 当前节点给定Name的属性值 Object
- All
-
- getAttributeNS( namespace, name )
- 当前节点给定namespace,Name的属性值 Object
- All
-
- getAttributeNode( name )
- 取当前节点给定name的属性节点。 Attr
- All
-
- getAttributeNodeNS( namespace, name )
- 取当前节点给定namespace,name的属性节点。 Attr
- All
-
- hasAttribute( name )
- 当前节点是否有指定name的属性 Boolean
- All
-
- hasAttributeNS( namespace, name )
- 当前节点是否有指定namespace,name的属性 Boolean
- All
-
- hasAttributes()
- 当前节点是否有属性 Boolean
- All
-
- removeAttribute( name )
- 删除当前节点给定name的属性。 - All
-
- removeAttributeNS( namespace, name )
- 删除当前节点给定namespace,name的属性。
- removeAttributeNode( name )
- 删除当前节点给定name的属性节点 - All
-
- setAttribute( name, value )
- 设定当前节点给定name的属性值. - All
-
- setAttributeNS( namespace, name, value )
- 设定当前节点给定namespace,name的属性值. - All
-
- setAttributeNode( name, attrNode )
- 设定当前节点给定name的属性值节点。 - All
-
- setAttributeNodeNS( namespace, name, attrNode )
- 设定当前节点给定namespace,name的属性值节点。 - All
-
- 上表是 mozilla文档中element的对于attribute的相关操作函数。我们可以看出对于属性的操作只有取值,设值,删除,判断四个方面。每个方面都有对属性值,属性节点和带有命名空间的操作。
- 但是对于大多数使用,我们只会用到getAttribute( name )、setAttribute( name, value )、removeAttribute( name )这三种。而jquery正好提供了这三种的实现。它主要的功能就是解决IE、FF等等的兼容问题。比如opacity属性。还有一些html中标签的属性名是元素的属性的简写,如for—htmlFor。我们现在调用Jquery的方法只要直接用简写的for就可以,jquery会完成它们对应的转换。
- Jquery不光在这里给我们提供支援了方便,就是名字上也提供了方便。它把getAttribute( name )、setAttribute( name, value )长且难记的方法名统一在attrr的函数中。
-
-
-
-
-
-
-
-
- attr : function(name, value, type) {
- var options = name;
- if (name.constructor == String)
- if (value === undefined)
-
- return this[0] && jQuery[type || "attr"](this[0], name); ①
- else {
- options = {};
- options[name] = value;
- }
- return this.each(function(i) {
- for (name in options)
-
- jQuery.attr(type ? this.style : this, name, jQuery ②
- .prop(this, options[name], type, i, name));
- });
- },
- 上面的代码的①是一个取值操作,因为type是内部使用的参数,type至目前只能是curCSS,也就是如果传入type的值,那就是调用jQuery.curCSS在元素的CSS中去找到对应的属性,如hegth,width等。或者就是调用jQuery.attr在元素中找到对应名字的属性。注意CSS中的属性和元素的属性是不一样,CSS是通过元素的属性class或style来设定的。
- 在代码的②处也是调用jQuery.attr进行设值,不过它会先调用jQuery.prop对传入的value进行计算,如value是函数,就取函数返回值。如果value为数字且是为元素的CSS设属性值(如height)的话,说明其没有指定单位,prop会加上px作为默认的单位。
- 我们先看一下jQuery.prop的代码:
-
- prop : function(elem, value, type, i, name) {
- if (jQuery.isFunction(value))
- value = value.call(elem, i);
-
- return value && value.constructor == Number && type == "curCSS"
- && !exclude.test(name) ? value + "px" : value;
- },
- jQuery.Prop返回修正后的value,再回到attr 中代码的②处看一下jQuery.attr,它完成取值和设值的功能。
-
- attr : function(elem, name, value) {
-
- if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
- return undefined;
- var notxml = !jQuery.isXMLDoc(elem),
- set = value !== undefined,
- msie = jQuery.browser.msie;
-
-
- if (elem.tagName) {
- var special = /href|src|style/.test(name);
-
- if (name == "selected" && jQuery.browser.safari)
- elem.parentNode.selectedIndex;
- if (name in elem && notxml && !special) {
- if (set) {
- if (name == "type" && jQuery.nodeName(elem, "input")
- && elem.parentNode)
- throw "type property can't be changed";
- elem[name] = value;
- }
-
- if (jQuery.nodeName(elem, "form")&& elem.getAttributeNode(name))
- return elem.getAttributeNode(name).nodeValue; ④
- return elem[name];
- }
-
-
- if (msie && notxml && name == "style") ⑤
-
- return jQuery.attr(elem.style, "cssText", value);
-
- if (set) elem.setAttribute(name, "" + value);
- var attr = msie && notxml && special
- ? elem.getAttribute(name, 2): elem.getAttribute(name);
-
- return attr === null ? undefined : attr;
- }
-
-
- if (msie && name == "opacity") { ⑧
- if (set) {
- elem.zoom = 1;
-
- elem.filter = (elem.filter || "").replace(/alpha\([^)]*\)/,"") + ((parseInt(value) + '' == "NaN"? "": "alpha(opacity=" + value * 100 + ")"));
- }
-
- return elem.filter && elem.filter.indexOf("opacity=") >= 0?
- (parseFloat(elem.filter.match(/opacity=([^)]*)/)[1])/100)+'': "";
- }
-
- name = name.replace(/-([a-z])/ig, function(all, letter) { ⑨
- return letter.toUpperCase();});
- if (set) elem[name] = value;
- return elem[name];
- },
- jQuery.attr函数分成三个部分,第一部分②处之前的代码,它是处理一些准备工作,如标签属性名与元素的属性名之间的对应。第二部分是②~⑦,它主要完成对元素的属性进行设值或取值。③~⑤首先通过Dom 0的方式(elem[name])来,如果不能完成的话,就采用⑤~⑦的Dom1的方式通过getAttribute( name )、setAttribute( name, value )来进行操作。这种操作相对Dom0的方式,可以对XML进行操作。而且还能对Dom1的href|src|style属性进行操作。
- 在⑤处,我们可以看出IE 中Style属性要进行特殊的处理。这个处理就是第三部分的的任务,位处于⑦之后的代码,对于元素的CSS属性进行取值或设值。在⑨处,我们可以看到CSS属性名只支持lamb字的形式。
- jQuery.attr不但可以完成对元素的属性设/取值,还可以能CSS进行设/取值。
-
- 对于属性的操作,jquery还提供了removeAttr。它通过调用Element ‘s removeAttribute()来完成对this中每个元素都删除属性。
-
- jQuery.each( {
- removeAttr : function(name) {
- jQuery.attr(this, name, "");
- if (this.nodeType == 1)
- this.removeAttribute(name);
- },
- .. .. ..
- }, function(name, fn) {
- jQuery.fn[name] = function() {
- return this.each(fn, arguments);
- };
- });
原文地址:https://www.cnblogs.com/rooney/p/1346458.html