我想网 » JQuery

jQuery 1.5正式版于1月31日如期发布！ jQuery是一个JavaScript库，它简化了HTML文档遍历，事件处理，动画和为网络快速发展的Ajax交互。变化包括一个重写的Ajax模块，划分 jQuery子类的能力，以及许多其他功能增强，修复各种内存泄漏，性能改进和加强跨浏览器的兼容。鼓励测试该版本的用户提供反馈和报告他们遇到的任何错误。 Right on schedule jQuery 1.5 is ready for consumption!
This release has been a long time coming and has been a real team effort. Please take this opportunity to thank members of the jQuery Team and the jQuery bug triage team for their help in getting this release out the door.

下载地址：
jQuery Minified (29kb Gzipped)
jQuery Regular (207kb)

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js

关于jQuery 1.5

该版本修复了83个bug，解决了460个问题。

针对下列浏览器进行了测试：
Safari 5.0.3 / 4.0.5 / 3.2.3 / 3.1.2
Opera 11.01 / 11 / 10.63 / 10.54 / 10.10 / 9.64
IE 6 / 7 / 8
Firefox 4.0b9 / 3.6.13 / 3.5.11 / 3.0.19 / 2.0.0.20
Chrome 8.0.552.215 / 8.0.552.237 / 9.0.597.67 Beta / 10.0.642.2 Dev

jQuery 1.5 API文档：http://api.jquery.com/category/version/1.5/

重大改进

1. 重写了Ajax模块：

a) 提供了更高级的统一的API；

b) Ajax请求会返回一个封装不同浏览器XMLHttpRequest的jXHR对像，可以完成以前不可能完成的任务，比如：放弃JSONP请求，详见jQuery.ajax()文档；

c) 更好的扩展性，可以方便地扩展Ajax的发送与接收，管理Ajax请求，详见Extending Ajax文档。

2. 新增延缓对像(Deferred Objects)

a) 直接使用没有立即返回的返回值，比如异步Ajax请求的返回结果；

b) 附加多个事件处理器（这在以前是不可能的），示例代码：
// Assign handlers immediately after making the request,
// and remember the jxhr object for this request
var jxhr = $.ajax({ url: “example.php” })
.success(function() { alert(“success”); })
.error(function() { alert(“error”); })
.complete(function() { alert(“complete”); });

// perform other work here …

// Set another completion function for the request above
jxhr.complete(function(){ alert(“second complete”); });

了解更多内容，请阅读Deferred Object文档。

推荐教程：Using Deferreds in jQuery 1.5

3. jQuery替身——jQuery.sub()

可以方便地创建jQuery副本，不影响原有的jQuery对像，避免jQuery冲突。示例代码如下：

(function(){
var sub$ = jQuery.sub();

sub$.fn.myCustomMethod = function(){
return ‘just for me’;
};

sub$(document).ready(function() {
sub$(‘body’).myCustomMethod() // ‘just for me’
});
})();

typeof jQuery(‘body’).myCustomMethod // undefined

了解更多，请阅读jQuery.sub()文档。

4. 增强了遍历相邻节点的性能

增强的遍历方法：.children(), .prev(), .next()，究竟增强多少，请看下图：

5. jQuery开发团队构建系统的改进

现在jQuery的构建基于服务端JavaScript环境——NodeJS，以前用的是Java/Rhino。编译器用的是来自Google Closure Compiler的UglifyJS，编译后的js文件更小。

Feed enhanced by Better Feed from Ozh

2010年最佳jQuery插件

seasun — Sun, 05 Dec 2010 14:19:10 +0000

在前两周国外知名博客WDL先后分享了“2010最佳系列”中的“最佳免费 WordPress主题”和“最佳免费字体”，在这个星期又发布了2010年最佳jQuery插件。在2010年，JavaScript框架继续日渐普及，这使得大量的插件被开发出来。满目琳琅，难以选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best。

2010年最佳jQuery插件（排名不分先后）：

Nivo Slider

一个加载设置拥有9种过度效果的超级smooth slider，它还支持如链接图像和键盘导航等内容。

Quicksand

Spritely

Spritely 是一个由Artlogic开发的 jQuery插件，用于使用纯HTML和JavaScript创建动态物体和背景动画。

Lettering.js

Lettering.js是一个轻量经的、易于使用的 jQuery插件，可创造出极具个性的网页排版。

Colortip

Masonry

Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直，Masonry排列内容是根据一个网格先垂直后水平的。

gvChart

gvChart是一个使用Google Charts了的jQuery插件，可通过HTML table tag的数据实现交互可视化。它非常容易上手，此外它支持创建五种风格的图标。

Animated table sort

这是一个用于创建表格的jQuery插件，所创建的表格可以根据不同的列项目进行A-Z，升序排列，切换效果非常不错。

jQuery Image Scale Carousel

YoxView

YoxView是一个免费的多媒体播放jQuery插件。它易于使用，功能丰富。你可以用它来展示各种媒体，如图像，视频，内嵌的内容，iframes，Flash等等。

Feed enhanced by Better Feed from Ozh

jQuery弹出层插件(tipsWindow 2.0)

seasun — Wed, 24 Nov 2010 15:50:42 +0000

关于插件：
一个基于jQuery的弹出层。支持拖拽，内容为文字，ID，图片，URL，框架；
2.0已重写代码。兼容性就测了IE和FF。其他的懒得去测了。这个版本已解决了IE6下不能Fixed定位的问题
参数JS代码里已作注释，这里不再复述；所有参数都为可选。就这么多了；有问题大家留言或发邮件给我！

最新更新：(2010-11-22)
1.修复IE6下不能遮住下拉菜单的BUG
2.修复IE6下不能固定定位问题

详细的看演示页吧：http://www.iwanna.cn/examples/js/jquery-tipswindow/index.html

Feed enhanced by Better Feed from Ozh

jQuery Tools——不可错过的jQuery UI库

seasun — Sun, 21 Nov 2010 07:34:56 +0000

JQueryTools是一组基于JQuery构建的用户界面常用组件的集合。通过使用jQueryTools，网站前端开发无疑会变得更加高效。值得注意的是，jQueryTools的gzip压缩版本仅有5.8k，如此轻量级而且功能实用的UI组件绝对值得我们关注。下面是官方主页对它的一个描述：
JqueryTools包含如今网站六个最有用的JavaScript工具。它的一个优点是所有这些工具可以一起使用、扩展、配置和样式化。
最终，通过它你可以制作出众多不同的网站部件，或用个人的方式创造新的应用。
下面是JqueryUI包含的工具列表：

选项卡功能(Tabs)
提示工具条功能(ToolTips)
信息滚动功能(Scrollable)
遮罩效果(overlay)
突出效果(expose)
Flash 嵌入
表单验证（Validator）
范围选取（Rangeinput）
日期选择（Dateinput）

以下分别是具体功能列表：

1、选项卡(Tabs)

效果图

2、提示工具条(ToolTips)

效果图

3、遮罩效果(overlay)

效果图

4、滚动效果(Scrollable)

效果图

5、突出效果(expose)

效果图

6、Flash嵌入

效果图

7、表单验证（Validator）

效果图

8、范围选取（Rangeinput）

效果图

9、日期选择（Dateinput）

效果图

10、综合运用（Combinations）

效果图

Feed enhanced by Better Feed from Ozh

提供 39种样式高亮语法的JQuery插件-Snippet

seasun — Sun, 14 Nov 2010 07:51:04 +0000

Snippet jQuery Syntax Highlighter 是一个建立在SHJS的开源插件,Snippet提供了简单而且快捷的方法,可以方便的为你带来高亮语法的提示.可以在IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62中运行.

先简单为你讲一讲它的用法.在官方的网站也已经有了详细的介绍,这里就稍微翻译一下它所提供的例子.

1. 在你的HTML中加载Snippet和JQuery

2. 加载Snippet的CSS

3. 重点是这一步,我们要把下面的代码写在

Feed enhanced by Better Feed from Ozh

10个强大的Ajax jQuery文件上传程序

seasun — Sun, 07 Nov 2010 15:55:03 +0000

上传文件和图片是许多网站的一个常用功能，无论是让注册用户上传一个个人资料图片还是上传文件共享，都离不开上传程序，虽然有很多种实现方法，但要让上传看起来更酷一点，如显示剩余时间，同时上传多个文件，以及使用拖放式操作，或上传功能更稳定一点，也许你就没招了，没关系，本文就为你介绍10个功能强大，易于使用的Ajax jQuery文件上传程序，注意有些除了使用Ajax jQuery外，还结合了其它技术，如Flash。

1、 Valums AJAX Uploader

2、 Plupload

3、 Uploadify

4、AJAX Multiple File Upload Form using jQuery

5、jQuery AJAX File Upload

6、jQuery Upload Progress

7、jQuery Multiple File Upload Plugin

8、Digitalarld Swiff AJAX Uploader

9、jQUploader

10、AJAX File Upload

Feed enhanced by Better Feed from Ozh

14个有用的Jquery技巧

seasun — Sun, 17 Oct 2010 13:24:52 +0000

1.通过方法返回Jquery对象实例
用 var someDiv = $(‘#someDiv’).hide(); 代替 var someDiv = $(‘#someDiv’); someDiv.hide();

2.使用find来查找
用 $(’#someDiv’).find(’p.someClass’).hide(); 代替 $(’#someDiv p.someClass’).hide();因为可以不必触发Jquery的Sizzle引擎，同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符

3.不要滥用$(this)
用 $(’#someAnchor’).click(function() { alert( this.id ); }); 代替 $(’#someAnchor’).click(function() {alert($(this).attr(’id’));});

4.ready的简写形式
用 $(function() { }); 代替 $(document).ready(function() {});

5.让你的代码安全
方法1（使用noConflict）
var j = jQuery.noConflict();
j(’#someDiv’).hide();
// The line below will reference some other library’s $ function.
$(’someDiv’).style.display = ‘none’;
方法2（传入参数Jquery）
(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);
方法3（通过ready方法）
jQuery(document).ready(function($) {
// $ refers to jQuery
});

6.简化代码
用each代替for，使用数组保存临时变量，使用document fragment，这其实和写原生的Javascript需要注意的一样。

7.使用Ajax的方法
Jquery提供了get getJSON post ajax这些有用的ajax方法

8.访问原生的属性和方法
比如获取元素id的方法有
// OPTION 1 – Use jQuery
var id = $(’#someAnchor’).attr(’id’);
// OPTION 2 – Access the DOM element
var id = $(’#someAnchor’)[0].id;
// OPTION 3 – Use jQuery’s get method
var id = $(’#someAnchor’).get(0).id;
// OPTION 3b – Don’t pass an index to get
anchorsArray = $(’.someAnchors’).get();
var thirdId = anchorsArray[2].id;

9.使用PHP来检查Ajax请求
通过使用xhr.setRequestHeader(”X-Requested-With”, “XMLHttpRequest”); 服务器端如PHP就可以通过
function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest’;
}
来检查是不是Ajax请求，在一些禁用Javascript的情况下可能会用到

10.Jquery和$的关系
在Jquery代码的最下面，可以看到下面的代码
window.jQuery = window.$ = jQuery; $其实就是Jquery的一个shortcut

11.条件加载Jquery

如果CDN没有下载到Jquery，则从本地读取

12.Jquery Filters

注：$.expr[":"]等价于$.expr.filters

13.hover方法
$(’#someElement’).hover(function() {
//在这里可以使用toggle方法来实现滑过和滑出的效果
});

14.传入属性对象
当创建一个元素的时候，Jquery1.4可以传入一个属性对象
$(’’, {
id : ’someId’,
className : ’someClass’,
href : ’somePath.html’
});
甚至是Jquery指定的属性或事件如text, click

Feed enhanced by Better Feed from Ozh

jQuery教程之鼠标事件篇

seasun — Sun, 03 Oct 2010 13:22:41 +0000

jQuery除了选择器之外，还封装了很多事件的处理，比如鼠标事件，所谓的鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键而触发的事件，jQuery中封装了几乎所有的鼠标事件，包括点击，双击，移出，移入等鼠标事件，下面断桥残雪简单的介绍下jQuery的鼠标事件

jQuery的click事件

经典鼠标click的实例：

$("sel").click(function(){
    alert('哈哈 !');
});

jQuery的dbclick事件

一般dbclick事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件

$('p').dbclick(function(){
alert('鼠标双击!');
});
$('p').click(function(){
alert('点击了一下!');
});//大家看看结果是怎么样的？

jQuery的mousedown事件

mousedown就是在按下鼠标时触发的事件
$(’p’).mousedown(function(){
alert(’按下了鼠标 !’);
});

jQuery的mouseup事件

同上就是松开鼠标时候触发的事件,如果在于按下鼠标的相同元素上松开,那么也会触发click事件,mousedown和mouseup事件一般有在div拖拽等效果中

$('p').mouseup(function(){
alert('鼠标起来了 !');
}).click(function(){
alert('点击了下鼠标!');
});

jQuery的mouseover事件

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性

jQuery的mouseout事件

mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。

jQuery的mouseenter事件

和mouseover事件类似,但两者有区别

jQuery的mouserleaver事件

同上和mouseout事件类似.

hover事件

其实hover事件内部就是使用了mouseenter和mouseleaver事件,我们可以使用jQuery的hover这个函数来代替上面的两个函数

$('p').hover(function(){
alert('这个function里放mouseenter 的事件!');
},function(){
alert('这里是mouseleaver function!');
});

这里我们没有鼠标右键事件?其实使用jQuery的mousedown事件然后再函数里判断就OK了

Feed enhanced by Better Feed from Ozh

25个jQuery的编程小抄[速查表]

seasun — Sun, 19 Sep 2010 16:36:34 +0000

这里是25个jQuery的小抄（有一些在墙外），有的还可以设置成你的电脑桌面。这些东西可以让你很快速地记得一些常用的东西，就好像软件的快捷键一样。希望它们对你会有帮助。

1. jQuery 1.2 Cheat-sheet [PNG]

2. jQuery 1.2 Cheat Sheet v1.0 [PDF]

3. jQuery 1.3 Cheatsheet [PDF]

4. jQuery API Browser [Adobe AIR, HTML]

5. jQuery1.1 Cheat Sheet [HTML]

6. jTouch – jQuery Cheat Sheet for iPhone [HTML]

7. jQuery 1.4 API Cheat Sheet [HTML, PDF, PNG]

8. jQuery Selectors [PDF]

9. jQuery 1.3 Quick API Reference [ HTML]

10. jQuery UI 1.7 Quick API Reference [ HTML]

11. jQuery 1.3.2 Cheat Sheet [Microsoft Excel (XLS), PDF, PNG]

12. jQuery 1.1.3 Cheat Sheet [Microsoft Excel (XLS), PDF, PNG]

13. jQuery 1.3 Visual Cheat Sheet [PDF]

14. jQuery 1.4.2 Visual Cheat Sheet [JPEG, PDF]

15. jQuery API [HTML]

16. jQuery 1.4 Cheat Sheet [PDF]

17. jQuery cheatsheet Wallpaper

18. jQuery – YUI3 Rosetta Stone [HTML]

19. jQuery 1.2 by Adrien Gibrat [PDF]

20. jQuery 1.3 Cheat Sheet

21. jQuery 1.3 Cheatsheet Wallpaper [1920×1200, 1680×1050 and 1440×900]

22. jQuery 1.3 Visual Cheat Sheet by Antonio Lupetti [PDF]

23. jQuery Selectors Cheatsheet [HTML]

24. jQuery UI – Effects Cheatsheet [HTML]

25. jQuery Validator Cheatsheet – Elegant Code [PDF]

Feed enhanced by Better Feed from Ozh

js/jquery 获取url参数

seasun — Fri, 17 Sep 2010 14:16:35 +0000

js代码：

function GetQueryString(name)
{
var reg = new RegExp(“(^|&)”+ name +”=([^&]*)(&|$)”);
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}

URL的参数&参数名1=XXXX&参数名 2=XXXX&参数名3=XXXX

alert(GetQueryString(“参数名1″));
alert(GetQueryString(” 参数名2″));
alert(GetQueryString(“参数名3″));

jquery 代码：

把下面代码。放到js文件中

/**
* jQuery.query – Query String Modification and Creation for jQuery
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
* Date: 2009/8/13
*
* @author Blair Mitchelmore
* @version 2.1.6
*
**/
new function(settings) {
// Various Settings
var $separator = settings.separator || ‘&’;
var $spaces = settings.spaces === false ? false : true;
var $suffix = settings.suffix === false ? ” : ‘[]‘;
var $prefix = settings.prefix === false ? false : true;
var $hash = $prefix ? settings.hash === true ? “#” : “?” : “”;
var $numbers = settings.numbers === false ? false : true;

jQuery.query = new function() {
var is = function(o, t) {
return o != undefined && o !== null && (!!t ? o.constructor == t : true);
};
var parse = function(path) {
var m, rx = /\[([^[]*)\]/g, match = /^([^[]+?)(\[.*\])?$/.exec(path), base = match[1], tokens = [];
while (m = rx.exec(match[2])) tokens.push(m[1]);
return [base, tokens];
};
var set = function(target, tokens, value) {
var o, token = tokens.shift();
if (typeof target != ‘object’) target = null;
if (token === “”) {
if (!target) target = [];
if (is(target, Array)) {
target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
} else if (is(target, Object)) {
var i = 0;
while (target[i++] != null);
target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
} else {
target = [];
target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
}
} else if (token && token.match(/^\s*[0-9]+\s*$/)) {
var index = parseInt(token, 10);
if (!target) target = [];
target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
} else if (token) {
var index = token.replace(/^\s*|\s*$/g, “”);
if (!target) target = {};
if (is(target, Array)) {
var temp = {};
for (var i = 0; i < target.length; ++i) {
temp[i] = target[i];
}
target = temp;
}
target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
} else {
return value;
}
return target;
};

var queryObject = function(a) {
var self = this;
self.keys = {};

if (a.queryObject) {
jQuery.each(a.get(), function(key, val) {
self.SET(key, val);
});
} else {
jQuery.each(arguments, function() {
var q = “” + this;
q = q.replace(/^[?#]/,”); // remove any leading ? || #
q = q.replace(/[;&]$/,”); // remove any trailing & || ;
if ($spaces) q = q.replace(/[+]/g,’ ‘); // replace +’s with spaces

jQuery.each(q.split(/[&;]/), function(){
var key = decodeURIComponent(this.split(‘=’)[0] || “”);
var val = decodeURIComponent(this.split(‘=’)[1] || “”);

if (!key) return;

if ($numbers) {
if (/^[+-]?[0-9]+\.[0-9]*$/.test(val)) // simple float regex
val = parseFloat(val);
else if (/^[+-]?[0-9]+$/.test(val)) // simple int regex
val = parseInt(val, 10);
}

val = (!val && val !== 0) ? true : val;

if (val !== false && val !== true && typeof val != ‘number’)
val = val;

self.SET(key, val);
});
});
}
return self;
};

queryObject.prototype = {
queryObject: true,
has: function(key, type) {
var value = this.get(key);
return is(value, type);
},
GET: function(key) {
if (!is(key)) return this.keys;
var parsed = parse(key), base = parsed[0], tokens = parsed[1];
var target = this.keys[base];
while (target != null && tokens.length != 0) {
target = target[tokens.shift()];
}
return typeof target == ‘number’ ? target : target || “”;
},
get: function(key) {
var target = this.GET(key);
if (is(target, Object))
return jQuery.extend(true, {}, target);
else if (is(target, Array))
return target.slice(0);
return target;
},
SET: function(key, val) {
var value = !is(val) ? null : val;
var parsed = parse(key), base = parsed[0], tokens = parsed[1];
var target = this.keys[base];
this.keys[base] = set(target, tokens.slice(0), value);
return this;
},
set: function(key, val) {
return this.copy().SET(key, val);
},
REMOVE: function(key) {
return this.SET(key, null).COMPACT();
},
remove: function(key) {
return this.copy().REMOVE(key);
},
EMPTY: function() {
var self = this;
jQuery.each(self.keys, function(key, value) {
delete self.keys[key];
});
return self;
},
load: function(url) {
var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, “$1″);
var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, “$1″);
return new queryObject(url.length == search.length ? ” : search, url.length == hash.length ? ” : hash);
},
empty: function() {
return this.copy().EMPTY();
},
copy: function() {
return new queryObject(this);
},
COMPACT: function() {
function build(orig) {
var obj = typeof orig == “object” ? is(orig, Array) ? [] : {} : orig;
if (typeof orig == ‘object’) {
function add(o, key, value) {
if (is(o, Array))
o.push(value);
else
o[key] = value;
}
jQuery.each(orig, function(key, value) {
if (!is(value)) return true;
add(obj, key, build(value));
});
}
return obj;
}
this.keys = build(this.keys);
return this;
},
compact: function() {
return this.copy().COMPACT();
},
toString: function() {
var i = 0, queryString = [], chunks = [], self = this;
var encode = function(str) {
str = str + “”;
if ($spaces) str = str.replace(/ /g, “+”);
return encodeURIComponent(str);
};
var addFields = function(arr, key, value) {
if (!is(value) || value === false) return;
var o = [encode(key)];
if (value !== true) {
o.push(“=”);
o.push(encode(value));
}
arr.push(o.join(“”));
};
var build = function(obj, base) {
var newKey = function(key) {
return !base || base == “” ? [key].join(“”) : [base, "[", key, "]“].join(“”);
};
jQuery.each(obj, function(key, value) {
if (typeof value == ‘object’)
build(value, newKey(key));
else
addFields(chunks, newKey(key), value);
});
};

build(this.keys);

if (chunks.length > 0) queryString.push($hash);
queryString.push(chunks.join($separator));

return queryString.join(“”);
}
};

return new queryObject(location.search, location.hash);
};
}(jQuery.query || {}); // Pass in jQuery.query as settings object

如果想获取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();

Feed enhanced by Better Feed from Ozh

解决IE6不支持max-height的bug

seasun — Sun, 12 Sep 2010 14:46:22 +0000

罪恶的IE6不支持max-height属性，不过我们可以通过jQuery来解决IE6不支持max- height，jQuery的代码如下：

$(".entry").each(function(){
    if($(this)[0].scrollHeight>500)
     $(this).css({"height":"500px"});
});

原理: 在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度如果超过了就通过设置height为最大高度，我这里使用的是[0]，获取的是的DOM对象，而不是jQuery对象，详细说明见：《jQuery选择器使用详解》

上面的代码还没有加入IE6的判断,完整代码如下:

if($.browser.msie&&($.browser.version === "6.0")){
$(".entry").each(function(){
if($(this)[0].scrollHeight>500)
$(this).css({"height":"500px","overflow":"hidden"});
});}

当然你也可以通过css表达式来实现IE6支持max-height属性

.entry{
//我烧验证woshao_985140e4b71711df9e5e000c295b2b8d
height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}

Feed enhanced by Better Feed from Ozh

25个免费的WordPress图片相册幻灯插件

seasun — Sun, 12 Sep 2010 14:03:19 +0000

WordPress对于所有的blogger来说算是一款不错的CMS，因为它易于使用和管理，尤其是插件和其他应用设置。下面列出的是25个免费的WordPress图片相册插件，这些插件全都能在WordPress插件页面上找到，用这些插件你可以很方便的在你的站点上显示和管理你的图片相册和幻灯。

Dynamic Content Gallery

Lightview Plus

Shadowbox JS

Post video players slideshow and photo galleries

PhotoSmash Galleries

FancyBox for WordPress

WordPress Gallery Slideshow

Lazyest Gallery

Flickr + Highslide

Inline Gallery

Media Library Gallery

Picasna

Flickr Tag

Shutter Reloaded

jQuery Lightbox

WP Photo Album

Fotobook

NextGEN Gallery

WP-SimpleViewer

Yet Another Photoblog

Lightbox Gallery

Page Flip Image Gallery

DM Albums

Misiek Photo Album

Feed enhanced by Better Feed from Ozh

关于jQuery ready()方法一些用法解释

seasun — Tue, 31 Aug 2010 14:37:47 +0000

jQuery的ready方法的是开发中经常用到的，作用相当于我们的body onload，是当页面DOM准备就绪的时候才运行的代码，最常用的就是在DOM渲染加载之前，先给document绑定ready事件，然后当页面 DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法

$(document).ready(){ });

简写的jQuery ready()

$(function(){ });

这是因为jQuery的选择器第一个参数假如为空，那么默认的是document

不建议使用的ready()方法

$().ready(handler);

在jQuery1.4 发布公告中提到了：在jQuery1.4中仍然保留这种方法，但是不推荐使用，并且 jQuery1.3的ready会返回一个jQuery的对象，而1.4中则不会又返回

解决jQuery（$）库冲突的ready方法

这一种方式一般用在处理jQuery的$和别的库冲突的时候用的,可以通过jQuery.noConflict()这个方法,我们就可以直接在代码中通过jQuery来代替$来使用,但又习惯了使用$怎么办?看下面的代码:

jQuery.noConflict(); jQuery(function($){ alert($("#ready1").html()); //这样我们就可以使用$了 });

后记

一般在开发中断桥残雪是不会推荐使用jQuery的ready方法的，因为绑定 ready事件之后，jQuery需要添加DOMContentLoaded监听事件，对于页面加载渲染是有一定影响的，所以建议我们在逼不得已的情况下才使用jQuery的ready。

在实际开发中我推荐把ready中要执行的函数放在DOM的HTML代码之后，也就是当DOM渲染过去之后再执行handler，或者把代码直接放在页面的末尾

Feed enhanced by Better Feed from Ozh

10个jquery动画菜单：插件和教程

seasun — Mon, 16 Aug 2010 15:36:32 +0000

jQuery是一个非常容易使用，同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。

插件

LavaLamp

相信很多人都见过这个很酷的菜单插件，也有很多网站成功的应用了这个插件。

插件主页

jquery Kwicks 插件

如果你多Mootools有些了解，或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效果，很酷，也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单，制作某些步骤演示也非常合适——比如购物流程的演示。插件主页

查看演示 | 下载

仿Mac的停靠菜单插件

这是个仿苹果机的停靠菜单的一个jQuery插件，支持水平和竖直两种。查看插件页面。

查看演示 | 下载

jquery滑动菜单

一个和LavaLamp很像的菜单，而且脚本只有不到1kb(lavalamp也是这么小)，也比较容易使用。该菜单的原理是，通过在当前ul元素的下面(或者说”后面”更合适些？)添加一个额外的div，用position定位该div。然后用jquery和插件来控制这个div的大小和位置，并实现动画效果。

查看演示 | 下载

教程

CSS Sprites2 – 使用jquery制作动画菜单

知名博客alistapart的一个关于CSS Sprites的教程，这个网站对CSS Sprites的技术的普及起到了非常重要的作用。本文的目的是介绍基于javascript的CSS Sprites技术，只是是通过制作动画菜单的例子来讲解。非常值得一读。查看教程

查看演示

使用jQuery的动画菜单

教你如何使用CSS和jquery的animate()函数改变背景色的透明度(opacity)来实现动画菜单的一个教程，讲的很详细，如果你看不懂英文没关系，能看懂教程中的代码就OK了。查看教程

查看演示

使用CSS和jquery创建很酷的动画导航菜单

Nettus推出的一个教程，非常详细的讲解如何使用CSS和jquery制作很酷的动画效果的菜单。查看教程

查看演示 | 下载源文件

CSS Dock Menu

来自www.ndesign-studio.com的一篇使用CSS制作停靠菜单的教程，使用了 jquery机器FishEye插件。查看教程

查看演示 | 下载

使用jquery制作平滑的动画导航

一个很不错的导航效果，这个教程很详细的讲解了制作这个菜单的步骤。使用了jquery的easing组件。查看教程

查看演示 | 下载

使用jquery实现动画背景图片

这是一个教程，作者结合了上面提到的CSS Sprites2教程，结合jquery 背景动画插件来实现的一个效果。这个效果很不错，很酷。查看教程。

查看演示 | 下载

Feed enhanced by Better Feed from Ozh

初探 jQuery 的 Sizzle 选择器

seasun — Wed, 11 Aug 2010 13:27:51 +0000

这是一篇关于介绍jQuery Sizzle选择器的文章，由我和obility共同完成。在文中，我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理，以及末了以少许文字给你展示出如何借用Sizzle之手实现自定义选择器（也许更标准的叫法叫做过滤符）和它与YUI 选择器的大致比较。

前序

jQuery相比1.2的版本，在内部代码的构造上已经出现了巨大的变化，其之一便是模块的分发.我记得09年在jquery 9月开的一次大会上 john放出的一张ppt上也指出了当前的jquery下一步目标，不仅仅是除了sizzle选择器的分离，届时core，attribute，css以及 manipulation，包括event也都会独立成单独的js文件.（1.4的文件结构，其实已经分成单独的16个模块的组成）

随着jQuery被用来构建web app的场合愈来愈多，它的性能自然受到了大部分开发者的高度关注，它的内部实现机理又是如何，比如选择器的实现。

Sizzle，作为一个独立全新的选择器引擎，出现在jQuery 1.3版本之后，并被John Resig作为一个开源的项目，可以用于其他框架：Mool, Dojo，YUI等。

好了，现在来看为什么Sizzle选择器如此受欢迎，使它能够在常用dom匹配上都快于其他选择器而让这些框架们都垂青于它。

概要

一般选择器的匹配模式（包括jq1.2之前），都是一个顺序的思维方式，在需要递进式匹配时，比如$(‘div span’) 这样的匹配时，执行的操作都是先匹配页面中div然后再匹配它的节点下的span标签，之后返回结果。

Sizzle则采取了相反Right To Left的实现方式，先搜寻页面中所有的span标签，再其后的操作中才去判断它的父节点（包括父节点以上）是否为div，是则压入数组，否则pass，进入下一判断，最后返回该操作序列。

另外，在很多细节上也进行了优化。

浅析源码

在探索 $ 符和 Sizzle的协同工作原理前，先引用一张图片.

开始吧。（$符在这里不作过多的介绍）.

当我们给$符传递进一个参数（也可能是多个）时，此时它会根据参数的类型（domElement | string | fn | array）进入不同的流程，在此，重点看 string 类型的处理，因为只有它才可以触发Sizzle。首先调用正则匹配看是否为创建dom节点的操作，然后看是否为简单id匹配，这一步也由正则匹配完成，否则进入jQuery.fn.find()函数，由此进入Sizzle的天地。

当进入Sizzle时，一般情况下会配备三参：所要匹配的选择符，上下文，匹配的结果集。调用正则对传入的selector做一次”预匹配”.

var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,

让我们看一下一个简单选择器的实现过程：比如 div > p。我们要先找出符合条件的div[div]，再找出符合条件的p[p]，最后在上下文里[div]过滤出符合条件”>”的p[p];抽象一点的说法就是：在已知的上下文里，根据关系找出相应的节点。他们靠关系联系起来。那么对于选择器的操作也就是根据关系来分组。一次次缩小上下文，直到找出符合条件的节点。

回到我们的话题，还是先看看这个令人费解的正则，相信你会有更好的分析方法，但是眼下，我还是一点点的拆分，让它表达的更清晰一点。先按照分组拆，即():

((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])

(\s*,\s*)?

((?:.|\r|\n)*)

第一行还是有点长，用’|’拆分它:

1. (?:\((?:\([^()]+\)
2.[^()]+)+\)
3. \[(?:\[[^[\]]*\]
4. [^[\]]+)+\]|\\.
5.[^ >+~,(\[]+)+
6.[>+~]

对于如div > p。会得到数组结果['div','>','p']。

对于更复杂的选择器，如div.classname > p.classname。会得到结果['div.classname','>','p.classname']。

对于具有合并的‘,’,只是递归调用下获取结果再合并而已。过程开始变得简单起来。

对于普通的解析过程，我们遵循着从左到右的顺序即可完成我们的目标。

让我们总结下步骤：

1.先查找页面上所有的div 

2.循环所有的div，查找每个div下的p  

3.合并结果

Sizzle用了截然相反的步骤：

1.先查找页面上所有的p 

2.循环所有的p，查找每个p的父元素
  1.如果不是div，遍历上一层。
  2.如果已经是顶层，排除此p。
  3.如果是div，则保存此p元素。

由子元素来查找父元素，能得到更好的效率。看，打破常规思维后不仅步骤更简单了，而且效率上也得到了些许提升。

所有的选择器都可以这样解析吗？不是，采用right -> left的顺序是有前提条件的：没有位置关系的约束。

比如如下这段html：



p1content
p2content


p3content
p4content

对于选择器：$(“div p:first”)只会返回["#p1"]

而$(“div p:first-child”)则返回["#p1", "#p3"]

两者的区别在于位置filter的结果依赖于它前面的selector解析的结果，而其它 filter，只依赖于当前元素本身，就可以判断它是否满足filter。

那Sizzle是通过什么来判定进入哪一个流程呢，答案是origPOS的正则匹配,origPos指向了Expr中match对象的POS属性, 而POS中存储了五花八门的位置类约束，如下：

/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/     //POS的值

这样一来，第一步的流程判断就已明朗。

当处于1的情况时:

首先根据需要对当前处理的A数组元素进行一系列修正操作（Expr.relative主刀）。然后调用posProcess函数对修复后的元素进行匹配.

其中，还需一层判断，如果有层级约束，eg ‘>,’:input’ 会转化为 ‘> :input’,因为在最初调用chunker进行预匹配的时候，这些是会被分割为单个数组元素的，但在这里需要将它们做一次合并，这是由 posProcess所处理的数据格式所决定的

源码片段a: — posProcess函数匹配核心


//如果存在伪类选择符，从selector中移除，并保存在later中
// 这样一来，匹配对象便分离出来：selector（简单选择符存储器）和later（伪类选择符存储器）。
while ( (match = Expr.match.PSEUDO.exec( selector )) ) {
    later += match[0];
    selector = selector.replace( Expr.match.PSEUDO, "" );
}
//构造selector，并调用Sizzle进行匹配,将结果存储在tmpSet中
selector = Expr.relative[selector] ? selector + "*" : selector;
for ( var i = 0, l = root.length; i < l; i++ ) {
    Sizzle( selector, root[i], tmpSet );
}
// 最后便是filter的过滤
return Sizzle.filter( later, tmpSet );

源码片段b: — 对预匹配后的数组A中元素的处理


//这个为特例，被正则分割的A数组长度为2，则合并数组元素，上下文则原封不动为Sizzle传递进来的context。
if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
    // 完成一次匹配， 由posProcess 内部调用 filter进行匹配
    // 但在匹配前，完成了一次连接选择符的操作
    // 存入set，注 set 当前还不是最终的结果，其这里的set和上面的tmpSet一样，都是一个"暂时性"的结果集
    set = posProcess( parts[0] + parts[1], context );

源码片段c: — 如果存在位置约束关系，正向匹配。


set = Expr.relative[ parts[0] ] ?
    [ context ] :
    // 否则对队列首元素进行一次简单匹配操作
    Sizzle( parts.shift(), context );

分析Expr.relative，可以看出，它包含了4种dom元素间关系的判断，分别是 “+”, “>”, “”, “~”

每一轮的匹配，都会先判断A数组的首元素是不是代表tag间关系符(+,>等) ，而做后续处理.同时对A数组进行循环，依次做类似的处理

源码片段d — 对A数组(parts)的循环处理及后续


while ( parts.length ) {
    // 依次对 所匹配到的 数组中元素进行 递进匹配
    selector = parts.shift();
    //   '>'  -> '>input' 的形式
    if ( Expr.relative[ selector ] )
        selector += parts.shift();

    set = posProcess( selector, set );

当处于2的情况时:

就有着不同之处,先看小片代码

源码片段e: — 根据当前流程设置ret(两种情况)


//为ret绑定正确的返回值
var ret = seed ?       //seed 为上一次调用sizzle返回值， 即前文中提到的set|tmpset
    //将预匹配后的A数组(parts)中的最后元素设置为ret的expr属性，set属性设为上一次匹配的结果集。
    { expr: parts.pop(), set: makeArray(seed) } :
    //如果是第一次调用，则进行匹配操作,调用find函数
    // 以parts数组最末元素为当前选择符，进行匹配操作，同时设置与之相关的context
    Sizzle.find( parts.pop(), parts.length === 1 && context.parentNode ? context.parentNode : context, isXML(context) );

2的情况为一般逻辑处理，从这小段代码便可得到Sizzle的匹配机制，每一次的调用都以数组末元素为基准，以上一次（或预设context）为上下文约束关系以右到左的匹配,最后返回匹配结果。结合了DOM结构的特性，性能上也得到了大幅的提升。

我们知道选择器的类型是有效率差别的，id选择器效率最高，其次是class、name、tag、最后是最差的*表达式。在Sizzle.find 函数中，会按照这个效率的顺序查找元素，如果没有id就找class，依次下去。当然，class的支持需要方法 getElementsByClassName。如果没有，就只好从id跳到name。


if ( document.getElementsByClassName && document.documentElement.getElementsByClassName ) (function(){
    // ...
    // 如果支持直接获取，则将获取class的方法 直接添加进 Expr.order中   ['ID', 'NAME', 'TAG']
    Expr.order.splice(1, 0, "CLASS");
    //同时在find中追加对class的获取
    Expr.find.CLASS = function(match, context, isXML) {
        if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
            return context.getElementsByClassName(match[1]);
        }
    };
})();

在Sizzle.find函数中，做了一系列的逻辑判断，来保证返回结果的正确性，首先在进入find时，保证了expr不为空的，然后根据表达式类型(id|name|tag|class?)来选择与之对应的匹配分支进行实现，最后再做适当的收尾工作，将返回结果定义为对象，来移交给 filter,完成整个流程。

源码片段f: — find 函数核心


//order: [ "ID", "NAME", "TAG" ]
// 当然，如果浏览器支持对class的直接获取时，order中就会出现class的相关匹配规则
for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
    var type = Expr.order[i], match;
    // 根据 type 对所传进来的expr 进行正则匹配
    // match中通过正则限制了这三类匹配方式的条件。
    // 1. ID: /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,
    // 2. NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,
    // 3. TAG: /^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,
    if ( (match = Expr.match[ type ].exec( expr )) ) {
        var left = RegExp.leftContext;
        //保证返回结果的正确性，如果存在\，则删除
        if ( left.substr( left.length - 1 ) !== "\\" ) {
            match[1] = (match[1] || "").replace(/\\/g, "");
            // 根据type调用 sizzle.selector.find方法获取结果集。
            set = Expr.find[ type ]( match, context, isXML );
            if ( set != null ) {
                //如果匹配成功，删除已经匹配的expr
                expr = expr.replace( Expr.match[ type ], "" );
                break;
            }
        }
    }
}

return {set: set, expr: expr};
};

在所返回的对象中，expr的作用便是为了辅佐filter这把大器所需要完成任务的工具,到此就可以调用Sizzle.filter对 ret.set再做一次精确匹配(匹配规则即ret.expr),以及tag间的位置约束关系的匹配（这部分同1中类似）.

源码片段g: — 和源码片段d有类似之处。不作详述


    while ( parts.length ) {
        var cur = parts.pop(), pop = cur;
        // 是否存在 类似这样的匹配 eg:  '+',  '>'等
        if ( !Expr.relative[ cur ] ) {
            cur = "";
        } else {
            //如果存在层间关系的约束  则修复 cur 和pop的指向
            // eg  ['div', '+', 'span'] =>   pop = div;  cur = '+'; 并进入 relative的匹配。
            pop = parts.pop();
        }
        //  确保拥有上下文 代码略过
        Expr.relative[ cur ]( checkSet, pop, isXML(context) );
    }

之后便接近sizzle尾声：结果集的处理(将所匹配的结果set 追加进 result中)。当然，如果有多表达式,便会再一次调用。

实例

以’div > span p span:last’这个选择符为例，看看它的调用链是如何顺次完成的。

根据对源码的剖析，理解如下：

jquery.init -> jquery.prototype.find
进入Sizzle(对xml的判断) -> 设置parts数组等在匹配中所需要的元素 -> 根据数组长度以及调用origPos进行判断，来决定进入哪个分支，在这个实例下进入分支1
循环调用Sizzle进行匹配，将结果存入set中(因为在这一过程中是循环调用，所以对Sizzle的判断也是需要多次，进入哪一分支当然也会是不一样的，比如第二轮循环判断则进入分支2中进行处理) ,对于>号的处理，也会将它合并在其后的span中，构成新的选择符 ‘>span’,然后进入Expr.relative进行匹配，同时调用posProcess。
调用Sizzle.find 匹配除伪类以外的部分(即这里的选择器不包含:last),首先会调用Expr.find的find方法来判断是否为哪一类匹配，在这一实例中，为TAG 匹配。
对从4步中生成的对象进行过滤,匹配’>’(这一步的匹配是由Sizzle.filter触发，由Expr.relative完成),而在匹配’span:last’时则由posProcess来触发，设置later值(:first)以及selector(span)，对span的匹配和 4步骤一样，重复匹配，而对:first的匹配则是第5步的重头戏，也就是调用Sizzle.filter来完成, 由此便生成了最后的匹配结果。

对于有‘,’这样需要合并的选择器，Sizzle在获取结果后会按照文档流进行排序。所以，你可能会遇到这样的问题：把一个结果集append到新的节点后，新的节点可能不会按照你书写的选择器的顺序出现。

以上，可以得出以下结论：大致通过如下步骤来完成：

1.对表达式分组。
2.选择合适的处理顺序。
3.在当前的上下文里过滤要找的节点。并更新上下文。重复这一过程，直到结尾。
4.对结果排序，如果需要的话。
5.返回结果数组。

前向兼容

querySelectorAll

其实不止这一处，在Sizzle的API手册中Internal部分的find 函数（与filter构成了Sizzle的两把宝剑），在传递进该方法的参数可以用 querySelectorAll() （依赖于当前的浏览器执行环境）直接获取时，它则直接调用该方法，既拥有了向前兼容的特性，又达到了速度的提升。

虽然有些环境实现了方法querySelectorAll，但是会有bug。


//如果当前document 支持 querySelectorAll方法,则将浏览器可以完成的匹配完全交给浏览器
if ( document.querySelectorAll ) (function(){
    var oldSizzle = Sizzle;
    // 解决Safari bug 略过 ...
    Sizzle = function(query, context, extra, seed){
        context = context || document;

    // 因为querySelectorAll 在domElement 节点上操作时，存在bug 所以多了这样的判断
    // bug info: http://ejohn.org/blog/thoughts-on-queryselectorall/
        if ( !seed && context.nodeType === 9 && !isXML(context) ) {
            return makeArray( context.querySelectorAll(query), extra );
        }
        // querySelectorAll 可用则直接返回结果，否则才调用 sizzle
        return oldSizzle(query, context, extra, seed);
    };

    // oldSizzle 方法追加进 新的 Sizzle 中

})();

对于任何一个开发者，我想，若浏览器原生已提供了实现方法，他都不会去高效而求繁琐吧。这一点在Sizzle中得到了充分的体现，总是尽可能的使用相应环境下已实现的原生方法。所以在IE的低版本中(比如IE6)Sizzle的表现更加出众，在高级的浏览器中的对比却没有那么大的差别。

扩展

如何定义自己的选择器呢.如果项目中频繁使用某些过滤规则，是不是把它作为一个选择器更有效呢。
既然javascript的对象可以任意扩充，只要我们访问得到，那么我们就可以很轻松得创建出自己的选择器

在jQuery.expr.filter对象中，有很多内置的选择器，比如 ‘disabled’,’text’,那我们就扩充它,比如，想寻找包含span的div元素


// filter的简写  ':'
jQuery.expr[":"] = jQuery.expr.filters;
$.extend($.expr[':'], {
    hasSpan: function(e) {
       return $(e).find('span').length > 0;
    }
});

这样，我们就拥有了 ‘:hasSpan’ 的选择器，使用当然和默认的一样。


//直接用就可以了
$('div:hasSpan')....

比较

再拾YUI3，在经过大幅度变化，以全新姿态出现，从选择器上的执行上效率不逊色于Sizzle几毫，初看YUI时就一直对它的模块细粒度化赞不绝口，但是从如我这样的实用主义者的角度来看，选择器就应该是一个单独的模块，就如同jQuery分离而出的Sizzle。但在YUI term眼里，为了让代码的组织结构看上去更加的理想化，更加具有”YUI3“的特色，将之在代码结构上又细分出一二三，比起Sizzle的简洁，它显得太过学院派。

除此，在选择器的扩展上，sizzle表现胜于YUI3 selector，在实现css1~css3选择器的基础上，又对常用的功能进行了扩展。比如对表单元素快捷操作。据我所知，开发者对这类型选择器的使用频率并不是想象中那么低。既然有了模块的细分，为什么不将这部分作为一个可扩充性的功能点模块融入框架中呢。Sizzle于开发者就如同一块可口味佳的点心，满足我们各式各样的胃口，简洁，不失其功能的强劲，这点非常值得称道。

总得来看，Sizzle与YUI就好象一个面向实际与理想主义的比较。这里没有对错之分，从不同角度来看，都能略窥其各自的禅意。前者从如何为开发者带来便利的角度考虑，让开发者实时觉得它的简单可信赖。后者，也寄托了自己对web的构想，如果浏览器原生全部支持css3-selector，那岂不是完全不用引入该模块了，不过我想，真到那时候，各框架也都会有很大的变化了，只是我对这一天的到来抱有比较消极的态度，这是后话。

总结

本文从总体上讨论了jQuery之Sizzle选择器的实现原理，通过一个初步的流程分析，让各位读者对此有一个大致印象，毫无疑问，更深层次的匹配，也只是它的递归调用，再匹配而已。

这里，没有做与其他框架在效率上的比较，如果你还对它的效率还有所怀疑的话，你可以自行比较。

如果你感兴趣，更推荐你继续去探索在1.4中着重优化的api源码，或许，会给你更多的启示

思考

从jQuery的角度来讲，Sizzle的出现随之也带来了web上的一些新的局面，在追求效率的同时，即使是这类单种子模式的库也是需要将之分离开来，来设计成能够独立使用，独立维护的引擎。

从选择器的角度来讲，Sizzle这次算法的提升，我初步的结论是它结合了DOM这一特定的数据结构，使其每次的匹配能够更精准,以此获得引擎效率上的提升。

我们可否多想想，在思维的开拓上能给我们留下多少财富。很多问题的解决，在换一种新的思维方式后，是不是常常会有柳暗花明的感觉呢。

61个Javascript图片相册脚本

seasun — Wed, 11 Aug 2010 13:22:17 +0000

61个javascript图片相册脚本。涵盖Javascript幻灯片脚本、滑动门脚本、图片轮播循环展示、jquery相册展示插件以及各种漂亮的JS图片特效。

1. Imago (演示地址)

一个基于Mootools框架开发的AJAX Image Gallery 。

2. Dynamic Image Gallery and Slideshow (演示地址)

只有3kb大小的Ajax Image Gallery与Slideshow。

3. mooSlideBox (演示地址)

MooSlideBox是一款基于ajax的小巧幻灯片特效工具，不同于其它LightBox，mooSlideBox采用底部弹出碰撞拖拽的效果。

4. Easy Slide

EasySlide是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。

5. ImageFlow

非常cool类于Flash效果图片查看器。

6. Image Gallery using Spry

一个使用spry框架开发，功能强大，易于集成到网站中使用的Web相册控件。

7. Image Link

Image Link这个javascript能够为图片链接添加额外的样式，比如当鼠标移到某图片上时可以显示一张缩放小图标。

8. UvumiTools Gallery (演示地址)

采用Mootools框架开发的相册图片展示插件。图片加载进度提醒，能够按图片大小自动调整展示窗口大小，搜索引擎优化，多浏览器支持（ FireFox2

9. Hoverbox Image Gallery (演示地址)

这是一个采用纯CSS实现的照片Gallery。当鼠标经过时图片会自动放大。

10. Galleriffic

Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。 Galleriffic还支持分页，从而使得它能够展示更多的图片。

11. BarackSlideshow (演示地址)

采用MooTools1.2开发，幻灯片效果展示图片的JScript程序。

12. 3D Flash gallery (演示地址)

这是一个能够以3D效果展示图片的Flash控件。基于Papervision 3D开发，使用XML作为数据库来存储图片信息。

13. prettyGallery (演示地址)

prettyGallery是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。

14. s3Slider (演示地址)

s3Slider是一个jQuery slideshow插件

15. Simple Controls Gallery

这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。

16. Agile Carousel (演示地址)

Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示，添加文本水印等功能。

17. imgPreview (演示地址)

图片预览jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。

18. flashgallery (演示地址)

Flash Gallery是一个采用Macromedia Flash 2004开发的简单相册控件。使用XML文件来存储图片展示信息。

19. imgAreaSelect

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。

20. Jcrop (演示地址)

Jcrop是一个jQuery插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。

特点：

对所有图片均unobtrusively（无侵入的，保持DOM简洁）
支持宽高比例锁定
支持minSize / maxSize设置
支持改变选区或移动选区时的回调（Callback）
支持用键盘微调选区
通过API创建互动，比如动画效果
支持CSS样式

支持的浏览器：

Firefox 2
Safari 3
Opera 9.5
Google Chrome 0.2
Internet Explorer 6

21. Image Upload and Auto Crop (演示地址)

采用PHP jQuery开发的图片上传和剪切（Crop）工具。

22. Yahoo! UI Library ImageCropper (演示地址)

这是Yahoo! UI Library中提供的一个图片剪裁工具。易于使用和定制，该ImageCropper自带一种默认的剪裁框外观，但可以使用CSS进行扩展和定制。

23. UvumiTools

UvumiTools是一个功能强大的图片剪裁控件，基于Mootools框架开发。可以配置图片剪裁最小尺寸，保持剪裁区域长宽比例，实时预览剪裁图片等功能。

24. MooCrop

MooCrop是一个基于Mootools框架开发的图片剪切工具。

25. Simple Toggle Effect (演示地址)

Simple Toggle Effect提供一种利用CSS与jQuery实现展开与收缩效果的简便方式。

26. Flipping Image Gallery (演示地址)

这个例子利用CSS

27. mooStack

一个mootools插件,它提供一个容器,可以让图片层叠在一起。单击其中每一层的图片，可以让其在最前面展示。

28. Polaroid Photo Viewer (演示地址)

这是一个基于CSS3与jQuery开发的照片查看工具。它可以让用户在页面上随着拖动照片，旋转照片等。

29. Sliding Boxes and Captions with jQuery (演示地址)

这是一个能够直接在图片表面添加标题说明的jQuery插件。当鼠标滑过图片时，标题备注能够以各种动画效果展现。

30. jQuery Fullsize

jQuery Fullsize这个插件允许在标签中加入一个longdesc属性来设置缩略图指向的具体图片。当鼠标移到缩略图表面时单击放大按纽，就能够放大longdesc属性设置的图片。

31. jqueryBook (演示地址)

基于jQuery实现的产品展示控件。提供导航控制按纽，提示产品详细信息的气泡。

32. Flash Gallery (演示地址)

Flash Gallery这个Flash相册能够从指定的文件夹或Flickr读取图片，然后以Slideshow的方式播放展示。播放窗体能够能够根据图片尺寸自动调整大小，支持全屏放大显示。

33. loopedSlider (演示地址)

jQuery Content Slider插件，支持循环播放。

34. slideViewer

利用这个jQuery插件，只需几行代码就能够将一组无序的图片列表转换成可导航控制的相册。

35. Viewer (演示地址)

Viewer是一个利用Mootools框架开发的图片和文本内容幻灯片放映控件（Slideshow）。支持手动与自动播放两种模式。

36. jSlickmenu (演示地址)

jSlickmenu是一个利用CSS3的一些特性（如：旋转、阴影）与jQuery实现的Slick menu。jSlickmenu具有易于使用，外观cool，可定制等特性。

37. AD Gallery (演示地址)

AD Gallery是一个带缩略图导航浏览，可设置照片标题和备注说明信息的jQuery相册插件。可以定义照片切换效果（左右交替，落下，淡入淡出，放大/ 缩小交替等）。照片展示框会根据实际照片大小自动调整。

38. ImageCaption (演示地址)

ImageCaption是一个MooTools1.2 插件用于为页面中的image元素添加带边框的标题说明。边框样式可以自己定义。

39. Facebox

Facebox是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面。

40. EOGallery

基本EOGallery是一个基于jQuery的幻灯片插件。它仅使用jQuery的基本功能和Cody Lindley’s Thickbox来显示较大的图片。而且， EOGallery遵循严格XHTML 1.0和CSS标准，它支持Firefox ， Safari， Internet Explorer 6,甚至在不支持JavaScript/或不支持的CSS的浏览器有较好表现。

41. Jquery图片幻灯效果

基于Jquery的图片幻灯效果

42. GalleryView

jQuery的一个灵活美观的内容画廊插件，非常易于管理和定制

43. YUI Slideshow (演示地址)

YUI Slideshow是YUI3的一个扩展模块，它能够将任意HTML元素的子元素转换一个可定制的Slideshow。该模块提供播放/暂停/向后/向前等控制，能够很方便创建一个播放器界面。支持10几种切换效果。

44. A Simple jQuery Slideshow

A Simple jQuery Slideshow是一个利用jQuery 少量CSS实现的简单图片幻灯片播放插件。图片之间的切换采用淡入淡出的效果。

45. Picasa Web Album Integrator (演示地址)

PWI这个jQuery插件让你可以将你的Picasa Web相册集成到你自己的的网站或博客中。让用户不会觉得你的相册是放在Google中。

46. AnythingSlider (演示地址)

AnythingSlider是一个jQuery Slider插件，可以展示任意HTML内容。提供向前/向后滑动操作，能够自动添加分页导航Tab，可以随意启动自动播放功能。

47. tabSwitch (演示地址)

tabSwitch是一个能够帮助开发人员轻松创建Tabs与sliders的jQuery插件。有7种效果2种样式可供选择。tabSwitch 可以自动或手动播放每一个tab/slide。

48. XML Image Slideshow

采用flash xml构建的幻灯片插件,它的控制栏会根据图片的颜色而自动改变.

49. Simple Image Viewer

利用jQuery内置的slideUp与slideDown方法创建一个简单的图片查看器。

50. Making an infinite JQuery carousel (演示地址)

利用jQuery，以一种简单的方式实现一个类似于走马灯似的图片更迭jQuery插件。

51. Pikachoose (演示地址)

Pikachoose是一个基于jquery的轻量级相册插件,它允许用户自定义幻灯片,按钮,自动播放.

52. Crafting an Animated Postcard With jQuery (演示地址)

利用jQuery创建一张生动的贺卡。

53. jCaption (演示地址)

jCaption这个jQuery插件可以用于为图片添加透明的浮动框来标注标题信息。

54. Slide Thumbs (演示地址)

这个示例介绍了如何利用jQuery实现一个漂亮的图片查看控件。

55. Making a Really Cool jQuery Gallery (演示地址)

Making a Really Cool jQuery Gallery利用PHP扫描某一目录下的所有图片，然后用CSS、jQuery和jQuery Lightbox插件生成一个漂亮的相册。

56. Greyscale Hover Effect w/ CSS

利用CSS Sprites技术和少量jQuery代码实现鼠标移到图片上，能够让图片变成灰白色,移开后还原。

57. YUI Library: Carousel Control (演示地址)

这个YUI Carousel Control控件可以用于在一个有限的页面区域中浏览一组以水平或垂直的方式放置图片。

58. Create a Resizable Image Grid with jQuery (演示地址)

利用jQuery创建一个通过拖动滑块来放大或缩小一组图片的插件。

59. Prototype Carousel

基于Prototype和Script.aculo.us框架开发的图片幻灯切换程序，带左右滑动，并有滑动特效。

60. Animated Navigation with CSS (演示地址)

利用CSS jQuery实现一个具有动画效果的导航条。当鼠标移过某个菜单项时，会出现翻滚的效果。

61. Prototype UI Carousel

Carousel非常适合于在博客或网站中展示相册中的照片，该控件当前支持静态或利用Ajax获取的内容，支持水平和垂直两种展示方式。

Feed enhanced by Better Feed from Ozh

jQuery中的AJAX全局事件详解

seasun — Tue, 10 Aug 2010 04:57:34 +0000

jQuery在AJAX方面是非常强大和方便的，以下是jQuery进行AJAX请求时方法模板：

$.ajax({
type: “get”,
url: “”,
data : {},
beforeSend : function(){
},
success : function(data){
},
complete : function(){
}
});

关于$.ajax()方法的使用，不是明河写这篇文章的目的，今天明河主要讲解当进行AJAX请求时整个完整的事件流程。

jquery的AJAX方法的全部全局事件：

ajaxStart：ajax请求开始前
ajaxSend：ajax请求时
ajaxSuccess：ajax获取数据后
ajaxComplete：ajax请求完成时
ajaxError：ajax请求发生错误后
ajaxStop：ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件，只是通常不绑定全局事件，但实际上这些全局事件非常有用处。

ajax方法的全局事件的用处

ajax全局事件，有个典型的应用场合：
你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据“；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。
不使用全局事件的做法是：
给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
使用全局事件的做法是：

$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//…..
}
function onComplete(event, xhr, settings) {
//…..
}
function onSuccess(event, xhr, settings) {
//…..
}

ajax方法完整事件流

为了更直观的说明，明河使用Axure画了二个流程图，画的不好还请见谅，O(∩_∩)O

AJAX方法完整事件流演示

为了让朋友更容易理解整个事件流，明河做了以下demo。

Feed enhanced by Better Feed from Ozh

jQuery弹出框wBox的一个使用实例

seasun — Mon, 09 Aug 2010 15:10:35 +0000

公司网站越来越多的使用了wBox，比如最新的产品普加邻居，封装了wBox(jQuery的一款弹出框插件)，房产展示页面的房贷计算器采用的就是wBox，搜索结果页面采用的也是wBox，但是相对于其他页面，搜索结果页面每一个li下面会有三个不同的wBox样式，我不可能每个都是手写一段wBox代码吧~
鼠标划上去显示wBox的三个触发链接

经过一番的研究，觉得可以通过下面的代码就解决这个问题：

$.each($('a[rel*=wBox]'),function(key,value){
var $t = $(this),name = this.title, url = this.href,  type = $t.attr("type"), geo = $t.attr("geo")
var str = "";
switch (type) {
    case "map"://地图
        $(this).wBox({requestType:"iframe",target:url,title:name,iframeWH:{width:570,height:370}});
        break;
    case "video"://视频
        $(this).wBox({requestType:"iframe",target:url,title:name,iframeWH:{width:497,height:378}});
        break;
    case "bus"://公交驾车
        str = '';
        var briefTit = name.substring(0, 12) + (name.length > 12 ? "..." : "");
        str += '到这里来
出发地：
目的地：' + briefTit + '
';
        str += '从这里出发
出发地：' + briefTit + '
目的地：
';
        $(this).wBox({html:str,title:name});
        break;
}
});

看看效果吧~
公交驾车wBox的弹出框

地图部分的wBox弹出框

P.S.：其实换一种思考的方法，多想想应该会有更好的解决方法

Feed enhanced by Better Feed from Ozh

我想网 » JQuery

10个给力的jQuery图片插件

2010年最佳jQuery插件

jQuery 1.5 正式版发布

2010年最佳jQuery插件

jQuery弹出层插件(tipsWindow 2.0)

jQuery Tools——不可错过的jQuery UI库

1、选项卡(Tabs)

2、提示工具条(ToolTips)

3、遮罩效果(overlay)

4、滚动效果(Scrollable)

5、突出效果(expose)

6、Flash嵌入

7、表单验证（Validator）

8、范围选取（Rangeinput）

9、日期选择（Dateinput）

10、 综合运用（Combinations）

提供 39种样式高亮语法的JQuery插件-Snippet

10个强大的Ajax jQuery文件上传程序

14个有用的Jquery技巧

jQuery教程之鼠标事件篇

jQuery的click事件

jQuery的dbclick事件

jQuery的mousedown事件

jQuery的mouseup事件

jQuery的mouseover事件

jQuery的mouseout事件

jQuery的mouseenter事件

jQuery的mouserleaver事件

hover事件

25个jQuery的编程小抄[速查表]

1. jQuery 1.2 Cheat-sheet [PNG]

2. jQuery 1.2 Cheat Sheet v1.0 [PDF]

3. jQuery 1.3 Cheatsheet [PDF]

4. jQuery API Browser [Adobe AIR, HTML]

5. jQuery1.1 Cheat Sheet [HTML]

6. jTouch – jQuery Cheat Sheet for iPhone [HTML]

7. jQuery 1.4 API Cheat Sheet [HTML, PDF, PNG]

8. jQuery Selectors [PDF]

9. jQuery 1.3 Quick API Reference [ HTML]

10. jQuery UI 1.7 Quick API Reference [ HTML]

11. jQuery 1.3.2 Cheat Sheet [Microsoft Excel (XLS), PDF, PNG]

12. jQuery 1.1.3 Cheat Sheet [Microsoft Excel (XLS), PDF, PNG]

13. jQuery 1.3 Visual Cheat Sheet [PDF]

14. jQuery 1.4.2 Visual Cheat Sheet [JPEG, PDF]

15. jQuery API [HTML]

16. jQuery 1.4 Cheat Sheet [PDF]

17. jQuery cheatsheet Wallpaper

18. jQuery – YUI3 Rosetta Stone [HTML]

19. jQuery 1.2 by Adrien Gibrat [PDF]

20. jQuery 1.3 Cheat Sheet

21. jQuery 1.3 Cheatsheet Wallpaper [1920×1200, 1680×1050 and 1440×900]

22. jQuery 1.3 Visual Cheat Sheet by Antonio Lupetti [PDF]

23. jQuery Selectors Cheatsheet [HTML]

24. jQuery UI – Effects Cheatsheet [HTML]

25. jQuery Validator Cheatsheet – Elegant Code [PDF]

js/jquery 获取url参数

解决IE6不支持max-height的bug

25个免费的WordPress图片相册幻灯插件

jQuery Lightbox

关于jQuery ready()方法一些用法解释

最常用也是最标准的ready方法

简写的jQuery ready()

不建议使用的ready()方法

解决jQuery（$）库冲突的ready方法

后记

10个jquery动画菜单：插件和教程

插件

LavaLamp

jquery Kwicks 插件

仿Mac的停靠菜单插件

jquery滑动菜单

教程

CSS Sprites2 – 使用jquery制作动画菜单

使用jQuery的动画菜单

使用CSS和jquery创建很酷的动画导航菜单

CSS Dock Menu

使用jquery制作平滑的动画导航

使用jquery实现动画背景图片

初探 jQuery 的 Sizzle 选择器

10、综合运用（Combinations）