1. 首页
  2. 杂谈
  3. jquery attr

jquery attr

•杂谈•阅读 1136
  1. 5 DOM元素
  2. prk/彭仁夔 2008-08-22
  3. 构建了jquery对象，也能对jquery的集合中元素进行局部的调整。现在就是操作。对于jquery对象中Dom元素进行操作。对jquery进行dom的操作就是对jquery对象集合的所有元素都进行操作（有的时间只是第一个元素）。
  4. 对于dom的操作可以分成对元素的属性，内容，CSS，insert这几个方面进行操作。
  5. 5.1 dom元素的属性
  6. 对dom元素的操作，对元素的属性进行操作是很重要的一项。我们可以通过dom元素的原始方法对元素元素进行操作，但是由于浏览器的兼容等各方面的问题，jquery和其它的lib一样，都提供了一个完好兼容的操作。
  7. 5.1.1 Attr
  8. 名称及描述 返回 兼容性
  9. getAttribute( name )
  10. 当前节点给定Name的属性值 Object
  11. All
  12. getAttributeNS( namespace, name )
  13. 当前节点给定namespace,Name的属性值 Object
  14. All
  15. getAttributeNode( name )
  16. 取当前节点给定name的属性节点。 Attr
  17. All
  18. getAttributeNodeNS( namespace, name )
  19. 取当前节点给定namespace,name的属性节点。 Attr
  20. All
  21. hasAttribute( name )
  22. 当前节点是否有指定name的属性 Boolean
  23. All
  24. hasAttributeNS( namespace, name )
  25. 当前节点是否有指定namespace,name的属性 Boolean
  26. All
  27. hasAttributes()
  28. 当前节点是否有属性 Boolean
  29. All
  30. removeAttribute( name )
  31. 删除当前节点给定name的属性。 - All
  32. removeAttributeNS( namespace, name )
  33. 删除当前节点给定namespace,name的属性。
  34. removeAttributeNode( name )
  35. 删除当前节点给定name的属性节点 - All
  36. setAttribute( name, value )
  37. 设定当前节点给定name的属性值. - All
  38. setAttributeNS( namespace, name, value )
  39. 设定当前节点给定namespace,name的属性值. - All
  40. setAttributeNode( name, attrNode )
  41. 设定当前节点给定name的属性值节点。 - All
  42. setAttributeNodeNS( namespace, name, attrNode )
  43. 设定当前节点给定namespace,name的属性值节点。 - All
  44. 上表是 mozilla文档中element的对于attribute的相关操作函数。我们可以看出对于属性的操作只有取值，设值，删除，判断四个方面。每个方面都有对属性值，属性节点和带有命名空间的操作。
  45. 但是对于大多数使用，我们只会用到getAttribute( name )、setAttribute( name, value )、removeAttribute( name )这三种。而jquery正好提供了这三种的实现。它主要的功能就是解决IE、FF等等的兼容问题。比如opacity属性。还有一些html中标签的属性名是元素的属性的简写，如for—htmlFor。我们现在调用Jquery的方法只要直接用简写的for就可以，jquery会完成它们对应的转换。
  46. Jquery不光在这里给我们提供支援了方便，就是名字上也提供了方便。它把getAttribute( name )、setAttribute( name, value )长且难记的方法名统一在attrr的函数中。
  47. // attr(properties)
  48. // 将“名/值”形式的对象设置为所有匹配元素的属性。
  49. // attr(name)
  50. // 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个//属性的值。如果元素没有相应属性，则返回 undefined 。
  51. // attr(key,value)
  52. // 为所有匹配的元素设置一个属性值。$("img").attr("src","test.jpg");
  53. // attr(key,fn)
  54. // 为所有匹配的元素设置一个由这个函数计算的值做属性值。
  55. attr : function(name, value, type) {
  56. var options = name;// 支持"名/值"形式的对象和string
  57. if (name.constructor == String)
  58. if (value === undefined)
  59. // 调用curCss,attr静态方法返回本对象第一个元素的name的属性值
  60. returnthis[0] && jQuery[type || "attr"](this[0], name); ①
  61. else {// 设定属性值，把name String 转换成"名/值"对象，便于统一的处理
  62. options = {};
  63. options[name] = value;
  64. }
  65. returnthis.each(function(i) {// 为每个元素的指定的name属性设值
  66. for (name in options)
  67. // value=options[name],可以是Fn(index),this-->each elem
  68. jQuery.attr(type ? this.style : this, name, jQuery ②
  69. .prop(this, options[name], type, i, name));
  70. });
  71. },
  72. 上面的代码的①是一个取值操作，因为type是内部使用的参数，type至目前只能是curCSS，也就是如果传入type的值，那就是调用jQuery.curCSS在元素的CSS中去找到对应的属性，如hegth,width等。或者就是调用jQuery.attr在元素中找到对应名字的属性。注意CSS中的属性和元素的属性是不一样，CSS是通过元素的属性class或style来设定的。
  73. 在代码的②处也是调用jQuery.attr进行设值，不过它会先调用jQuery.prop对传入的value进行计算，如value是函数，就取函数返回值。如果value为数字且是为元素的CSS设属性值（如height）的话，说明其没有指定单位，prop会加上px作为默认的单位。
  74. 我们先看一下jQuery.prop的代码：
  75. // 根据指定元素(elem)的指定的name来修正value值，如加px,exec Fn.
  76. prop : function(elem, value, type, i, name) {
  77. if (jQuery.isFunction(value))// value=Fn
  78. value = value.call(elem, i);// 得到Fn的返回value
  79. // 对于element的style中CSS属性，对需要加上单位的加上px单位
  80. return value && value.constructor == Number && type == "curCSS"
  81. && !exclude.test(name) ? value + "px" : value;
  82. },
  83. jQuery.Prop返回修正后的value，再回到attr 中代码的②处看一下jQuery.attr,它完成取值和设值的功能。
  84. // 为给定的elem的name属性设定value值或取elem的name属性值
  85. attr : function(elem, name, value) {
  86. // 文本，注释节点不处理 ①
  87. if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
  88. return undefined;
  89. var notxml = !jQuery.isXMLDoc(elem),//不处理xml文档的
  90. set = value !== undefined,// 取值还是设值？
  91. msie = jQuery.browser.msie;//ie
  92. // 兼容的处理,标签中的属性名是元素属性名的简化：for--htmlFor，
  93. //标签中的属性名全部是小写，而元素属性名采用lamb形式：rowspan : "rowSpan" name = notxml && jQuery.props[name] || name;//可以看出&&、||的用法。
  94. if (elem.tagName) {//是元素 ②
  95. var special = /href|src|style/.test(name);// 要特殊处理
  96. // 对于safari的特殊处理
  97. if (name == "selected" && jQuery.browser.safari)
  98. elem.parentNode.selectedIndex;
  99. if (name in elem && notxml && !special) {// 通过DOM 0方式进入属性③
  100. if (set) {// 改变属性但IE中的type类型的元素不能改变
  101. if (name == "type" && jQuery.nodeName(elem, "input")
  102. && elem.parentNode)
  103. throw "type property can't be changed";
  104. elem[name] = value;
  105. }
  106. // 对于attr(form,name)，取的是form[name].value
  107. if (jQuery.nodeName(elem, "form")&& elem.getAttributeNode(name))
  108. return elem.getAttributeNode(name).nodeValue; ④
  109. return elem[name];
  110. }
  111. // 对style进行属性的操作
  112. if (msie && notxml && name == "style") ⑤
  113. //再次调用本函数，执行第二部分的代码，设定style中cssText.
  114. return jQuery.attr(elem.style, "cssText", value);
  115. // IE会报错 see #1070 "" + value转换为字符串
  116. if (set) elem.setAttribute(name, "" + value); //dom1 ⑥
  117. var attr = msie && notxml && special//href|src|style 在IE要特殊处理
  118. ? elem.getAttribute(name, 2): elem.getAttribute(name);
  119. // 不存在的属性返回null时,改成返回undefined
  120. return attr === null ? undefined : attr;
  121. }
  122. // 元素的CSS的属性，也就是当elem参数是元素的style时。。。 ⑦
  123. // IE 使用 filters for opacity
  124. if (msie && name == "opacity") { ⑧
  125. if (set) {// IE opacity 要层的支持
  126. elem.zoom = 1;
  127. // 设 alpha filter 来设定 opacity
  128. elem.filter = (elem.filter || "").replace(/alpha\([^)]*\)/,"") + ((parseInt(value) + '' == "NaN"? "": "alpha(opacity=" + value * 100 + ")"));
  129. }
  130. //找到opacity的值并返回。
  131. return elem.filter && elem.filter.indexOf("opacity=") >= 0?
  132. (parseFloat(elem.filter.match(/opacity=([^)]*)/)[1])/100)+'': "";
  133. }
  134. // lamb字的支持
  135. name = name.replace(/-([a-z])/ig, function(all, letter) { ⑨
  136. return letter.toUpperCase();});
  137. if (set) elem[name] = value;
  138. return elem[name];
  139. },
  140. jQuery.attr函数分成三个部分，第一部分②处之前的代码，它是处理一些准备工作，如标签属性名与元素的属性名之间的对应。第二部分是②~⑦，它主要完成对元素的属性进行设值或取值。③~⑤首先通过Dom 0的方式（elem[name]）来，如果不能完成的话，就采用⑤~⑦的Dom1的方式通过getAttribute( name )、setAttribute( name, value )来进行操作。这种操作相对Dom0的方式，可以对XML进行操作。而且还能对Dom1的href|src|style属性进行操作。
  141. 在⑤处，我们可以看出IE 中Style属性要进行特殊的处理。这个处理就是第三部分的的任务，位处于⑦之后的代码，对于元素的CSS属性进行取值或设值。在⑨处，我们可以看到CSS属性名只支持lamb字的形式。
  142. jQuery.attr不但可以完成对元素的属性设/取值，还可以能CSS进行设/取值。
  143. 对于属性的操作，jquery还提供了removeAttr。它通过调用Element ‘s removeAttribute()来完成对this中每个元素都删除属性。
  144. // 一组对元素attr,class等进行操作的函数
  145. jQuery.each( {
  146. removeAttr : function(name) {// 除去元素的一个属性
  147. jQuery.attr(this, name, "");
  148. if (this.nodeType == 1)
  149. this.removeAttribute(name);//this==dom element
  150. },
  151. .. .. ..
  152. }, function(name, fn) {
  153. jQuery.fn[name] = function() {
  154. returnthis.each(fn, arguments);
  155. };
  156. });

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。