用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器$('div')缓存起来了。用作测试的jQuery版本是1.4.2，所以测试结果也只是针对这个版本，在其他版本可能就不是这些结果了。

测试的jQuery方法分别是：

• .toggle()
• .show() 和 .hide()
• .css({'display':'none'}) 和 .css({'display':'block'})
• .addClass('hide') 和 .removeClass('hide')
• 改变<style>元素的一个属性

.show() 和 .hide()

在所有浏览器中，这两个方法在隐藏DOM元素上相对来说比较慢。主要原因在于.hide()方法必须先保存元素的"display"属性，这样.show()才能把元素恢复到原来的状态。这里用到了.data()这个jQuery方法，把信息保存在DOM元素上。为了达到这个目的，.hide()在每个元素上循环了两次，一次用来保存当前的"display"值，一次用来更新样式"display"为"none"。根据源代码上的注释，这样做是为了防止浏览器在每个循环上进行重新渲染（reflow）。.hide()方法还会检查你是否传递了使用动画效果的参数，就算传入一个"0"也会让性能大打折扣。在第一次调用.hide()的时候性能最慢，在之后再调用则会变快。

.toggle()

这个方法是最慢的。它会检查选择器返回的每一个元素当前是否可见，如果可见的话就调用.hide()方法，不可见则调用.show()方法。不但如此，它不仅会检查你是否传递了一个boolean值进去阻止.hide()或者.show()的执行，还会检查看你是否传入了function来进行切换（toggle）而不是对可见性进行切换。看起来这个方法还有很大的改善空间，例如可以先一次过把隐藏的元素select出来，然后调用.show()方法，同时把其余的元素select出来调用.hide()方法。

.addClass() 和 .removeClass()

这是两个很漂亮的隐藏/显示DOM元素方法。在Firefox上它的速度是.show()和.hide()的两倍，而在Safari上则是三倍。不过在IE6，IE7，Chrome和Opera上，两种方法几乎没什么差别。值得一提的是，对于100个DOM节点来说，两种方法在Firefox上相差18ms，在Safari相差4ms，速度的差异只会体现在大量节点选择的时候。不过增加和移除class需要你花费更多的工作，因为你需要创建一个用于隐藏的class，然后还要时刻关注着这个class的优先级以保证DOM能隐藏。jQuery增加和移除class是通过字符串操作的，所以我觉得随着元素上class数量的增加，这个方法会变慢，但是我还没对此进行测试过。

.css({'display':'none'}) 和 .css({'display':'block'})

这两个方法也很漂亮。相对于.addClass()和.removeClass()，IE6/7和Opera上的速度都得到了提升，而在其他浏览器上则能保持水准。当你知道要改变的元素的当前display样式，或者没有通过inline的方式去改变元素的display样式时，这两个方法很好用。如果你通过inline的方式改变了display样式，那么你需要确保在使得元素重新可见时display值要设置正确。如果你只是使用了元素的默认display值或者在css里设置display值，那么你只需要用类似.css({'display':''})的方法移除样式，元素就会恢复到它在css上的样式或者默认display值。作为一个类库，jQuery不能假定元素的display不是通过inline方式设置的，所以它需要被人手的去确定。不过既然你知道你不会去inline的设置display，那么你就可以去避免这个造成缓慢的主要因素。

禁止样式表

纯粹为了好玩，我想：如果我们不在每个dom节点上花功夫，而是去捣鼓样式表会怎样呢？这样会提高速度吗？其实就日常使用来说，上面的测试用到的方法已经足够快了，但是如果页面上有10000个节点需要进行隐藏和显示呢？只是把它们全部选择出来就已经够慢了。如果我可以控制样式表，那么就可以完全避免这些时间花费了。不过我得告诉你，这个方法是有很大风险的。

风险在于控制样式表时的跨浏览器问题。首先，我尝试能不能通过jQuery插入一个带有class的"style"标签，但是却出现了跨浏览器问题。然后我尝试用javascript去创建stylesheet节点和class，但是实在有太多的API了，要搞清楚需要花不少的时间。最后，放弃了编程的方式，我在head区里写了一个带有class的style标签。通过编程的方式来创建stylesheet实在是太慢了，但是如果它一旦被创建好，那么给它一个ID和使用它的"disabled"属性就是轻而易举的事情了。

Special hide DIV

然后在javascript里：

$('#special_hide').attr('disabled', 'true');

搞定！所有带有"special_hide"这个class的元素都显示出来了。要隐藏它们，你只需要……

$('#special_hide').attr('disabled', 'false');

现在它们全部都隐藏了。总的javascript耗时在所有浏览器上都是0-1ms。你的javascript只是用来改变一个属性。当然，浏览器还是需要花费时间去重新渲染页面的，但是实际上你已经避免了javascript的处理时间。如果你调用了.toggle()，.hide()或者 .css()这几个方法，那么这个方法就会失效。因为那几个方法会通过内联方式设置css样式，这些样式有更高的优先级。要重新使这个方法生效，只需调用.css('display', '') 把内联的样式移除掉。这个方法同样需要花费你更多的精力，因为那需要去定义class，同时把这些class赋给页面上需要进行显示/隐藏的元素，但是如果你所要处理的元素数量是极其庞大的话，那么这也许是值得的。

简要回顾一下，下面是改变元素显示状态的方法，按照最快到最慢的次序排列：

• 禁用/启用样式表
• .css('display', ''), .css('display', 'none')
• .addClass(), .removeClass()
• .show(), .hide()
• .toggle()

需要注意的是，在大多数的情况下，这些方法都足够的快了。当你要操作很大的jQuery集合时，那么.show() 和 .hide()方法在IE下就会变得很慢了，这是你可能要用addClass() 或者 .removeClass()方法。 禁用/启用样式表的方法只有在很极端的情况下才有必要用到。

Updated @ 2011.08.30
今天看回这篇文章，发现jQuery跟浏览器的版本都升了不少了，于是产生了重新测试的念头。jQuery使用目前最新的1.6.2版本。

.show() 和 .hide()

.toggle()

.addClass() 和 .removeClass()

.css({'display':'none'}) 和 .css({'display':'block'})

禁止样式表

.toggle()方法依然是最慢的，禁用样式表的方法依然是最快的。.addClass()跟.css()旗鼓相当，当然如何把测试的div再增加点，应该还是能分高下的。另外让我比较意外的是Firefox在这两个方法里的表现实在弱爆了……

Translated by icyfire @ company Jul 26, 2010
Updated 2011.08.30
源文：Now you see me… show/hide performance

HTML

首先，让我们看看下图显示的简单的页面，通过这个教程我们将选择这些元素。

• div.container是包裹元素；
• div.photo、div.title、div.rating是div.container的直接子级；
• 每个div.star是div.rating的子级；
• 当div.star的class为“on”时，它是一个完整的star。

为什么要遍历？

为什么我们要进一步提炼一系列元素，难道是jQuery选择语法不够强大？

好，让我们从示例开始。在上面提到的网页中，当一个star被点击时，我们需要给它以及左边的每个star添加class“on”。与此同时，我们要改变所有star父元素的背景颜色，因此，我们的代码如下：

$('.star').click(function(){
    $(this).addClass('on');
//  如何选取当前对象的父元素？
//  如何获得当前star左侧所有的star？
});

在第二行，我们得到了我们点击的当前对象。但是，如何得到stars的父级？即div.rating。但是，在一个页面中，有很多div.rating。哪一个是我们想要的？如何获得“this”左边所有的star？

可喜的是，jQuery允许我们基于这些基层关系，在现存集合的基础上获得新的元素集合。而这些正是遍历函数发挥作用的地方。

1、children

这个函数得到一组元素的直接子级。

在很多情况下会很方便，看看下面这张图：

• 开始的时候容器中的star全部被选择；
• 给children()传递一个选择表达式将选择结果缩小至选中的star；
• 如果chilidren()每接受任何参数，将返回所有直接子级；
• 不返回孙级元素。

2、filter

这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除。

下面的这个例子直截了当。从 5个star中过滤出class为“on”的star。

3、not

与filter恰恰相反，not()从集合中移除匹配的元素。

看下面这个例子。偶数列的star从选择集合中移除，留下的是奇数行的star。

注意：’Even’和’odd’选择器是从0开始的，从0开始计数，不是从1。

4、add

如果我们想在集合中增加一些元素怎么办？add()函数正是做这件事的。

同样简单明了，photo盒子被添加到集合中。

5、slice

有时候，我们需要根据元素在集合的位置获取集合的子集。sliece()正是做这个的。

• 第一个参数是从零开始的第一个元素的位置，它包含在返回的片段中；
• 第二个参数是从零开始的第一个元素的索引。不包含在返回的片段中。如果省略，将延伸至集合的末尾；
• 所以，slice(0,2)将选取前两个star。

6、parent

parent()函数选取一系列元素的直接父级。

正如下图所示，第一个star的直接父级被选中。非常方便，应当指出，它仅仅返回直接父级，为什么很奇特？因为没有祖父元素或祖先元素被选中。

7、parents

这是复数形式，parents()选择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。

通过给parents()传递.container参数，div.container将被选中，它实际上第一个star的祖父。

8、siblings

这个函数选择一组元素的所有兄弟姐妹，传递一个表达式可以筛选结果。

看看这个例子：

• 谁是第一个star的兄弟节点？其它的四个，对不？
• 如图所示，“odd”的节点被选中。索引是从零开始的，看看下面star的红色数字。

9、prev & prevAll

prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。

如果你正在构建一个星级部件，这将相当方便。第三个star前面的兄弟节点被选中。

10、next & nextAll

这些函数与prev和prevAll工作方式相同，不过它选择的是下一个兄弟姐妹。

结论

最后，让我们来看看如何利用这些函数来解决现实世界中令我们头痛的问题。

$('.star').click(function(){
    $(this).addClass('on');  

//  如何取得当前对象的父级?
    $(this).parent().addClass('rated');  

//  如何获得当前对象左侧的star?
    $(this).prevAll().addClass('on');
    $(this).nextAll().removeClass('on');
});

这就是这篇教程中早期提到的问题，对吗？在这几行代码中我们使用了这几个遍历函数。

• 在第5行，看看parent()函数，啊哈，真简单。
• 在第8行和9行，prevAll()和nextAll().选择填充的star和空的star。

现在，遍历函数是做么的方便。当在一起使用时，它们将更加强大。也就是说，一个函数的输出是另一个函数的输入，它们是链式的。

谢谢你的拜读，希望这篇教程在你通过jQuery选择html元素时更容易。你有什么想法？哪个遍历函数是我们遗漏的？

转自：Denis' Blog
原文：10 Really Helpful Traversing Functions in jQuery ]]> http://www.icyfire.me/2010/03/10-really-helpful-traversing-functions-in-jquery/feed/ 0 http://www.icyfire.me/2009/10/how-to-develop-a-jquery-plugin/ http://www.icyfire.me/2009/10/how-to-develop-a-jquery-plugin/#comments Wed, 28 Oct 2009 15:35:00 +0000 icyfire http://www.icyfire.me/?p=882 jQuery是当前最为流行的JavaScript库，许多网站使用它来实现一些动态效果和Ajax功能。然而，很少的开发者会深入去研究插件的开发。 在这篇教程里，我们将会创建一个简单的插件来解释一些基础。这个插件的作用是将一个或者多个选择的节点的文本翻转。 Translated by icyfire @ Canaand on Wed, 28th Oct. 看得懂代表你理解能力强，看不懂代表我翻译能力烂…… 继续阅读 →]]> jQuery是当前最为流行的JavaScript库，许多网站使用它来实现一些动态效果和Ajax功能。然而，很少的开发者会深入去研究插件的开发。

在这篇教程里，我们将会创建一个简单的插件来解释一些基础。这个插件的作用是将一个或者多个选择的节点的文本翻转（示例页面）。

为什么要创建jQuery插件？

总而言之，一个词：重用。通过扩展jQuery，你可以创建一个可以在其他任何网页上使用的可重用组件。你的代码会被封装起来，减少了在其他地方函数名冲突的风险。

jQuery的工作原理

jQuery传递DOM元素或者一个包含CSS选择器的字符串到其核心函数，然后返回一个jQuery对象，这个对象是一个类似数组的DOM节点集合。这些节点关联了一个或者多个的方法。例如：

// color all <p> tags red
$("p").css("color", "red");

注意：虽然jQuery库的名字是"jQuery"，但是它提供了一个快捷的变量"$"来引用它。需要注意的是，其他的JS库也有可能会使用"$"。

jQuery插件的工作原理

jQuery允许添加方法到它的库里。当这些方法被调用的时候，jQuery对象会被传递过去。DOM节点可以根据需要随意操作，同时方法应该返回"this"以便链式调用其他的方法。

我们的示例插件会以以下的形式调用：

// reverse the text in all <p> tags
$("p").reverseText();

我们还会增加两个可选的参数，minlenght和maxlength。当这两个参数被使用的时候，字符串的长度必须在这两个参数的值之间翻转才会发生。

插件的声明

插件的定义使用到了jQuery的fn方法，例如：

jQuery.fn.reverseText = function(params) { ... };

之所以使用"jQuery"而不是"$"是想确保不会跟其他的JS库冲突。我们所有的内部代码也都应该这样。但是，我们可以通过使用匿名方法（anonymous function）来帮我们少打几个字和减少文件的大小：

(function($) {
	$.fn.reverseText = function(params) { ... };
})(jQuery);

这个函数会立刻被执行，它传递jQuery作为一个命名为"$"的参数。因为"$"是局部变量，所以我们可以假定它一直作为jQuery的引用而不是其他库的一个全局变量。

插件参数

我们为我们的插件设置两个参数：minlength和maxlenght。最简单的方法是把它们作为函数的变量，例如：

(function($) {
	$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// example
$("p").reverseText(0, 100);

但是如果我们之后想增加参数呢？我们的插件可能会有很多的选项，变量处理在这种情况下很快就会变得复杂。作为一个替代方案，我们可以传递一个JSON对象给方法：

(function($) {
	$.fn.reverseText = function(params) { ... }
})(jQuery);

// example
$("p").reverseText( { minlength: 0, maxlength: 100 } );

reverseText函数的第一行应该定义一组默认参数，用户可以自定义这些参数的值去覆盖它们。jQuery的extend函数可以帮我们实现：

// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);

这里，params.minlength等于0，而params.maxlength等于99999，直到调用时被新的值覆盖。

插件代码

我们可以开始写我们的主要代码了：

// traverse all nodes
this.each(function() {

	// express a single node as a jQuery object
	var $t = $(this);

	// find text
	var origText = $t.text(), newText = '';

	// text length within defined limits?
	if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {

		// reverse text
		for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
		$t.text(newText);

	}

});

解释：

• 方法this.each遍历了所有的jQuery DOM节点，并调用了一个匿名函数。
• 在这个匿名函数里，'this'代表了一个节点。我们把这个jQuery的节点集合赋值予$t，这样我们就能使用jQuery的方法了。
• 变量origText被赋予了节点的文本值，而变量newText则被设为一个空的字符串。
• 如果origText的长度介于params.minlength和params.maxlength之间，那么通过一个循环，我们把它的值进行了翻转。然后，我们相应的更新了DOM节点的文本值。

别破坏连锁！

最后，切记要返回一个jQuery对象，这样其他方法可以进行链式调用了：

return this;

完整的代码

我们的插件代码终于完成了：

(function($) {

    // jQuery plugin definition
    $.fn.reverseText = function(params) {

	// merge default and user parameters
	params = $.extend( {minlength: 0, maxlength: 99999}, params);

	// traverse all nodes
	this.each(function() {

	    // express a single node as a jQuery object
	    var $t = $(this);

	    // find text
	    var origText = $t.text(), newText = '';

	    // text length within defined limits?
	    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {

		// reverse text
		for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
		    $t.text(newText);

	    }

	});

	// allow jQuery chaining
	return this;
    };

})(jQuery);

文件保存为：jquery.reversetext.js。之后在HTML页面里我们可以在加载jQuery后引入它：

jQuery plugin: reverseText

This jQuery plugin reverses all the text in the selected nodes.

This text will be reversed
This text will not be reversed
reversed
not reversed

现在这个页面的list的第一行和第三行都被翻转了（记住，第一项是从0开始）：

资源：

• 查看插件示例页面
• 查看插件代码
• 现在插件和实例代码

现在你应该对jQuery插件开发有不错的了解了。SitePoint JavaScript forum也是一个学习的好地方。

Translated by icyfire @ Canaand on Wed, 28th Oct.

作者：Craig Buckler
原文：How To Develop a jQuery Plugin

介绍

又一个实现Lightbox效果的jQuery插件，不过采用了Mac系统的样式。它主要有以下功能：

• 弹出的窗口有很漂亮的阴影效果。
• 关联的对象（就是rel标签的值一样）会成组显示，上面还有导航的按钮（上一项，下一项）。
• 可以显示图片、内联、ajax和iframe内容。
• 可以通过设置参数和CSS定制效果。
• 通过easing插件可以实现fancy transitions效果（就是一些动画效果）。

演示

用法

1.引入必须的js库

如果要使用一些动画效果，还要引入以下js

2.导入CSS文件，由于CSS里使用的图片默认跟CSS是放在同一个目录下的，所以如果你的CSS跟图片分开放，记得修改CSS里的图片路径。

3.创建一个链接元素。
图片

inline内容

This shows content of element who has id="data"

iframe框架

This goes to iframe

This goes to iframe

Ajax

This takes content using ajax

可选项：如果要显示标题，可以通过设置a里的title属性实现。
注意：如果显示的为iframe或者inline内容而且在他们里面包含有可以点击的对象，那么把hideOnContentClick属性设为false，不然那个点击就会跟hideOnContentClick这个效果冲突了。
4.使用jQuery选择器调用功能。
例如：

$(document).ready(function() {

	/* This is basic - uses default settings */

	$("a#single_image").fancybox();

	/* Using custom settings */

	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	$("a.group").fancybox({
		'zoomSpeedIn':		300,
		'zoomSpeedOut':	        300,
		'overlayShow':		false
	});
});

相册效果需要把同一个相册的相片的"rel"属相设为一样的值。

参数

兼容性

支持最新版本的FireFox, Safari 和 Opera ，还有 IE6 和 IE7。另外稍微测试了下，Chrome也支持。

下载

请到Google Code下载。文件包含了Fancybox这个插件以及实例。另外jQuery和easing这个插件也包含在里面。

FAQ

1.根本就运行不了。图片在新的窗口打开了。出了虾米错？
检查下你是否已经导入了所有的文件以及设置正不正确。
2.Fancybox可以在flash内容上面显示吗？
可以。看这里。
3.可以在iframe里调用代码吗？
因为Fancybox这个插件是依附在页面body上的，所以不能这样调用。如有需要请修改Fancybox的代码。
4.有没有Wordpress上可以使用的插件？
有一些，你可以试试这个。
5.怎样在其他元素上关闭Fancybox？
调用$.fn.fancybox.close()就行了。

以上内容基本都来自或者翻译自官网http://fancybox.net/。
这个东西其实在很早前就被我运用于项目了，当时还是1.0版本左右，后来作者很久没更新了，直到jQuery出了1.3后作者立刻就出了新版本了～
icyfire 2009-07-29

这个小插件（灰常小）实现了类似机场里信息板的文字效果。

官网：http://www.unwrongest.com/projects/airport/

下载也请到上面网站。

用法：

问题：
1.只支持英文，外加一个连字符。看代码就知道怎么回事了。
2.另外，大写英文也没用，它会帮你转为小写。
3.会发现字符转换时会有类似抖动的效果，那是因为字符在某些字体下的宽度是不同的。解决方法有两个，那么设font-family:monospace;要么为装载字符的span加上样式设置宽度，例如：(#stuff span { width: 20px; float: left; display: block;text-align: center;}。
4.你会发现，就算有些地方是空白，它还是会在转动，那是转换字符的区域的长度就是传入参数里的字符串的最大长度。难道机场的也是这样的？没什么印象了。

--by icyfire 2009.07.16 @company

已经厌烦了用alert去调试js吗？那别错过这个js了。先不说啥了，点击上面的代码看看效果吧。
利用这个js，你可以轻松的在js输出任何信息不同的信息会有不同的图标表示。而且不像alert，blackbird不会中断js的执行。

首先介绍下官网：
http://www.gscottolson.com/blackbirdjs/
我上面的demo以及下面将会说到的都是来源自这个网站。

下载：
先把需要用到的文件下载下来，可以点击这里下载。下载下来的zip会解压出很多文件，你会看到它还提供MAC OSX版本的文件。我们需要用到的是：blackbird.js，blackbird.css以及blackbird_icons.png和blackbird_panel.png两张图片，另外由于Blackbird是基于jQuery的，所以还需要下载jquery，请自行到jQuery网站下载。需要注意到是Blackbird用到是1.2.6版本。

配置：
然后在页面引用这些资源：

需要注意到是两种图片的位置必须放置正确，默认是跟css同目录下，如有需要自行修改css文件

使用方法：
添加log的方法很简单，看demo那里的代码就清楚了：

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

从上面代码可以看出，log可以分为4种类型：debug、info、warn跟error，在输出面板上分别会用不同的icon表示。

另外你还能使用profile方法记录代码的执行时间，代码就不贴了，请参见demo里关于profile方法的代码。作为profile方法的那个字符串将作为一个标识，如果在第二次调用profile方法时使用相同的字符串的话，则两次调用profile方法之间的时间间隔会被记录下来。跟上面4种类型的log一样，profile在显示面板上也有专属的icon。

API：
除了上面提高过的几个方法外，Blackbird提供其他很多方法供调用。

键盘控制：
可以通过键盘上的快捷键控制面板。
F2用来显示或者隐藏面板，相当于toggle()方法。
Shift + F2用来移动面板，相当于move()方法。
Alt + Shift + F2是清除功能，相当于clear()方法。

图标解释：
Blackbird的控制台面板上有很多图标，左边5个分别为：debug信息的开关，info信息的开关，warning信息的开关，error信息的开关，profile信息的开服按。而右边5个则分别为：切换面板大小，清除log，关闭面板。关闭面板并不会把上面的log清除。
另外可以通过Alt + 点击信息图标来单独显示那个图标对应的信息。

修改命名空间：
如果有其他的js使用了跟Blackbird相同的命名空间（namespace），则可以通过修改以下的代码来修改命名空间：
var NAMESPACE = 'log';
修改了命名空间后，则调用方法也需要作相应的改变。例如var NAMESPACE = 'myCustomLog';以log.debug()
为例，则需要改为myCustomLog.debug()。

浏览器兼容性：
IE 6+，FF 2+，Safari 2+，Opera 9.5
另外我在Chrome 2测试也没问题。

补充：
面板上有个Visible on page load的功能，就是用来开关加载页面后显不显示的功能。实现方法是通过cookie。详情可以看下载回来的demo页面代码。
另外个人觉得这个Blackbird并不能完全代替alert功能，因为毕竟它要在页面插入自己的代码，这样就会破坏了页面原有的DOM结构，可能会影响到某些需要对DOM进行操作的js。

更多的详情也请到官网进行查看。

--by icyfire @Home on 2009.06.19

var ajaxManager1 = $.manageAjax({manageType: 'abortOld', maxReq: 0});
ajaxManager1.add({
  success: function(html) {
    $('ul').append('
'+html+'

');
  },
  url: 'test.html' });