文档分类：行业资料 > 轻工业/手工业 Jquery源码简单分析.doc

在线文档经过高度压缩，下载原文更清晰。

淘豆网网友xxj16588近日为您收集整理了关于Jquery源码简单分析的文档，希望对您的工作和学习有所帮助。以下是文档介绍：Jquery源码简单分析 Jquery 源码简单分析谢忠持Jquery 是国外的一个开源 js 类库,大概 4500 行左右的代码。J 是指 javascript,query 是指查询,jquery 是指 javascript 的查询。我们知道 html 是基于 dom 模型的,我们做开发,经常要操作元素。那么,通常的做法是先查询到要操作的元素,再对元素进行操作。Jquery 不但提供了非常方便的方式让我们查询到元素,而且提供了很多实用的方法让我们操作元素。Jquery 虽然好用实用。但如果不了解如果不了解其架构原理和实现方式,用起来难免一头雾水。而我们开发过程中碰到的问题也是多种多样,很多时候需要查看源代码,了解 jquery 的实现机制。下面这个例子是我从 jquery 中提取出来的核心代码。我准备对以下代码加以解释,以理解 jquery。期望看完本文读者可以明白:1. 明白 jquery 对象和 dom 对象的关系2. jquery 对象是如何产生的3. jquery 那么多方法,是怎么给添加进去的4. 编写 jqeury 插件的两种方式,以及为什么可以这么编写对读者的期望:1.(来源：淘豆网[]) 至少看过一遍《javascript 权威指南第四版》或者之类的书籍,有 javascipt比较系统的知识体系2. 能理解 html 的 dom 模型3. 对 css,xhml 比较熟悉以下是 jquery 核心代码,通过注释的方式说明。<script type="text/javascript">/**从这里可以看出,jquery是个函数。当调用这个函数后,会返回$.fn.init() 这个函数的一个对象。$(‘name_input’). val () 说明调用jquery函数,传入id为name_input,val是jquery的方法。返回当前元素的值。请注意: $只是个函数名,只是为了简单方便,所以用了$,在这里即是jquery对象*/$ = function( selector ) {return new $.fn.init( selector );};$.fn = $.prototype = {init: function( selector ) {(来源：淘豆网[])//按照id来查找元素,并且放到init() 的对象中//如果有多个元素,那就是 this[0], this[1]…//这只是产生jquery对象的一种方式,从这里也可以看到dom对象//被放到jquery对象里面。this[0] = document.getElementById(selector);return this; //返回init对象},//把当前方法放到挂到jquery的prototype下和$.fn下val: function(val){if(val=='' || val == null){return this[0].value;}else{this[0].value = val;}}}//这一步最关键,把$.fn下的方法挂到$.fn.init.prototype下,//那么也就是说 init 的对象(即jquery对象)的可以调用$.fn ,//$.prototype的方法。//也就说明了:要给jquery增加方法,就可以通过给$.fn增加方法来实现//(来源：淘豆网[])这正是jquery插件的一个扩展点$.fn.init.prototype = $.fn;//简单属性拷贝来实现继承$.extend = $.fn.extend = function(options){for ( var name in options ) {this[name] = options[name];}}//插件方式一:把方法直接挂在$下,相当于这里的方法可以直接调用//不需要产生jquery对象$.extend({min: function(a, b) { return a < b ? a : b; },max: function(a, b) { return a > b ? a : b; }});//插件方式二:把方法挂到$.fn下面,来给jquery增加方法,要使用这些方//法,必须产生jquery对象,通过jquery对象来调用。$.fn.extend({showValue:function(){alert(this[0].value);}});</script>

播放器加载中，请稍候...
系统无法检测到您的Adobe Flash Player版本
建议您在线安装最新版本的Flash Player 在线安装

更多>>该用户其他文档

下载所得到的文件列表

Jquery源码简单分析.doc

文档介绍：
Jquery源码简单分析 Jquery 源码简单分析谢忠持Jquery 是国外的一个开源 js 类库,大概 4500 行左右的代码。J 是指 javascript,query 是指查询,jquery 是指 javascript 的查询。我们知道 html 是基于 dom 模型的,我们做开发,经常要操作元素。那么,通常的做法是先查询到要操作的元素,再对元素进行操作。Jquery 不但提供了非常...Jquery源码简单分析 Jquery 源码简单分析谢忠持Jquery 是国外的一个开源 js 类库,大概 4500 行左右的代码。J 是指 javascript,query 是指查询,jquery 是指 javascript 的查询。我们知道 html 是基于 dom 模型的,我们做开发,经常要操作元素。那么,通常的做法是先查询到要操作的元素,再对元素进行操作。Jquery 不但提供了非常方便的方式让我们查询到元素,而且提供了很多实用的方法让我们操作元素。Jquery 虽然好用实用。但如果不了解如果不了解其架构原理和实现方式,用起来难免一头雾水。而我们开发过程中碰到的问题也是多种多样,很多时候需要查看源代码,了解 jquery 的实现机制。下面这个例子是我从 jquery 中提取出来的核心代码。我准备对以下代码加以解释,以理解 jquery。期望看完本文读者可以明白:1. 明白 jquery 对象和 dom 对象的关系2. jquery 对象是如何产生的3. jquery 那么多方法,是怎么给添加进去的4. 编写 jqeury 插件的两种方式,以及为什么可以这么编写对读者的期望:1. 至少看过一遍《javascript 权威指南第四版》或者之类的书籍,有 javascipt比较系统的知识体系2. 能理解 html 的 dom 模型3. 对 css,xhml 比较熟悉以下是 jquery 核心代码,通过注释的方式说明。<script type="text/javascript">/**从这里可以看出,jquery是个函数。当调用这个函数后,会返回$.fn.init() 这个函数的一个对象。$(‘name_input’). val () 说明调用jquery函数,传入id为name_input,val是jquery的方法。返回当前元素的值。请注意: $只是个函数名,只是为了简单方便,所以用了$,在这里即是jquery对象*/$ = function( selector ) {return new $.fn.init( selector );};$.fn = $.prototype = {init: function( selector ) {//按照id来查找元素,并且放到init() 的对象中//如果有多个元素,那就是 this[0], this[1]…//这只是产生jquery对象的一种方式,从这里也可以看到dom对象//被放到jquery对象里面。this[0] = document.getElementById(selector);return this; //返回init对象},//把当前方法放到挂到jquery的prototype下和$.fn下val: function(val){if(val=='' || val == null){return this[0].value;}else{this[0].value = val;}}}//这一步最关键,把$.fn下的方法挂到$.fn.init.prototype下,//那么也就是说 init 的对象(即jquery对象)的可以调用$.fn ,//$.prototype的方法。//也就说明了:要给jquery增加方法,就可以通过给$.fn增加方法来实现//这正是jquery插件的一个扩展点$.fn.init.prototype = $.fn;//简单属性拷贝来实现继承$.extend = $.fn.extend = function(options){for ( var name in options ) {this[name] = options[name];}}//插件方式一:把方法直接挂在$下,相当于这里的方法可以直接调用//不需要产生jquery对象$.extend({min: function(a, b) { return a < b ? a : b; },max: function(a, b) { return a > b ? a : b; }});//插件方式二:把方法挂到$.fn下面,来给jquery增加方法,要使用这些方//法,必须产生jquery对象,通过jquery对象来调用。$.fn.extend({showValue:function(){alert(this[0].value);}});</script> 内容来自淘豆网转载请标明出处.