关于JQuery作者John Resig(1984.5.8),Mozilla基金会Javascript技术支持。作者的主页:http://ejohn.org/,有影响的网站。
2006年发布,目前是1.4.2版本。
26.95%的网站使用JQuery。
JQuery及其相关项目由Mozilla基金会支持,得到了包括Google,微软,惠普,IBM等的认可。
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );//
},
jQuery是一个Function。在JavaScript中,Function是一种特殊的对象,这个对象可以有自己的属性。
但是JQuery(parameters)方法调用的结果却是一个jQuery.fn.init对象。注意此处的new Function用法,实际上返回了一个对象实例。
这个对象实例的类型是jQuery.fn.init,而不是JQuery。--至少现在不是。
往下看:
jQuery.fn = jQuery.prototype = {init:function (){},...}
这一段意味着,jQuery.fn 和jQuery.prototype是一样的,都是jQuery的prototype。prototype是JavaScript实现类型继承的机制。简单地说,jQuery.prototype这个对象有的属性,jQuery对象实例也继承过来了。注意上文提到过,jQuery是一个方法,也就是Function对象。jQuery和jQuery对象实例是不同的。jQuery对象实例是调用new jQuery(..)产生的。jQuery作为一个Function对象,是不能继承jQuery.prototype的属性的,Function对象有自己的prototype。也就是说,jQuery.init是undefined,这点应该没有问题的。但是var x=new jQuery();x就有了jQuery.prototype这个对象的所有属性,包括init方法,length等属性。
jQuery.fn.init.prototype = jQuery.fn;
这句话很关键。
jQuery是一个方法,jQuery(...)方法调用的结果是一个jQuery.fn.init对象实例,这是上文提到的。上面这句话意味着,jQuery.fn.init对象实例的父类是jQuery.fn。也就是说,jQuery.fn有的属性,jQuery.fn.init的对象实例也有。这说明,如果var x=jQuery(xxx);那么x将有jQuery.fn对象的所有属性,包括init方法,length属性等。跟var x=new jQuery()的效果一样。这样之后,发现,jQuery方法就是一个工厂方法,产生jQuery对象实例(其实是jQuery.fn.init对象实例,但是,既然jQuery.fn.init对象实例的父类是jQuery.prototype也就是jQuery对象实例的父类,意味着jQuery对象实例和jQuery.fn.init对象实例有共同的父类,就把它们当作是一样的吧)。
继续:
jQuery.extend = jQuery.fn.extend = function() {...}
这里定义了jQuery核心的一个重要的extend方法。这里不厌其烦地再提一遍,jQuery是一个Function对象,这句代码之后,这个Function对象有了一个新的属性。而所有jQuery的实例,也就是工厂方法jQuery(...)或者new jQuery产生的对象都具有了extend方法。
这个extend的作用是,扩展jQuery对象实例的功能,这成为jQuery插件机制的基础。当然,也可以直接拿来用。jQuery.extend(object1,object2)之后,object1的属性融合了object2的属性,而object2保持不变。
jQuery.extend({noConflict:function(){...},...})
这句的作用是,扩展jQuery这个Function对象的属性,使他具有了熟悉的noConflict等方法,把这些方法当作是工具方法吧,因为jQuery框架的主角是jQuery实例。
browserMatch = jQuery.uaMatch( userAgent );
这是jQuery用来做浏览器检测的。这个功能主要通过navigator.userAgent字符串来判断的,仅供参考。
下来:
rootjQuery = jQuery(document);
这个jQuery的实例在core.js内部使用,并没有在其他地方暴露。
最后一句:
window.jQuery = window.$ = jQuery;
将jQuery(即$)这个Function对象暴露在全局范围内。
以上是粗略的分析。
下面进行更细致的分析。
jQuery.fn.init是核心方法之一。
// Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
每一个jQuery对象实例都有context和selector,length属性。而且,每一个jQuery对象都是一个索引"数组",这个数组里面包含的内容是DOM元素。这是很重要的,因为jQuery的一个设计理念就是,获取DOM元素(现在发现存在索引数组里面),并且操作这些DOM元素(manipulation.js和traversing.js等等负责这些任务)。
无疑,上面的代码效率很高。
...
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
jQuery(function(){...})意思是在DOM加载完之后执行一个方法。
pushStack方法,在执行eq,first,last等方法之后,调用end之后可以回退到之前的jQuery对象。
jQuery.fn.extend(.....
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},
这个map方法直接把原来jQuery对象里保存的DOM元素转换成别的元素,通过callback方法。pushStack在此意味着这map之后还可以回退到原来的jQuery对象实例。
jQuery.extend(.....
noConflict: function( deep ) {
window.$ = _$;
if ( deep ) {
window.jQuery = _jQuery;
}
return jQuery;
},
这个是为了防止冲突。
注意在一开始的时候,已经保存了原来可能已经存在的jQuery,$变量:
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
此处将其还原。
makeArray(arr),将一个Array-like的元素变成一个Array。如果arr含有length,并且含有索引属性,转化就是有意义的。
merge(first,second),将数组(或者类似数组的对象)second的元素拷到first数组的最后。
grep: function( elems, callback, inv ) 通过callback过滤掉elems中的某些元素。callback的返回值将被标准化为true或false。如果callback的返回值和inv相等,相应的元素将被过滤掉。inv默认是false。
map: function( elems, callback, arg ) 将elems中的元素用callback(value,index)转化,然后返回转化后的数组,如果callback的返回值是null,相应元素将被过滤。
proxy: function( fn, proxy, thisObject ) 将方法fn的执行环境(this)设成proxy,使用fn.call(proxy,arguments)实现。
相关推荐
总的来说,通过分析jqGrid的源码,开发者不仅可以定制化自己的表格功能,还可以学习到jQuery、JavaScript以及前端数据管理的高级技巧。在实际开发中,掌握jqGrid的源码将大大提高工作效率,同时也能提升对前端技术的...
在"ASP.NET源码——JQuery功能测试源码.zip"这个压缩包中,我们很可能会找到一些示例代码,用于展示如何在ASP.NET项目中集成和使用jQuery。 在ASP.NET项目中,jQuery主要被用来增强用户体验,通过AJAX技术实现页面...
在这里,你可以找到JavaScript文件(如“ui.core.js”,“ui.widget.js”,以及各个组件的JS文件),这些文件定义了jQuery UI的核心功能和各个组件的行为。同时,这个目录还有用于开发和调试的未压缩和未合并的版本...
- 引入jQuery和jsTree库的CSS和JavaScript文件。 - 在HTML中定义下拉菜单元素,可能包含嵌套的`<option>`元素,表示树的节点。 - 使用jQuery选择下拉菜单元素,并调用`.jstree()`方法初始化树形结构。 - 配置jsTree...
Jquery的网络资源丰富,但Baidu了很久,很难找到那种完全深入地分析Jquery源码的文稿。倒是Jquery的开发者,John Resi的《Pro Javascript Techniques》涉及到Jquery的源码的分析,但是其主指还是在于JavaScript的...
《深入解析jQuery 1.11源码》 jQuery,作为JavaScript库的杰出代表,以其简洁易用的API,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。...对jQuery源码的探索,是提升JavaScript开发能力的重要步骤。
- **js** 子文件夹:包含了jQuery UI的核心JavaScript库,以及各个组件的源码。例如,`ui.core.js`是jQuery UI的基础,提供了一些基本功能;`ui.widget.js`定义了jQuery UI插件的通用构造函数;其他如`ui.draggable...
在深入探讨jQuery 2.0.3源码中core部分的整体架构之前,我们先简要回顾一下jQuery框架的核心功能和其设计思想。jQuery是一个广泛使用的JavaScript库,主要用于简化HTML文档遍历和操作、事件处理、动画和Ajax交互。它...
3. js 和 css 文件:压缩包内的 "js" 文件夹包含了所有核心的 jQuery UI JavaScript 文件,如 "ui.core.js", "ui.widget.js" 和各个组件的实现文件。而 "css" 文件夹则包含基础样式和主题文件,如 "themes/base/...
3. **js** 文件夹:这个文件夹包含jQuery UI的JavaScript源码。主要有两个关键部分:`jquery-ui.js`是主库文件,实现了所有UI组件和功能;`jquery.ui.core.js`、`jquery.ui.widget.js`等较小的文件则代表各个组件的...
本示例"基于jquery.pagination插件.rar"提供了一种方法,利用JavaScript库jQuery和其插件jquery.pagination.js来实现在ASP.NET环境下的无刷新分页。 **jQuery Pagination 插件** jQuery pagination 是一个轻量级的...
- **核心函数**:研究`ui.core.js`,理解jQuery UI的基础架构和核心功能。 - **组件实现**:每个组件都有自己的JS和CSS文件,如`ui.dialog.js`和`ui.dialog.css`,分析这些文件可以了解组件的工作原理。 - **事件...
1. **模块化设计**:jQuery源码采用模块化设计,分为多个部分,如`selector.js`(选择器引擎)、`core.js`(核心功能)、`traversing.js`(遍历DOM)等,这有利于代码的组织和维护。 2. **函数封装**:jQuery将所有...
`js` 文件夹内则包含了 jQuery UI 的核心 JavaScript 文件。主要分为三类:`ui.core.js` 是基础框架,`ui.widget.js` 提供了构建组件的基础方法,而其他如 `ui.draggable.js`、`ui.resizable.js` 等则是具体组件的...
通过以上对jQuery源码的部分分析,我们可以看出jQuery在设计上考虑了兼容性、性能以及安全性,采用了大量的正则表达式进行字符串和DOM元素的处理,并提供了丰富的工具函数和API来简化JavaScript的编程工作。
- **js** 子目录:存放未压缩的 JavaScript 文件,如 "ui/jquery.ui.core.js", "ui/jquery.ui.widget.js" 等,这些是 jQuery UI 的核心模块。 - **css** 子目录:包含了未压缩的 CSS 文件,如 "themes/base/...
例如,如果你只需要Autocomplete功能,可以使用`ui/themes/base/core.css`,`ui/themes/base/autocomplete.css`,`ui/jquery.ui.core.js`和`ui/jquery.ui.widget.js`,以及`ui/jquery.ui.autocomplete.js`。...
"js" 目录包含了 jQuery UI 的核心 JavaScript 文件。主要的库文件 "jquery-ui.js" 包含了所有组件和效果的功能。此外,还可能有分模块的 JS 文件,如 "ui.core.js", "ui.widget.js" 等,它们是构建组件的基础。...
1. **JavaScript文件**:jqPlot的主要逻辑在JavaScript文件中实现,如`jqplot.core.js`是核心库,`jqplot.dateAxisRenderer.js`等则是扩展功能或特定渲染器。 2. **CSS文件**:`jqplot.css`定义了图表的基本样式,...
`js` 文件夹存放 JavaScript 文件,其中 `ui/jquery.ui.core.js` 是核心模块,其他如 `ui/jquery.ui.widget.js`、`ui/jquery.ui.mouse.js` 等则为各个组件的具体实现;`css` 文件夹包含样式表,用于定义组件的视觉...