Submitted by gouki on 2008, December 22, 10:44 PM
能够用厚厚的PDF来解释jQuery的人不多,但确实是有一个。看到这篇文章也是一个意外,是从订阅的某个人的博客里找到的。他看到这篇文章也很意外,于是乎,我也就很意外的转载了一下。
原文地址:http://jljlpch.javaeye.com/blog/234218
作者:jljlpch
原文中的PDF下载地址:
我会做个镜象的。。。
原文如下:
jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发的实用角度 出发,抛除了其它Lib中一些中看但不实用的东西,为开发者提供了优美短小而精悍的类库。其使用简单,文档丰富,而且性能高效,能极大地提高web系统的 开发效率。因此可以说是web应用开发中最佳的Js辅助类库之一。大部分开发者正在抛弃Prototype,而选择Jquery做为他们进行web开发的 JS库。
如是开发人员仅仅只知道文档中的简单的使用方法,却不明白Jquery的运行原理和内部机制,在使用jquery时,肯定会碰到许多的问题。这些问 题有一部分是Jquery的Bug。大部分是自身的使用不当而造成的。而文档的简单的使用说明很难解决问题。在调试基于jQuery的web应用时,很多 时候都要跟踪进入jQuery对象分析其运行状态以了解出错的原因。
如果对于web的应用的页面运行性能和效率有所要求的话,那么我们更应该去明白其运行机理和核心源码。但是jQuery源码不像其它的类库那样,它 有点晦涩,难懂。这就是本源码分析的原因,让所有使用jQuery的读者,能快速上手jQuery的源码,并在开发中得心应用。
Jquery的网络资源丰富,但Baidu了很久,很难找到那种完全深入地分析Jquery源码的文稿。倒是Jquery的开发者,John Resi的《Pro Javascript Techniques》涉及到Jquery的源码的分析,但是其主指还是在于JavaScript的使用。那本书并不能使我们完全细致地了解Jquery 的源码。
写个这个源码分析的理由其实很简单,在工作中使用jquery经常出问题,不得不分析其源码,我把分析的源码放在blog。其标题是jquery core 源码分析。结果有一网友竟评论说打到标题党,可见还是有很多人像我这样想完全了解jquery的core代码。
从自己能看懂,到自己写出来。发现自己有一个质的提高。但是由于水平有限,分析过程的难免有错误。请大家多多指教。不过嘴下能留情就最好了。有什么问题可以到blog:jljlpch.javaeye.com去访问和评论。附件附有打包的源码。
分析源码,最难的地方不是你能理解,你能分析得出来。如果把所有的分析都写在源文件中,我想很多人看不了多少行就会中止的。很难有人有兴趣对得源码一行行地去分析。何把源码有机地组合起来,串成一条线是本教程的最为头疼的地方。
读书的最高境界是厚积薄发。分析源码也是一样。对于4,5千行的jquery源码,我们如何做到心中有数,知道什么功能在什么函数里内 呢? 什么函数用在什么地方呢?这样就得把所有的函数有机分类地重组起来,想着Jquery的主要目的和自己对于js方面的理解。我把整个Jquery薄发成三 个单词 query-->manipulate-->expand。
jquery一个很紧缩的lib,它的主要目的就是对dom元素进行操作。那么dom元素的从哪里?
到dom树中去找。这就是 query。$(),Jquery的构建就是一个query的过程。我们可以把这个query范围放大一点,它不光是从dom中查找的CSS selector,还有可能是从html的片断中去寻找的dom元素生成,更进一步就是直接的dom元素(集)。$()的构建就是从这里出发的。
query到元素集,这个query的过程还没有最终完成。因为这些结果集不一定满足我们的要求,那么就要筛选,要过滤。要进行数组方面的相关的操作。这就涉及到jquery对象的类数组的特征。我们就可以把这些类数组的相关的函数放在一起来分析。
当最终的需求的集合形成,我们要的完成我们真正要做的,对集合中的dom元素进行操作。
怎么操作?操作什么呢?不就是对dom元素的attribute,class, style,css,event等进行操作吗?
细化一下:
1、我们可以把attribute,class,style都看作是是属性的操作,还有expando的自定义的属性。这就涉及到jquery.data。
2、对dom元素的内容。什么是内容。innerHtml是。all childNodes也是,value也可以算。对于内容的操作就有追加,插入,前插,后插,内部前插和内部后插。那当然不能少了clone,remove这些操作。
3、 CSS是可以在dom元素中单独出来分成一块来做分析的。对于css的操作,不就是 height,width,innerHeight,innerWidth,out(height,widith)的操作,还有元素的位置 (position,offset),display or not。这就是对于CSS的操作。
4、Event也是元素的操作中的一部分。这一部分除了addEvent,fireEvent,removeEvent,和domready就没有别的啦。
5、Ajax是给元素从服务器中找内容填充的。真正用到最多不还是load吗,对于getScript,getJson之类全都是在jQuery.ajax的函数的基础而出来。
6、 Fx可以看做是CSS的操作。但是其又高于CSS。对于FX,最基本不就show,hide,slide(down,up),fade(in,out)这 几种用法。无论什么用法,都基于时间的长短映射到元素CSS的属性值的对对应比率的大小。采用setInterval间隔来运行就形成了动画。这就 animate()函数。所有效果的发源地。
想想整个jquery就是这么简单。当然如果没有去身体力行去自己分析,无论什么教程都是没有用的。
其实query-->manipulate是表层的东西。还有一个高层的就是expand。这涉及到一个lib的架构与设计。
这部分我们可以从源码的角度去解读对于js lib的架构。
除了扩展性(extend)之后,一个lib肯定是要花大力气去考虑它的性能。
考虑它的内存使用。
这是站在设计Jquery的角度去分析。
想了很久,但是这一部分还没有写入目前的源码分析中。
镜象PDF下载:
jquery1.2.6源码分析.rar
Tags: jquery, javaeye, 详解
Javascript | 评论:0
| 阅读:18995
Submitted by gouki on 2008, December 18, 6:44 PM
平时我们取得location的search的时候,往往都是要用location.search,然后根据取回的结果集再处理
1、先判断第一位是否是“?”,如果是则从?开始往后面处理
2、写程序以&开始分隔,当然得先用unescape,或者用那个urldecode(具体的名字不记得了)处理一下,把&之类的处理一下
3、以=分隔,这样才能可以取得一一对应的值。
现在方便了。jQuery有这样的插件了。。。。
原文来自:http://www.cssrain.cn/article.asp?id=1204
内容如下:
例如 当前你的URL是:
http://www.cssrain.cn/index.php?test=1&kk=2
如果想获取test,则可以引入插件后,
用如下方法获取:
var test = $.query.get('test');
如果参数有多个相同的名称 ,则可以这样:
var arr = $.query.get('testy');
输出: [ 值1 , 值2, 值3...]
如果要获取多个相同名称中的某一个,可以这样:
var arrayElement = $.query.get('testy[1]');
此插件不仅能获取参数,也能设置参数。
设置一个参数:
var newUrl = $.query.set("section", 5).toString();
输出 : "?section=5"
设置两个参数:
var newUrl = $.query.set("section", 5).set("action", "do").toString();
输出 : "?action=do§ion=5"
删除一个参数:
var oldQueryAgain = $.query.REMOVE("type");
清空所有参数:
var emptyQuery = $.query.empty();
复制所有参数:
var stillTheSame = $.query.copy();
插件地址:
http://plugins.jquery.com/project/query-object
Tags: javascript, jquery, search, location, get
Javascript | 评论:1
| 阅读:46814
Submitted by gouki on 2008, December 7, 7:32 PM
jQuery里面这个插件应该用的是相对比较多的,最起码在提交表单的时候方便了不少,不需要再自己一个一个的根据条件写JS,主要还是为了方便。。。
这次更新的内容有:
这次的更新内容摘要如下:
1、为compareValidator里的datatype属性增加新的类型:date、datetime。
那么到目前为止,插件支持4种常类型:"string"、"number"、"date"、"datetime",默认值为"string"
2、为inputValidator里的属性type增加类型为date、datetime,min和max必须为string类型,会自动转换
"size":表示比较长度 ,默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型
3、为initConfig增加属性errorfocus,表示发生错误的时候,第一个出错控件是否获得焦点。默认获得焦点。
4、initConfig增加属性forcevalid属性;formValidator增加forcevalid属性,表示是否一直输入正确为止才允许离开焦点。
initConfig的forcevalid优先等级最高,即全局配置;而formValidator里的forcevalid是局部设置。
5、initConfig增加属性wideword,默认为false,表示是否把一个汉字当做一个长度的参数。
请见demo1最上面的按钮演示。
6、增加ajaxValidator对password控件的支持
7、修正升级中出现的一些bug,现都已修复
在升级的过程中,造成公用一个tip的功能丢失,现已修复。
bug描述:只显示第一个控件的信息,后面的控件正确与否都不理睬。
ajaxValidator的一些状态显示bug
固定发布(下载)页面:
http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html
有兴趣的朋友可以去订阅作者的博客,以后就可以第一时间知道他的更新。
Tags: jquery, formvalidator, update
Javascript | 评论:0
| 阅读:20593
Submitted by gouki on 2008, November 25, 6:33 PM
本来是看到一篇文章,写研究的,想COPY过来就完事了。该来来自于cssRain,但是在看的过程中,发现内容和标准偏差很多,于是就贴上它的链接,然后自己谈谈理解吧。
CSSRAIN的链接为:http://www.cssrain.cn/article.asp?id=1176
在jQuery里面对于一些HTML的元素操作都是很简化的,这也是很多人选择使用jQuery的原因。
对于获取某一个元素的值,如input框,我们往往是用$('#test').val();
$('#test')这个我就不多说了,反正就是获取ID为test的这个元素。
$('#test').val(),也就是获取它的值,一般来说,凡是能够用在FORM里的元素,都可以用.val()来进行值的获取,如input,textarea,select等,都可以用.val()来获取它们的当前值
而.val('aa');则是设置该元素的值,$('#test').val('aa'),也就是相当于设置test元素的值为aa。
类似这样的用法还有两种:.html(),.text(),这两种用法往往用在div和span元素上,一般是为这两种元素进行赋值和取值。
.html()替代了以前的 .innerHTML , .html('test') ,则是替代了 .innerHTML = 'test';
这些类似的简化写法让我们在实际的操作中感觉得更加流畅。
这些方法都是直接在方法名里加参数来进行赋值和取值的。还有一些是通过第二个参数进行取值的(说的不太清楚。。。),比如$('#test').attr('name'),那么,返回的值就是它的attribute中的name了,如果$('#test').attr('id','test2'),则是相当于把这个test元素的name设为test2,再进行取值的时候,name就是test2了。
说的太乱了。。。。
懒得整理,权当笔记
Tags: jquery, html, 研究
Javascript | 评论:1
| 阅读:46262
Submitted by gouki on 2008, November 14, 10:52 AM
demo地址:http://www.51toria.cn/demo/JQplus/jqzoom/
使用的JS:
页面调用方法:
JavaScript代码
- jQuery.noConflict();
- jQuery(document).ready(function(){
- $("img.jqzoom").jqueryzoom();
- });
Tags: jquery, plugins, jqzoom, javascript, demo
Javascript | 评论:3
| 阅读:28301