- 浏览: 416988 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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中获取分页的总记录数
还有一点,jQuery.prototype第一个阶级的能力部署就完成了。就像一个茧,jQuery对象包裹着一个或复数个DOM对象,jQuery对象的能力来自其prototype,而其prototype的方法则是jQuery.prototype的一个副本。
//对当前jQuery中的DOM进行slice操作,并把参数传入this.prevObject中
slice: function() {
return this.pushStack( Array.prototype.slice.apply( this, arguments ),
"slice", Array.prototype.slice.call(arguments).join(",") );
},
//与上面差不多
map: function( callback ) {
return this.pushStack( jQuery.map(this, function(elem, i){
return callback.call( elem, i, elem );
}));
},
//把之前放入this.preveObject的DOM数组取出来,加入现在的DOM数组中
andSelf: function() {
return this.add( this.prevObject );
},
domManip: function( args, table, callback ) {
if ( this[0] ) {
//如果jQuery对象有DOM元素,则取得其文档对象,调用其createDocumentFragment方法
var fragment = (this[0].ownerDocument || this[0]).createDocumentFragment(),
//这里的args恒为arguments对象,用jQuery.clean获得纯DOM元素数组
scripts = jQuery.clean( args, (this[0].ownerDocument || this[0]), fragment ),
first = fragment.firstChild;
if ( first )
for ( var i = 0, l = this.length; i < l; i++ )
//callback传入一个元素与一个文档
callback.call( root(this[i], first), this.length > 1 || i > 0 ?
fragment.cloneNode(true) : fragment );
if ( scripts )
jQuery.each( scripts, evalScript );
}
return this;
//root用于检测当前元素是否为table,是就检测tbody是否存在,没有则创建
function root( elem, cur ) {
return table && jQuery.nodeName(elem, "table") && jQuery.nodeName(cur, "tr") ?
(elem.getElementsByTagName("tbody")[0] ||
elem.appendChild(elem.ownerDocument.createElement("tbody"))) :
elem;
}
}
};
//把jQuery.prototype的能力加持到jQuery.prototype.init.prototype上
jQuery.fn.init.prototype = jQuery.fn;
至此,jQuery对象第一阶级的能力就告一段落,要不对象体就很长。下面添加新的能力时就用jQuery.extend求添加,就像Prototype 的Object.extend,mootool的Native.implement,Base2的Base.extend,Ext的apply,凡此种 种,把一个属性包或独立的方法名与方法体作为参数加入目标对象中。因为光是在对象体搞(这里是原型),没有私有变量可言,有时我们很需要这些作为胶水在连 接我们的方法,因此打散写有打散写的好处。更何况,jQuery类库都是整个包围在一个闭包中,这些散乱的函数与变量不会逃逸到外面去,与我们的业务逻辑 中用的函数或变量发生命名冲突。
//jQuery的能力扩展的核心函数
//这要求存在继承者与授与者两方,一般来说继承者在左,授与者在右,授与者通常是一个简单的属性包
jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {//如果第一个参数是布尔值
deep = target;
target = arguments[1] || {};//设置继承者
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) )
target = {};
//如果没有指定要继承能力的对象,则扩展到自身
// extend jQuery itself if only one argument is passed
if ( length == i ) {
target = this;
--i;
}
for ( ; i < length; i++ )
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null )
// Extend the base object
for ( var name in options ) {
var src = target[ name ], copy = options[ name ];
// Prevent never-ending loop
if ( target === copy )
continue;
//如果是深复制,某对象的属性也是对象并且不是HTMLElement,则把它逐一分解拷到继承者
// Recurse if we're merging object values
if ( deep && copy && typeof copy === "object" && !copy.nodeType )
target[ name ] = jQuery.extend( deep,
// Never move original objects, clone them
src || ( copy.length != null ? [ ] : { } )
, copy );
// Don't bring in undefined values
else if ( copy !== undefined )
target[ name ] = copy;
}
// Return the modified object
return target;
};
定义几个位于闭包的顶层变量,准备新一轮的功能扩展
// exclude the following css properties to add px
//将转换成px单位
var exclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
// cache defaultView
defaultView = document.defaultView || {},
toString = Object.prototype.toString;
//第二轮能力扩展,这次是添加一系列静态方法
jQuery.extend({
noConflict: function( deep ) {
//引入jQuery类库后,闭包外面的window.$与window.jQuery都储存着一个函数,
//它是用来生成jQuery对象或在domReady后执行里面的函数的
//回顾最上面的代码,在还没有把function赋给它们时,_jQuery与_$已经被赋值了,
//因此它们俩的值一定必然是undefined
//因此这种放弃控制权的技术很简单,就是用undefined把window.$里面的jQuery系的函数清除掉
//这时Prototype或mootools的$就可以明门正娶了
window.$ = _$;//相当window.$ = undefined
//如果连你的程序也有一个叫jQuery的东西呢,jQuery可以大方地连这个也让渡出去
//这时就要为noConflict添加一个布尔值,为true
if ( deep )
//但我们必须用一个东西要接纳jQuery对象与jQuery的入口函数
//闭包里面的东西除非被window等宿主对象引用,否则就是不可见的
//因此我们把闭包里面的jQuery return出去,外面用一个变量接纳就是
window.jQuery = _jQuery;//相当window.jQuery = undefined
return jQuery;
},
//外国近年来新发现的检测技术toString
isFunction: function( obj ) {
return toString.call(obj) === "[object Function]";
},
isArray: function( obj ) {
return toString.call(obj) === "[object Array]";
},
// check if an element is in a (or is an) XML document
//检测是否为XML的文档对象
isXMLDoc: function( elem ) {
return elem.nodeType === 9 && elem.documentElement.nodeName !== "HTML" ||
!!elem.ownerDocument && jQuery.isXMLDoc( elem.ownerDocument );
},
// Evalulates a script in a global context
//把一段文本解析成脚本,利用script元素的text属性
globalEval: function( data ) {
if ( data && /\S/.test(data) ) {
// Inspired by code by Andrea Giammarchi
// http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
//自行创建一个script元素,如果支持text属性则直接赋,不支持就用标准方法在里面添加文本
script.type = "text/javascript";
if ( jQuery.support.scriptEval )
script.appendChild( document.createTextNode( data ) );
else
script.text = data;
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709).
head.insertBefore( script, head.firstChild );
head.removeChild( script );
}
},
//检测elem的nodeName是否等于第二个参数name
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() == name.toUpperCase();
},
// args is for internal usage only
each: function( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( length === undefined ) {
//如果是对象就对其值调用方法,如果调用函数没有返回值或返回false就跳出循环
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
} else
//如果是数组
for ( ; i < length; )
if ( callback.apply( object[ i++ ], args ) === false )
break;
//同上,只不过没有传入第三个参数
// A special, fast, case for the most common use of each
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
},
//用于返回各种属性
prop: function( elem, value, type, i, name ) {
// Handle executable functions
if ( jQuery.isFunction( value ) )
value = value.call( elem, i );
// Handle passing in a number to a CSS property
return typeof value === "number" && type == "curCSS" && !exclude.test( name ) ?
value + "px" :
value;
},
接着下来就是对样式的操作了,样式在WEB开发中非常重要,我留在下一节重点讲
发表评论
-
js图片滚动
2012-02-02 13:40 826js图片滚动 -
js 产品图片放大预览
2012-02-02 13:39 1320js 产品图片放大预览 -
bigcolorpicker_2.2
2011-12-22 14:20 853bigcolorpicker_2.2 -
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2011-12-20 13:53 959jQuery中文入门指南,翻译加实例,jQuery的起点教程 ... -
jQuery技巧
2011-12-20 13:36 787一、简介 1.1、概述 ... -
jQuery select操作控制方法小结
2011-12-08 19:06 1130很多朋友对jquery select的操作很有兴趣,但网上 ... -
EasyUI学习文档
2011-12-05 10:37 1090EasyUI版主文档 -
jquery插件开发
2011-07-01 08:53 537jquery插件开发 -
jQueryAPI-1.4.1.chm
2011-06-22 14:37 862jQueryAPI-1.4.1.chm -
jQuery1.4.1 中文开发文档
2011-04-10 11:51 835jQuery1.4.1 中文开发文档 -
jQuery源码学习笔记四
2010-03-18 10:26 2497<p>这一节重点讲jQuery对样式的处理,虽然I ... -
jQuery源码学习笔记二
2010-03-18 10:25 1557前文提要,jQuery用init方法创建的,它是jQuery. ... -
jQuery源码学习笔记一
2010-03-18 10:24 1438不知该起什么题目,随便吧。不过我没心情逐一介绍其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主题,旨在...
《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
在本篇JQueryEasyUI的学习笔记中,我们将深入探讨如何利用这个强大的JavaScript库来实现一些常见的数据操作功能,包括批量删除、行内编辑以及自定义编辑器方法。JQueryEasyUI是一个基于jQuery的UI框架,它提供了一...
《jQuery学习笔记源码——初识与实践》 在当今的Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...
在“JQueryEasyUI学习笔记(十五)异步tree 源码”中,我们可以看到关于如何实现这一功能的具体步骤和源代码解析。 首先,我们需要理解异步Tree的基本结构。每个节点都包含一个标识符(id)、文本(text)以及可选...
本学习笔记将聚焦于jQuery的核心功能之一:常规选择器。通过理解并熟练运用这些选择器,你可以更加高效地定位和操纵网页中的元素,提升开发效率。 1. 元素选择器: jQuery的元素选择器允许我们根据HTML标签名来...
本周公司技术讲座轮到我了,准备说说现在流行的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学习笔记** 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操作、事件...