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
| 阅读:18699
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
| 阅读:46385
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
| 阅读:20240
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
| 阅读:45891
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
| 阅读:27969
