JQuery 开发笔记

本文深入分析了jQuery的工作原理,包括其加载执行机制、$符号的处理方式、自定义扩展接口的实现逻辑等,并详细介绍了jQuery.fn对象的作用及each方法的工作流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[b][size=medium]7.页面js调用jQuery后,对其返回对象的分析[/size][/b]
当引导完jQuery的js文件,jQuery在他的js文件代码中,利用js匿名函数运行机制,将变量名为jQuery的变量暴露给了整个页面,是个全局性变量。该变量指向一个function,方法如下:

var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},


该方法调用jQuery.fn.init方法,jQuery.fn.init方法返回一个this,这个this指向调用init方法的对象(即jQuery.fn),最终返回给页面的是jQuery.fn对象。jQuery.fn包含了自定义的一些方法,还包含了根据selector找到的html元素构成的数组。jQuery.fn对象向页面屏蔽了它的父类jQuery的内部方法,jQuery.fn的一些方法会调用父类jQuery的方法去完成主要逻辑。

[b][size=medium]6.jquery each方法[/size][/b]
each 方法会将循环当前jQuery.fn对象中html元素数组,将每个数组对象作为callback的第一个参数(即callback中this指向的对象),将数组索引值和每个数组对象作为第二、第三个参数传给callback(即callback中传入参数的第一、第二个参数)。

[b][size=medium]5.jQuery.sheet 插件分析[/size][/b]
jquery.sheet.js,完整项目参见附件:editor-0412.zip

[b]to-do:[/b]
公式内容的转换原理

[b]done:[/b]
主要流程图
指定json或html输入源,将其传给jQuery.sheet插件进行解析
在创建table的同时,会建立对应的一个三维数组,结构如下:
jS.spreadsheets[sheet][row][col] = {
formula: formula,
value: value,
calcCount: (calcCount ? calcCount : 0),
calcLast: (calcLast ? calcLast : -1)
};
切换单元格或标签页时,会调用calc方法对单元格全部进行重新赋值动作,calc调用updateCellValue方法,updateCellValue方法会把三维数组中的值付给对应table中的单元格,主要目的是完成公式字面内容到公式实际效果内容的转换。
在table中某一个单元格输入内容时,与jS.obj.formula()联动。jS.obj.formula()位于表格编辑区与工具栏之间的长形输入框。这个动作在cellEditDone方法中完成。
自己扩展插件功能,在给单元格赋值时,需要向table的td和对应的三维数组同时赋值。以便在切换单元格或标签页时,保证table的单元格内容正常显示。

[b][size=medium]4. jQuery脚本文件的语法分析[/size][/b]
[size=medium][b]4.1 jQuery的加载执行[/b][/size]

(function(){})();

针对上面的这句代码,前面的()就是一个求值,括号内的值类型是function。 js里面函数也是变量。 函数变量后面加括号,当然就是执行函数了。按照ecma 3.0规范,函数也是一个对象,而“()”(写在函数后面)则是运算符,表示“执行”。


[b][size=medium]3. jQuery中$的处理[/size][/b]
$符号已经在jQuery中被重新赋予了新的含义,它指向了jQuery对象。参见第8373行,

window.jQuery = window.$ = jQuery;

jQuery会在页面上生成全局的jQuery函数对象,可以向jQuery的构造器方法中传入适当参数去执行。参数可以是一个function对象、字符串形式的页面元素的选择条件值等等。

[b][size=medium]2. jQuery的扩展接口[/size][/b]
jQuery 1.5.2实现自定义扩展接口的逻辑处理代码在第309行的函数中,

jQuery.extend = jQuery.fn.extend = function() {
...
}



[b][size=medium]1. tablesorter plugin[/size][/b]
如果不传排序参数, tablesorter 默认所有被排序内容都是按照文本内容进行排序.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值