标签：jquery

在cssrain.cn上看到很多jquery的最新插件和代码，也深为该站站长感到由衷的倾(突然就不知道这个字怎么打了，郁闷，打了个同音字，五笔也会忘字。。。汗)佩，坚持本来就是一种美德。

他的网上有很多jquery插件哦，这两天又贴了ajax大会的资料，如果是在上海，我就肯定去参加了，可惜离我太远了。

然后又看到这个PPT，入门级，我没有细看，但我想可能很多人会需要这些吧。于是下载到本地再上传了一下。

jquery 1.3刚刚出来没几天，shawphy的中文API就基本出炉了，有时候真的挺佩服他们，当我们在娱乐的时候，他们还在努力的为我们这些人造福。我没有什么其他能力，只能做到代为传播了。同时也是希望有更多的人参与，可以让我们这些使用者也能够更加方便。

网址：http://shawphy.com/2009/01/release-jquery-doc-cn-1-3.html
原文如下：

jQuery 1.3自从2008年1月14日发布后，后引来了各界的关注。我们也随即投入到翻译文档的工作中来。经过4天的努力，终于完工了。这个版本更新了不少东西

changelog:

2009-01-18 16:06:52 +0800
* triggerHandler 进一步说明
* trigger 进一步说明

2009-01-17 22:37:11 +0800
* live() - 与bind()不同的是，live()一次只能绑定一个事件。
* [attribute!=value] jQuery 1.3中意义改变
* load 的data参数在jQuery 1.3中也可以接受String
+ ajax的error回调的第二个参数可能值”timeout”, “error”, “notmodified” 和 “parsererror”
+ ajax参数xhr
* animate 的duration为0的问题
* show, hide, toggle, slideDown, slideUp, slideToggle 在jQuery 1.3中，padding和margin也会有动画，效果更流畅。
* jQuery(html,[ownerDocument])等效于$(document.createElement(”span”)
* is支持复杂表达式

2009-01-17 18:31:10 +0800
+ jQuery.support.scriptEval
+ 原 Dimension 插件功能（1.2.6版加入jQuery核心）

2009-01-16 19:11:10 +0800
+ jQuery.fx.off
+ toggleClass( class, switch )
+ toggle( switch )
+ toggle(speed,[callback])
* 修改queue和dequeue方法的参数和说明

2009-01-15 22:31:02 +0800
* jQuery(html,[ownerDocument])
+ jQuery.selector
+ jQuery.context
* 效果下的queue和dequeue搬到核心下
+ live()
+ die()
+ closest()
* stop( [clearQueue], [gotoEnd]) 增加两个参数
+ jQuery.support
+ jQuery.isArray( obj )

感谢Cloudream的热情帮忙。还要感谢一揪制作chm版。这个版本还加入了检查更新的功能。如果有需要的同学可轻松查看是否有更新的中文文档(chm版中的检查更新也将同步升级)。

在线查看 下载离线版 bug提交

Something from jQuery's Blog :

Happy Birthday to jQuery! jQuery is three years old today, after being released way back on January 14th, 2006 at the first BarCampNYC by John Resig.

We have four announcements for you today, we hope you’ll enjoy them!

Url:http://blog.jquery.com/2009/01/14/jquery-13-and-the-jquery-foundation/

中文翻译：http://shawphy.com/2009/01/release-jquery-1-3.html

jQuery 1.3终于发布了。
min版(gzip后18kb)
源码(114kb)

另外可以用google的代码托管：
http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

下面这个是我自己用Packer压缩的pack版
http://shawphy.com/down/jquery-1.3.pack.js(37kb)

简要来说：

更新了Sizzle选择器引擎，这个之前也提到过。可以查看他的性能：

此外据声称，把代码给了dojo基金会。这回Sizzle的野心在于能够让其他各种JS库都能用，包括Prototype, Dojo, Yahoo UI, MochiKit, 和 TinyMCE等等其他库。

live 事件
这也是jQuery 1.3这次更新的第二个重大更新。（注：这里有一个iframe，我没有复制过来，请到原站观赏和测试）

性能比较：

这样，我以前写的关于重复绑定的文章就差不多可以抛弃了

Event 对象
新增了一个jQuery.Event对象，他根据w3c文档，做了一个完整的，兼容所有浏览器的一个对象。具体还得看文档。

append, prepend, before, 和 after 方法重写
据声称，这些方法的效率提升了6倍

重写了offset方法
这回更快了

取消了浏览器侦测，全面改用jQuery.support
具体还得看文档了。
变化：
其中与开发者比较密切的是
[@attr] 中的@在1.3里不能用了
用trigger触发的事件现在能冒泡了
ready方法中，再也不等css加载完了再执行其中代码了。直接要求把css放在脚本之前就行
简化了.isFunction方法，那些偏门的就被无视了
用选择器a, b, c选择东西，在支持querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE 8+)中会按照这些元素在文档中顺序来确定这些数组在获得的对象列表中的位置。而不支持这个方法的浏览器则按照选择器顺序排好
新增了jQuery.Event
要求网页都在标准模式下，不要在怪异模式下使用，否则会报错。
以下3个方法属性已被不推荐使用。
* jQuery.browser
* jQuery.browser.version
* jQuery.boxModel

具体内容：
内核部分：
更好的queue, dequeue
新增selector, context这两个属性，分别指向获取这个元素的原始选择器和被查找的内容（可选）
选择器部分：
Sizzle的使用
复杂的css例如not(a, b)
属性部分：
toggleClass( “className”, state ) - 增加了一个布朗值的参数。
筛选文档：
.closest( selector ) - 找到离这个元素最近的一个父元素。这跟parents不一样。
is() 也支持更复杂的选择器了。
操作文档：
HTML Injection重写了
$(”<script/>”) 就自动转化为 $(document.createElement(”script”))
css：
offset()重写了
事件：
Live 事件
jQuery.Event
trigger()会冒泡了
效果：
hide() .show()之类的加快速度
内置动画效果考虑到了margin和 padding
.toggle( boolean ) 多提供了一个参数
jQuery.fx.off 关闭所有动画
AJAX：
.load()支持了文本格式的数据
工具：
新增jQuery.isArray

内部：
jQuery.support

另外这回改用YUI的工具压脚本了

========================================

最后预告一下，jQuery文档官网已经针对1.3版做了修改，中文文档也在紧张制作中。

根据官方的博客，说是1月14日前发布release前最后一个版本了。不知道什么时候有的下载和测试，不过仍然是不建议用在项目中，还是等稳定版吧。

那个常见的@终于要消失了。新的引擎效率应该快上很多吧。

关注官方：www.jquery.com

The jQuery team has been working hard on the new release of the jQuery library and it’s ready for some in-depth testing! jQuery 1.3 is not ready for production use yet but we need help to weed out any bugs that might’ve snuck through.

看上去jQuery团队们都很辛苦，所以，小白鼠们，你们也辛苦一点，把BUG测试的多一点，我们在以后的项目中才敢正常的应用啊。

自己也是用jQuery的，应该也会测试一些，特别是针对这次更新的功能：

• Selector Engine - The selector code has undergone a complete rewrite - it’s likely that some edge cases still exist here.
• DOM Manipulation (append/prepend/before/after) - This code has also undergone a large rewrite along with some of the logic for executing inline script elements.
• .offset() - Another method that has been completely rewritten.
• Event Namespaces - The logic for handling namespaced events has been completely rewritten.
• Event Triggering - When triggering an event the event now bubbles up the DOM - this is likely to cause some problems.

选择器改写，DOM控制器又是大的改写，.offset改写,事件命名空间改写，不知道改写后效率会怎么样，当然，估计改写也应该是冲着效率而去的，否则改写的意义也不是特别大了。

事件触发，针对DOM的事件触发？估计问题也会挺多，他们也是这么认为的。DOM太难控制了，毕竟不是每个页面都是按照规范来写的。

如果你写了一些代码，并认为它触发了这些BUG，你可以提交到：http://dev.jquery.com/ ，当然提交的代码尽量是简短一些，提交的时候也需要将你的mail写上，这样，jQuery Team可能在修改后会通知你的哦。

能够用厚厚的PDF来解释jQuery的人不多，但确实是有一个。看到这篇文章也是一个意外，是从订阅的某个人的博客里找到的。他看到这篇文章也很意外，于是乎，我也就很意外的转载了一下。
原文地址：http://jljlpch.javaeye.com/blog/234218
作者：jljlpch
原文中的PDF下载地址：

• Jquery1.2.6源码分析.rar (660.9 KB)
• 描述: Jquery1.2.6源码分析及源码文件
• 下载次数: 355

我会做个镜象的。。。
原文如下：

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下载：

平时我们取得location的search的时候，往往都是要用location.search，然后根据取回的结果集再处理

1、先判断第一位是否是“?”，如果是则从?开始往后面处理

2、写程序以&开始分隔，当然得先用unescape，或者用那个urldecode（具体的名字不记得了）处理一下，把&amp;之类的处理一下

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&section=5"


删除一个参数：
var oldQueryAgain = $.query.REMOVE("type");

清空所有参数：
var emptyQuery = $.query.empty();

复制所有参数：
var stillTheSame = $.query.copy();


插件地址：
http://plugins.jquery.com/project/query-object

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

有兴趣的朋友可以去订阅作者的博客，以后就可以第一时间知道他的更新。

本来是看到一篇文章，写研究的，想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了。

说的太乱了。。。。

懒得整理，权当笔记

demo地址：http://www.51toria.cn/demo/JQplus/jqzoom/

使用的JS：

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 1.0
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// Released on Dec 05 2007
// i'm searching for a job,pick me up!!!
// mail: renzi.mrc@gmail.com
//**************************************************************

(function($){

$.fn.jqueryzoom = function(options){

var settings = {
xzoom: 200, //zoomed width default width
yzoom: 200, //zoomed div default width
offset: 10, //zoomed div default offset
position: "right" //zoomed div default position,offset position is to the right of the image
};

if(options) {
$.extend(settings, options);
}

$(this).hover(function(){


var imageLeft = $(this).get(0).offsetLeft;
var imageRight = $(this).get(0).offsetRight;
var imageTop = $(this).get(0).offsetTop;
var imageWidth = $(this).get(0).offsetWidth;
var imageHeight = $(this).get(0).offsetHeight;

var bigimage = $(this).attr("alt");

if($("div.zoomdiv").get().length == 0){

$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");

}

if(settings.position == "right"){

leftpos = imageLeft + imageWidth + settings.offset;

}else{

leftpos = imageLeft - settings.xzoom - settings.offset;

}

$("div.zoomdiv").css({ top: imageTop,left: leftpos });

$("div.zoomdiv").width(settings.xzoom);

$("div.zoomdiv").height(settings.yzoom);

$("div.zoomdiv").show();


$(document.body).mousemove(function(e){

var bigwidth = $(".bigimg").get(0).offsetWidth;

var bigheight = $(".bigimg").get(0).offsetHeight;

var scaley ='x';

var scalex= 'y';


if(isNaN(scalex)|isNaN(scaley)){

var scalex = Math.round(bigwidth/imageWidth) ;

var scaley = Math.round(bigheight/imageHeight);

}

mouse = new MouseEvent(e);



scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;

$("div.zoomdiv").get(0).scrollTop = scrolly * scaley ;

scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;

$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;


});
},function(){
$("div.zoomdiv").hide();
$(document.body).unbind("mousemove");
$(".lenszoom").remove();
$("div.zoomdiv").remove();
});

}

})(jQuery);

function MouseEvent(e) {
this.x = e.pageX
this.y = e.pageY
}

页面调用方法：

jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom();
});