- 浏览: 323213 次
- 性别:
- 来自: 南昌
文章分类
最新评论
-
j_bird:
你好,想探讨下滑动窗口是怎么计算的,一条群发短信发出去,滑动窗 ...
协议研发 中移动CMPP2.0协议API -
andyliulin:
楼主,现在的magicode 生成器工具的 官网,http: ...
Mgicode 生成器正式发布 -
huazai_wow:
楼主 你只是分析了 在jquery 中 有使用到 jQu ...
jquery event trigger 分析 -
dengkanghua:
CMPP2.0中出现流量控制错误是什么引起的。有什么解决办法吗 ...
协议研发 中移动CMPP2.0协议API -
JohnHust:
[flash=200,200][/flash][url][/u ...
Jquery源码分析(一)
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(properties) // 将“名/值”形式的对象设置为所有匹配元素的属性。 // attr(name) // 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个//属性的值。如果元素没有相应属性,则返回 undefined 。 // attr(key,value) // 为所有匹配的元素设置一个属性值。$("img").attr("src","test.jpg"); // attr(key,fn) // 为所有匹配的元素设置一个由这个函数计算的值做属性值。 attr : function(name, value, type) { var options = name;// 支持"名/值"形式的对象和string if (name.constructor == String) if (value === undefined) // 调用curCss,attr静态方法返回本对象第一个元素的name的属性值 return this[0] && jQuery[type || "attr"](this[0], name); ① else {// 设定属性值,把name String 转换成"名/值"对象,便于统一的处理 options = {}; options[name] = value; } return this.each(function(i) {// 为每个元素的指定的name属性设值 for (name in options) // value=options[name],可以是Fn(index),this-->each elem 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的代码: // 根据指定元素(elem)的指定的name来修正value值,如加px,exec Fn. prop : function(elem, value, type, i, name) { if (jQuery.isFunction(value))// value=Fn value = value.call(elem, i);// 得到Fn的返回value // 对于element的style中CSS属性,对需要加上单位的加上px单位 return value && value.constructor == Number && type == "curCSS" && !exclude.test(name) ? value + "px" : value; }, jQuery.Prop返回修正后的value,再回到attr 中代码的②处看一下jQuery.attr,它完成取值和设值的功能。 // 为给定的elem的name属性设定value值或取elem的name属性值 attr : function(elem, name, value) { // 文本,注释节点不处理 ① if (!elem || elem.nodeType == 3 || elem.nodeType == 8) return undefined; var notxml = !jQuery.isXMLDoc(elem),//不处理xml文档的 set = value !== undefined,// 取值还是设值? msie = jQuery.browser.msie;//ie // 兼容的处理,标签中的属性名是元素属性名的简化:for--htmlFor, //标签中的属性名全部是小写,而元素属性名采用lamb形式:rowspan : "rowSpan" name = notxml && jQuery.props[name] || name;//可以看出&&、||的用法。 if (elem.tagName) {//是元素 ② var special = /href|src|style/.test(name);// 要特殊处理 // 对于safari的特殊处理 if (name == "selected" && jQuery.browser.safari) elem.parentNode.selectedIndex; if (name in elem && notxml && !special) {// 通过DOM 0方式进入属性③ if (set) {// 改变属性但IE中的type类型的元素不能改变 if (name == "type" && jQuery.nodeName(elem, "input") && elem.parentNode) throw "type property can't be changed"; elem[name] = value; } // 对于attr(form,name),取的是form[name].value if (jQuery.nodeName(elem, "form")&& elem.getAttributeNode(name)) return elem.getAttributeNode(name).nodeValue; ④ return elem[name]; } // 对style进行属性的操作 if (msie && notxml && name == "style") ⑤ //再次调用本函数,执行第二部分的代码,设定style中cssText. return jQuery.attr(elem.style, "cssText", value); // IE会报错 see #1070 "" + value转换为字符串 if (set) elem.setAttribute(name, "" + value); //dom1 ⑥ var attr = msie && notxml && special//href|src|style 在IE要特殊处理 ? elem.getAttribute(name, 2): elem.getAttribute(name); // 不存在的属性返回null时,改成返回undefined return attr === null ? undefined : attr; } // 元素的CSS的属性,也就是当elem参数是元素的style时。。。 ⑦ // IE 使用 filters for opacity if (msie && name == "opacity") { ⑧ if (set) {// IE opacity 要层的支持 elem.zoom = 1; // 设 alpha filter 来设定 opacity elem.filter = (elem.filter || "").replace(/alpha\([^)]*\)/,"") + ((parseInt(value) + '' == "NaN"? "": "alpha(opacity=" + value * 100 + ")")); } //找到opacity的值并返回。 return elem.filter && elem.filter.indexOf("opacity=") >= 0? (parseFloat(elem.filter.match(/opacity=([^)]*)/)[1])/100)+'': ""; } // lamb字的支持 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中每个元素都删除属性。 // 一组对元素attr,class等进行操作的函数 jQuery.each( { removeAttr : function(name) {// 除去元素的一个属性 jQuery.attr(this, name, ""); if (this.nodeType == 1) this.removeAttribute(name);//this==dom element }, .. .. .. }, function(name, fn) { jQuery.fn[name] = function() { return this.each(fn, arguments); }; });
发表评论
-
[转载]jquery.validate.js的基本用法入门
2011-03-10 22:35 2884[转载]jquery.validate.js的基本用法入门 j ... -
使用javascript动态创建SVG对象的问题
2011-01-11 17:18 4745无沙备忘录系列 -平时的一些研究,有时也会颇费功夫,然 ... -
evaluate mxGraph
2010-06-10 16:09 1725To evaluate mxGraph: - Navigate ... -
js中的prototype与constructor
2010-06-09 10:53 2922并且每个函数都有一个默认的prototype属性。 如果这个函 ... -
Jquery1.2.6 源码分析
2008-08-29 00:13 14151jQuery是一个非常优秀的J ... -
jquery fx分析
2008-08-28 19:37 63178 FX分析 prk/彭仁夔 ... -
jqueyr fx源码(修改)
2008-08-28 19:33 2673/* * author:prk date:2008-08-0 ... -
jquery.ajax
2008-08-27 16:50 81147.2 jquery.ajax ... -
jquery event domready
2008-08-26 17:39 41406.3 domReady的处理 ... -
jquery event trigger 分析
2008-08-26 17:37 113776.2.2 trigger ... -
jquery event addEvent 分析
2008-08-26 17:36 111976.2 事件的处理 ... -
jquery event 封装的源源分析
2008-08-26 17:35 46036.Event分析 ... -
jquery position
2008-08-25 16:34 87815.2.3 position ... -
jquery wrap
2008-08-25 08:12 44795.3.5 wrap ... -
jquery element content
2008-08-25 08:11 43475.4dom元素的内容 ... -
jquery class
2008-08-22 23:18 53705.1.2 Class prk/彭仁夔 2008- ... -
jquery Selector (修改)
2008-08-21 17:10 3096/** * author:prk * date:2008- ... -
CSS selector (jquery的源码分析,修改)
2008-08-21 17:09 44183.3、采用CSS方式查找Dom节点 ... -
如何找到Dom元素
2008-08-20 22:10 28313、如何找到Dom元素 ... -
Jquery源码分析(修改)
2008-08-20 22:07 5784Jquery源码分析 ...
相关推荐
ery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr
假设我们现在需要这样的场景:页面上有一个checkbox,我们期望通过Jquery来获得它是否选中,或者通过Jquery来让它被选中。 在JQ1.6之前的版本,我们会这样写我们的代码: 代码如下: <input type=’checkbox’ id=...
问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,...
$("#anchor").attr('onclick', '').click(newclick); 如果onclick事件原先有值,要先清空,再用click( eval(function(){…..}) )赋值 $("input[name='orderCar']").attr('onclick','').click( eval(...
Jquery的attr()方法是jQuery库中用于操作DOM元素属性的一个核心方法。它能够获取或设置元素的属性和属性值。通过attr()方法,可以非常方便地操作HTML元素的属性,从而实现页面动态交互效果。在详细讲解attr()方法...
在jQuery库中,`attr()`方法是一个非常关键的函数,用于处理HTML元素的属性。它不仅可以用来获取元素的属性值,还可以用来设置属性值。在DOM(文档对象模型)操作中,`attr()`方法扮演着重要的角色,因为它使得对...
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,只需要用到attr()这个函数就可以了。attr是attribute(属性)的缩写。
**jQuery的attr方法详解** 在JavaScript的世界里,jQuery库以其简洁的API和强大的功能深受开发者喜爱。其中,`attr`方法是jQuery中的一个重要成员,它主要用于获取或设置HTML元素的属性(attribute)。本文将深入...
标题和描述提到的问题在于从jQuery 1.6版本开始,`attr('checked')`不再像预期那样返回`true`或`false`,而是返回`checked`(如果复选框被选中)或`undefined`(如果未被选中)。 在jQuery 1.5及更早版本,`attr('...
本知识点将详细探讨如何在使用jQuery的`attr()`方法来设置包含`&`符号的`src`属性时避免常见的问题,并提供解决方案。 首先,我们来了解在HTML中的`&`符号是一个特殊的字符,它用于引入HTML实体。例如,` `...
我用 jquery 的attr 方法设定 iframe的src属性 $(“#addOrUpdateIframe”).attr(“src”, “http://blog.jb51.net/search.aspx?key=400”);//可点击链接查看效果 注意页数(显示第一页数据) 没有问题,得到了我想...
在jQuery中,`attr()`, `prop()`, 和 `val()` 都是用来获取或设置HTML元素属性的方法,但在处理特定属性如"value"时,它们之间存在微妙的差异。这篇文章将详细探讨这三种方法在获取input元素value值时的不同之处。 ...
在jQuery中,`attr()`和`prop()`方法都是用来处理元素的属性(attributes)和特性(properties),但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。 首先,属性...
本篇文章将详细介绍jQuery中用于操作DOM元素属性的两个非常重要的方法:attr()和removeAttr()。 首先,attr()方法是jQuery中最常用的方法之一,它用于读取或设置HTML元素的属性值。在介绍attr()方法之前,我们首先...
使用Jquery的attr()方法可以获取和设置HTML元素的属性值,例如获取src属性值是$("#image").attr("src"),而设置src属性值则是$("#image").attr("src","image/1/gif")。 从更深层次的视角来看,这个问题揭示了Web...
本文将详细介绍如何使用jQuery库中的attr方法来实现一个简单的图片切换效果。attr方法是jQuery中用于获取或设置HTML元素属性值的函数,通过该方法可以方便地实现元素属性的动态修改,进而达到图片切换的目的。 首先...