- 浏览: 419133 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (267)
- 序列号 (1)
- jquery (14)
- Eclipse插件 (3)
- Flex (2)
- Rose (1)
- Myeclipse (3)
- maven (4)
- SpringSecurity (2)
- sproutcore (1)
- Http (2)
- svn (4)
- gwt (3)
- jetty (1)
- freebsd (1)
- java (29)
- Oracle (21)
- windows (1)
- Mybatis3.0 (3)
- Struts2 (6)
- easyui (1)
- JPA (1)
- UML (1)
- dom4j (1)
- design pattern (2)
- JavaScript (8)
- FreeMarker (2)
- SQLServer (1)
- memcached (3)
- urlrewrite (1)
- MonggoDB (1)
- Solr (1)
- Lucene (1)
- SQL (2)
- JODConverter (1)
- xml (2)
- pdf2swf (1)
- flexpaper (1)
- android (2)
- jsp (5)
- mobile (1)
- weblogic (3)
- Tomcat (8)
- xss (1)
- db2 (2)
- webservice (1)
- spring (2)
- Gradle (1)
- linux (4)
- ldap (1)
- 软件工程 (1)
- 开发模型 (1)
- linux系统硬件配置查看方法 (1)
- cas (3)
- mysql (1)
- HAProxy (0)
- html (1)
- Web前端 (1)
最新评论
-
super_zou:
...
世界主要国家地区下拉菜单三级联动1 -
ldl_xz:
http://www.9958.pw/post/wenku 曾 ...
利用pdf2swf将PDF转换成SWF -
superlxw1234:
请教一下楼主,你们是如何解决使用MAgent时候,一台主Mem ...
memcached集群-magent -
头子:
中间那段关于“空隙”的解决方式很赞
HTML固定表头Table -
qiankun:
比较实用,好好学习了一下
Mybatis 在dao中获取分页的总记录数
<p>这一节重点讲jQuery对样式的处理,虽然IE同时拥有style,currentStyle与runtimeStyle,但没有一个能获取<a href="https://developer.mozilla.org/en/CSS/computed_value">used value</a>,这是原罪。直接导致的结果是处理样式,就是处理IE的非精确值问题,有时能否获得值也是个大问题。jQuery与其他类库一样,在这方面下了很大工夫,最终在这方面打败其他类库。</p>
<pre class="brush:javascript;gutter:false;toolbar:false">
//@author 司徒正美|なさみ|cheng http://www.cnblogs.com/rubylouvre/ All rights reserved
//这里的代码写得很垃圾啊,不过这样写肯定有它的道理,既然版本号已经发展1.32,那当然是那么兼容以前的代码设计的
className: {
//顺便一提className与arguments一样是个类数组
add: function( elem, classNames ) {
jQuery.each((classNames || "").split(/\s+/), function(i, className){
if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) )
elem.className += (elem.className ? " " : "") + className;
});
},
// internal only, use removeClass("class")
remove: function( elem, classNames ) {
//觉得什么都用自定义函数解决效率太低了,更何况jQuery.grep的逻辑如此复杂
if (elem.nodeType == 1)
elem.className = classNames !== undefined ?
jQuery.grep(elem.className.split(/\s+/), function(className){
return !jQuery.className.has( classNames, className );
}).join(" ") :
"";
},
// internal only, use hasClass("class")
has: function( elem, className ) {
return elem && jQuery.inArray( className, (elem.className || elem).toString().split(/\s+/) ) > -1;
}
},
//这是一个非常重要的内部函数,用于精确获取样式值
// A method for quickly swapping in/out CSS properties to get correct calculations
swap: function( elem, options, callback ) {
var old = {};//备份用
// Remember the old values, and insert the new ones
for ( var name in options ) {
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}
//交换之后调用测试函数
callback.call( elem );
//测试完后还原
// Revert the old values
for ( var name in options )
elem.style[ name ] = old[ name ];
},
//jQuery对象也有一个与它同名的方法,但这不是简单的代理
//不过实际路线图为原型的css→原型的attr→静态的attr→静态的css
//最后是curCSS,这才是真身
css: function( elem, name, force, extra ) {
//处理宽与高,因为IE不能正确返回以px为单位的精确值
if ( name == "width" || name == "height" ) {
//props用于swap,一个聪明的手段,值得学习
var val, props = { position: "absolute", visibility: "hidden", display:"block" }, which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];
function getWH() {
//Ext与Prototypet等类库也是这样实现
//在标准模式中,offsetWidth是包含padding,borderWidth与width
//在怪癖模式下,offsetWidth等于width,而width是包含padding与borderWidth
//offsetHeight同理
val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
if ( extra === "border" )
return;
jQuery.each( which, function() {
if ( !extra )
//求出paddingLeft与paddingRight之和,或paddingTop与paddingBottom之和,
//然后作为减数,去减offsetWidth或offsetHeight
val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
if ( extra === "margin" )
val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0;
else
val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
});
}
if ( elem.offsetWidth !== 0 )
getWH();
else
//如果display:none就求不出offsetWidht与offsetHeight,swap一下
jQuery.swap( elem, props, getWH );
return Math.max(0, Math.round(val));
}
//再调用jQuery.curCSS进行深加工
return jQuery.curCSS( elem, name, force );
},
curCSS: function( elem, name, force ) {
var ret, style = elem.style;
// We need to handle opacity special in IE
if ( name == "opacity" && !jQuery.support.opacity ) {
ret = jQuery.attr( style, "opacity" );
return ret == "" ?
"1" :
ret;
}
// Make sure we're using the right name for getting the float value
if ( name.match( /float/i ) )
name = styleFloat;
if ( !force && style && style[ name ] )
ret = style[ name ];//缓存结果
else if ( defaultView.getComputedStyle ) {
//标准浏览器
// Only "float" is needed here
if ( name.match( /float/i ) )
name = "float";//把cssFloat转换为float
//把驼峰风格转换为连字符风格
name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
var computedStyle = defaultView.getComputedStyle( elem, null );
if ( computedStyle )
ret = computedStyle.getPropertyValue( name );
// We should always get a number back from opacity
if ( name == "opacity" && ret == "" )
ret = "1";//把opacity设置成1
} else if ( elem.currentStyle ) {
//IE浏览器部分
var camelCase = name.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
//把连字符风格转换为驼峰风格
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
//将不是以px为单位的计算值全部转换为以px为单位,用到 Dean Edwards(Base2类库的作者)的hack
//网上有文章讲解这hach,这里不重复
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;
// Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return ret;
},
attr: function( elem, name, value ) {
// 文本,注释节点不处理
if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
return undefined;
//不处理xml文档的
var notxml = !jQuery.isXMLDoc( elem ),
//是读方法还是写方法
set = value !== undefined;
// Try to normalize/fix the name
//兼容处理,
//jQuery.props = {
//"for": "htmlFor",
//"class": "className",
//"float": styleFloat,
//cssFloat: styleFloat,
//styleFloat: styleFloat,
//readonly: "readOnly",
//maxlength: "maxLength",
//cellspacing: "cellSpacing",
//rowspan: "rowSpan",
//tabindex: "tabIndex"
//};
name = notxml && jQuery.props[ name ] || name;
// Only do all the following if this is a node (faster for style)
// IE elem.getAttribute passes even for style
if ( elem.tagName ) {
// These attributes require special treatment
var special = /href|src|style/.test( name );
// Safari mis-reports the default selected property of a hidden option
// Accessing the parent's selectedIndex property fixes it
//修正无法取得selected正确值的bug
if ( name == "selected" && elem.parentNode )
elem.parentNode.selectedIndex;
// If applicable, access the attribute via the DOM 0 way
if ( name in elem && notxml && !special ) {
if ( set ){
//不允许改写type的值
// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
throw "type property can't be changed";
elem[ name ] = value;
}
// browsers index elements by id/name on forms, give priority to attributes.
if( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) )
//getAttributeNode() 方法的作用是:通过指定的名称获取当前元素中的属性节点。
return elem.getAttributeNode( name ).nodeValue;
// elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
// http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
//IE只能tabIndex
//标准浏览器用tabindex
if ( name == "tabIndex" ) {
var attributeNode = elem.getAttributeNode( "tabIndex" );
return attributeNode && attributeNode.specified
? attributeNode.value
: elem.nodeName.match(/(button|input|object|select|textarea)/i)
? 0
: elem.nodeName.match(/^(a|area)$/i) && elem.href
? 0
: undefined;
}
return elem[ name ];
}
if ( !jQuery.support.style && notxml && name == "style" )
return jQuery.attr( elem.style, "cssText", value );
if ( set )
// convert the value to a string (all browsers do this but IE) see #1070
elem.setAttribute( name, "" + value );
//IE的getAttribute支持第二个参数,可以为 0,1,2
//0 是默认;1 区分属性的大小写;2取出源代码中的原字符串值。
//IE 在取 href 的时候默认拿出来的是绝对路径,加参数2得到我们所需要的相对路径。
var attr = !jQuery.support.hrefNormalized && notxml && special
// Some attributes require a special call on IE
? elem.getAttribute( name, 2 )
: elem.getAttribute( name );
// Non-existent attributes return null, we normalize to undefined
return attr === null ? undefined : attr;
}
// elem is actually elem.style ... set the style
// IE uses filters for opacity
if ( !jQuery.support.opacity && name == "opacity" ) {
if ( set ) {
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
//IE7中滤镜(filter)必须获得hasLayout才能生效,我们用zoom这个IE私有属性让其获得hasLayout
elem.zoom = 1;
// Set the alpha filter to set the opacity
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) + '':
"";
}
//获得其他属性,直接用DOM 0方法读写
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});
if ( set )
elem[ name ] = value;
return elem[ name ];
},
</pre>
<p>其实在curCss与attr方法中还夹着一个clean方法,总觉得clean职责太多,里面分支繁缛,看得我头晕眼花……太凌乱,这方法应该分割成几个方法条理更清晰,效率更高。</p>
<pre class="brush:javascript;gutter:false;toolbar:false">
//把字符串转换为DOM元素的纯数组
//这里的elems为字符串数组,将用文档碎片做转换
clean: function( elems, context, fragment ) {
context = context || document;
// !context.createElement fails in IE with an error but returns typeof 'object'
if ( typeof context.createElement === "undefined" )
context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
var match = /^<(\w+)\s*\/?>$/.exec(elems[0]);
if ( match )
return [ context.createElement( match[1] ) ];
}
//div是用于把字符串转换为DOM的
var ret = [], scripts = [], div = context.createElement("div");
jQuery.each(elems, function(i, elem){
if ( typeof elem === "number" )
elem += '';//转换为字符串
if ( !elem )
return;
// Convert html string into DOM nodes
if ( typeof elem === "string" ) {
// Fix "XHTML"-style tags in all browsers
//生成闭合的标签对,亦即把在XHTML中不合法的写法强制转换过来
elem = elem.replace(/(<(\w+)[^>]*?)\/>/g, function(all, front, tag){
//但对于abbr|br|col|img|input|link|meta|param|hr|area|embed等元素不修改
return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
all :
front + "></" + tag + ">";
});
// Trim whitespace, otherwise indexOf won't work as expected
//将“ <div> ”去掉两边的空白“<div>”,用于下面的indexOf
var tags = elem.replace(/^\s+/, "").substring(0, 10).toLowerCase();
var wrap =
// option or optgroup
//option与optgroup的直接父元素一定是select
!tags.indexOf("<opt") &&
[ 1, "<select multiple='multiple'>", "</select>" ] ||
//legend的直接父元素一定是fieldset
!tags.indexOf("<leg") &&
[ 1, "<fieldset>", "</fieldset>" ] ||
//thead,tbody,tfoot,colgroup,caption的直接父元素一定是table
tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[ 1, "<table>", "</table>" ] ||
//tr的直接父元素一定是tbody,
!tags.indexOf("<tr") &&
[ 2, "<table><tbody>", "</tbody></table>" ] ||
//<thead> matched above
//td与th的直接父元素一定是tr
(!tags.indexOf("<td") || !tags.indexOf("<th")) &&
[ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||
//col一定是colgroup
!tags.indexOf("<col") &&
[ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||
// IE can't serialize <link> and <script> tags normally
!jQuery.support.htmlSerialize &&
[ 1, "div<div>", "</div>" ] ||
[ 0, "", "" ];
// Go to html and back, then peel off extra wrappers
div.innerHTML = wrap[1] + elem + wrap[2];
// Move to the right depth
while ( wrap[0]-- )
div = div.lastChild;
//IE会自动添加tbody,要特殊处理
// Remove IE's autoinserted <tbody> from table fragments
if ( !jQuery.support.tbody ) {
// String was a <table>, *may* have spurious <tbody>
var hasBody = /<tbody/i.test(elem),
tbody = !tags.indexOf("<table") && !hasBody ?
div.firstChild && div.firstChild.childNodes :
// String was a bare <thead> or <tfoot>
wrap[1] == "<table>" && !hasBody ?
div.childNodes :
[];
for ( var j = tbody.length - 1; j >= 0 ; --j )
if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length )
tbody[ j ].parentNode.removeChild( tbody[ j ] );
}
// IE completely kills leading whitespace when innerHTML is used
if ( !jQuery.support.leadingWhitespace && /^\s/.test( elem ) )
div.insertBefore( context.createTextNode( elem.match(/^\s*/)[0] ), div.firstChild );
//div中的所有节点都转换为数组
elem = jQuery.makeArray( div.childNodes );
}
if ( elem.nodeType )
//过滤非元素节点的节点
ret.push( elem );
else
//把符合要求的节点加入ret中
ret = jQuery.merge( ret, elem );
});
if ( fragment ) {
for ( var i = 0; ret[i]; i++ ) {
//处理script元素
if ( jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
} else {
if ( ret[i].nodeType === 1 )
ret.splice.apply( ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) );
fragment.appendChild( ret[i] );
}
}
return scripts;
}
return ret;
},
发表评论
-
js图片滚动
2012-02-02 13:40 836js图片滚动 -
js 产品图片放大预览
2012-02-02 13:39 1323js 产品图片放大预览 -
bigcolorpicker_2.2
2011-12-22 14:20 864bigcolorpicker_2.2 -
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2011-12-20 13:53 973jQuery中文入门指南,翻译加实例,jQuery的起点教程 ... -
jQuery技巧
2011-12-20 13:36 792一、简介 1.1、概述 ... -
jQuery select操作控制方法小结
2011-12-08 19:06 1136很多朋友对jquery select的操作很有兴趣,但网上 ... -
EasyUI学习文档
2011-12-05 10:37 1095EasyUI版主文档 -
jquery插件开发
2011-07-01 08:53 541jquery插件开发 -
jQueryAPI-1.4.1.chm
2011-06-22 14:37 872jQueryAPI-1.4.1.chm -
jQuery1.4.1 中文开发文档
2011-04-10 11:51 840jQuery1.4.1 中文开发文档 -
jQuery源码学习笔记三
2010-03-18 10:25 1259还有一点,jQuery.prototype ... -
jQuery源码学习笔记二
2010-03-18 10:25 1563前文提要,jQuery用init方法创建的,它是jQuery. ... -
jQuery源码学习笔记一
2010-03-18 10:24 1444不知该起什么题目,随便吧。不过我没心情逐一介绍其API,那是文 ...
相关推荐
在本篇jQuery EasyUI的学习笔记中,我们将深入探讨如何实现右键菜单以及冻结列的功能,这对于构建用户交互丰富的Web应用程序至关重要。jQuery EasyUI是一个基于jQuery的UI库,它提供了大量的预定义组件,使得开发者...
**jQuery EasyUI 学习笔记(十):深入源码** 在Web开发中,jQuery EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建交互式的用户界面。本篇笔记主要关注jQuery EasyUI的源码...
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
**jQuery EasyUI 学习笔记(十二):深入解析源码** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列轻量级、易于使用的组件,帮助开发者快速构建用户界面。在这一章节的学习笔记中,我们将深入探讨...
**jQuery EasyUI 学习笔记珍藏版** jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了丰富的UI组件,使得构建用户界面变得更加简单高效。这个珍藏版的学习笔记涵盖了广泛的jQuery EasyUI主题,旨在...
在本篇JQueryEasyUI的学习笔记中,我们将深入探讨如何利用这个强大的JavaScript库来实现一些常见的数据操作功能,包括批量删除、行内编辑以及自定义编辑器方法。JQueryEasyUI是一个基于jQuery的UI框架,它提供了一...
《jQuery学习笔记源码——初识与实践》 在当今的Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...
在“JQueryEasyUI学习笔记(十五)异步tree 源码”中,我们可以看到关于如何实现这一功能的具体步骤和源代码解析。 首先,我们需要理解异步Tree的基本结构。每个节点都包含一个标识符(id)、文本(text)以及可选...
《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
本周公司技术讲座轮到我了,准备说说现在流行的jQuery,下面是概要提纲,关键是看custom.js,已上传源码,程序中“//##”是分段用的,大家可以根据每一段取消注释,然后找到相应的id或class名查看效果。
《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...
《jQuery读书笔记》 在深入理解JavaScript库的过程中,jQuery无疑是一个绕不开的重要角色。这篇读书笔记将基于jQuery的API文档,结合实际应用,...深入学习和理解jQuery,将有助于提升开发者在前端领域的技能水平。
《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...
本学习笔记将聚焦于jQuery的核心功能之一:常规选择器。通过理解并熟练运用这些选择器,你可以更加高效地定位和操纵网页中的元素,提升开发效率。 1. 元素选择器: jQuery的元素选择器允许我们根据HTML标签名来...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
《jQuery源码阅读笔记》是一份深入探讨jQuery库核心机制的文档,旨在帮助开发者理解这个广泛使用的JavaScript库的内部工作原理。jQuery自2006年发布以来,因其简洁的API和强大的功能,成为了前端开发的必备工具。这...
总的来说,jQuery源码的组织清晰,设计精巧,其强大的功能和良好的可扩展性使其成为JavaScript开发中的首选库。通过对源码的深入理解,开发者可以更好地利用jQuery,提升开发效率,同时也能从中学习到JavaScript编程...
由于工作需要,所以研究了一段时间的jQuery,参考了大量的宝贵资源,...1、学习开发时的源码 知识点和注释应该是比较全的 2、最后整理的一个文档,可直接打印,再好的记忆,时间一长也会忘记,所以打印是一个不错的主意!
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识,包括其核心概念、选择器、DOM操作、事件...