是URI，不是URL

URL是uniform resource locator的缩写，是一个特定资源的协议（用什么方式去获取数据）和地址的组合。每一个公开可访问的资源，例如图片，JS文件，HTML文件或者样式表文件，都有一个URL告诉浏览器从哪里下载它们。浏览器会根据这个URL建立一个链接，并开始下载或执行这个文件。

URL其实也是个URI，URI是uniform resource identifier的缩写。URI指定了一个协议用来接收信息，包括一些关于资源的额外的信息。那些额外的信息可能是一个地址也可能不是（如果是的话，那么URI就是URL了），但是它总是跟一个特定的协议和有关联。因此，既然不包含地址信息，data URI也就不是URL了。

Data URI的格式

data URI的格式很简单，在RFC 2397里有清楚的说明（很短，你可以把它全部看完）。基本的格式如下：

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

在这个格式中，data：URI的协议，表明这是一个data URI。第二部分，MIME type，表明了要呈现的数据的类型。拿PNG图片举个例子，它的MIME type是image/png。如果没有指定，MIME type将会默认为text/plain。charset在大多数情况下可以无视，对于图片来说它根本没用。下一部分指明了使用的编码。跟流行观念相反，你不一定要用base 64编码。如果内容不是用base 64进行编码，那么这些数据就会使用标准的URL编码（对URL安全的ASCII字符将会保留原样显示，其他会显示成%xx格式的十六进制编码）进行编码。编码后的数据可能会包含一些没用空格，

Base 64编码

Base 64编码是一个编码规则，通过它数据被转化成二进制码，然后组合成一个base 64符号的序列。Base 64符号包括大写和小写的字母A到Z，数字，符号+和/。=号是用来填充用的（可以查看Wikipedia上的文章获取更多的信息）。你真正需要知道的是base 64编码会使编码过的数据变得更小。

下面的例子是一张GIF图片用base 64进行编码后的data URI（来源）：

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge
8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h
LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g
77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

同一张图片如果不用base 64编码的话将会如下显示：

data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85
%FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE
%CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00
%00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08
%13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C
%A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80
%80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84
%02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D
%BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7
%AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07
%02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03
%AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B

就大小来说，用base 64编码的图片完胜，它明显小多了。

注意：Base 64编码事实上会使图像变大。然而，如果你使用了HTTP压缩，那么你并不会察觉到有什么差异，因为base 64编码的数据的压缩性极好。如果因为某些原因不能使用HTTP压缩的话，那么你可能会想知道你发送的数据究竟有多大，然后权衡下是否值得这么做。

不仅仅用于图像

尽管大部分人在谈论data URI作为在HTML或者CSS文件里嵌入图片的方法，但这里并没有指定是图片。你可以编码然后嵌入任何类型的文件，甚至是HTML本身。Ian Hickson，HTML 5名人（或者恶人，视乎你怎么看）提供了一个工具让你体验下data URI。默认的例子是使用或者不用base 64编码把一个HTML文件转变成data URI。体验一下这个data URI产生器可以帮助你具体化一下核心的概念。

注意：IE8对data URI有安全限制，使得data URI对于非图片的数据的用处大打折扣。

性能影响

data URI最有趣的地方是它可以让你把文件嵌入到其他文件中。大多数的文章都把焦点放在把data URI嵌入到CSS文件里改善性能上。实际上，大量的研究表明，HTTP请求是影响网页性能最主要的因素之一，减少请求的数量可以改善页面的性能。实际上，“最小化HTTP请求”是Yahoo! Exceptional Performance Best Practices的第一准则，它特别提到了data URI：

内联图像使用了data URI把图像数据嵌入到页面中，会增加HTML文档的大小。把内联图像在（已缓存的）样式表里组合起来可以减少HTTP请求和避免页面大小的增加。内联图像还没有得到所有主流浏览器的支持。

这对使用data URI来说是个很好的建议：把它们用在缓存频率最高的地方。通过HTTP下载的普通图片会根据它们的header和浏览器设置进行缓存，这样它们就不用每次请求都被重新下载。Data URI会被当作装载它的那个文件的一部分，所以它是所嵌入的HTML或者CSS文件的一部分。这意味着data URI没有单独的缓存控制策略。嵌入data URI会使你的文件变大，如果文件经常改动的话（例如博客的首页），那么这个变大的文件就会被频繁的下载，使网页速度变慢。

最简单的使用方法是把data URI嵌入到一个强制缓存的外部样式表里。这样的话，在浏览器缓存为空的情况下，网站速度会比较快（因为少了额外的请求），而在浏览器存在缓存的情况下，则体验是一样的。

浏览器支持情况

绝大多数的现代浏览器都支持data URI：
Firefox 2+
Opera 7.2+ - data URI必须少于4100个字符
Chrome (all versions)
Safari (all versions)
Internet Explorer 8+ - data URI必须小于32k

由于版本低于8的IE浏览器不支持data URI，你需要决定是否值得为这些不支持data URI的浏览器提供替代的东西（可以看看Stoyan的文章）。

结论

Data URI对网页来说是个很有趣和独特的概念，可能在将来会被越来越广泛的应用，暂时来说，它大概是最适合用于那些跟性能相关的任务上，但是谁也不知道将会会怎样。但目前你能看到的是使用data URI获取图片时减少额外的HTTP请求带来的一些性能上的优化。另外，Data URI还带来了使用JS动态产生图片的可能性，尽管浏览器对<canvas>的支持的不断增加可能会使得这个方法被淘汰。

Translated by icyfire @ company ON Aug 05, 2010
源文：Data URIs explained
作者：Nicholas C. Zakas

用作测试的是一个含有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"属性就是轻而易举的事情了。

1
2
3

<style id="special_hide">.special_hide { display: none; }</style>
<!--  ...  -->
<div class="special_hide">Special hide DIV</div>

然后在javascript里：

1

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

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

1

$('#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()方法。 禁用/启用样式表的方法只有在很极端的情况下才有必要用到。

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

这是Google的。

上面是Opera的恶搞版，真的太搞了……

这是日本某人用CSS画的哆啦A梦，用来检测浏览器对CSS3的支持程度。我用几个浏览器测试，其中Chrome 4跟Safari 4表现最好，而Firefox 3.6次之，因为它渲染的哆啦A梦的眼睛不会动，而Opera10.5再次之，它不但眼睛不会动，还渲染少了一些渐变效果。至于IE就不说了，你可以自己试试看……

来源：http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html

名称：artDialog
作者：唐斌
版本：v 2.0.9 Betav 2.10 Preview
更新：2010-05-02 2010-05-18
License：GNU Lesser General Public License

简介：artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。

功能：支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架..

优点：

• 自适应内容: 无需预设高宽, 对话框与按钮自适应消息内容的大小
• 文本智能对齐: 如果设置了对话框宽度，短文本居中长文本居左对齐
• 容错能力: 如果定义的宽度高度小于内容大小不会出现错位
• 界面机制: 九宫格布局, 样式钩子与结构丰富, 可定制自适应皮肤
• 跨浏览器支持: 支持 Firefox, Chrome, Safari, IE6+, Opera ..
• 轻巧: 不依赖第三方库, js压缩后不足10kb
• IE6无抖动静止定位: 在 IE6 下可实现与现代浏览器一样完美无闪动静止定位效果
• 智能定位: 使用自定义坐标的时候智能修正位置, 不会超出边界
• 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
• IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件

下载：Google Code

使用感受：
好吧，上面的介绍跟优点都是从DEMO页面抄下来。

还是说说我自己的使用感受吧。首先调用使用的是流行的传入JSON参数的方法，这个我喜欢：

1
2
3
4
5
6
7
8
9
10
11
12
13

artDialog(
        {	
            content:'欢迎你来到对话框世界！',
            lock:true,
            style:'succeed noClose'
        },
        function(){
            alert('你点了确定');
        },
        function(){
            alert('你点了取消');
        }
);

另外在页面载入的时候，会预先弹出一个隐藏的对话框，预先加载了一些皮肤图片，这样可以加快以后弹出框的弹出速度，很聪明的做法。

代码结构清晰，而且扩展起来很方便。

不过虽然优点这么多，但是在实际使用中还是会发现不少问题，下面是我遇到的部分问题：

• IE7的一个iframe bug。artDialog使用的是createElement的方法来创建节点，这跟ymPrompt和lhgdialog不同。而使用createElement方法创建的iframe在IE7下会出现边框，虽然artDialog里面设了iframe的border为0，但是这在IE7下是不会有作用的，解决方法是创建了iframe后用setAttribute('frameborder', '0', 0)，注意需要第三个参数"0"，不然IE7还是不认。2.1中已经修复这个问题。
• artDialog还有个重要的特性是对象重用，之前创建的对象会用一个box装起来，并用id作标识，如果是相同的id，则会用回之前的对象，加快了弹出框的创建速度，但是这在FF之类的浏览器下工作得很好，可是在IE下，这样却会在DOM下产生许多副本，详细情况用IE DOM inspector看看就知道了。在IE下关闭一个弹出框后再打开另外一个，你会发现框了的内容会首先出现之前那个弹出框的内容再出现实际的内容。我的解决方法是……去掉对象重用的相关代码。
• artDialog有个不错的功能：锁定。但是事实上在我这里并没用到，锁定会把屏幕锁住，弹出框不能移动，背景用遮罩盖住，突显弹出框。其实我只是想要个普通的遮罩来突显弹出框而已，不需要锁定，而且锁定时会把滚动条干掉，导致页面会整体移动，个人感觉不太好。不过扩展个overlay功能其实不难。2.1版已经改进了锁定功能，不会发生页面的偏移了。
• 弹出框的定位使用的是黄金比例垂直居中，我不知道这个的好处是什么，实际上的效果并不是很好。水平居中没问题，但是垂直居中有时会太靠顶，所以最后我还是改为普通的垂直居中了。2.1中也作了改进。
• 使用iframe作为弹出内容的话，artDialog会首先出现一个loading的动画，等iframe加载完才显示。这很好，但是如果你的iframe里使用了jQuery的$(document).ready()的话，那恭喜你中大奖了。ready了的代码可能会出现异常，特别是在IE下。onload的速度一般会比jQuery的ready要慢，会是这个原因引起的吗？未作深入研究，所以我直接把这个loading干掉了。

大致上我遇到比较重大的问题就是上面这几个了，希望下一个版本能让我喜出望外。

Update 2010.05.20 版本2.1修复了不少bug也改进了不少功能，作者还真勤劳～跟作者在微博上反应了些问题都在新版本中得到了解决，赞一个。期待最终版。

来源：http://www.findmebyip.com/litmus/

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父元素的背景颜色，因此，我们的代码如下：

1
2
3
4
5

$('.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工作方式相同，不过它选择的是下一个兄弟姐妹。

结论

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

1
2
3
4
5
6
7
8
9
10

$('.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/2010/03/progressive-enhancement-pure-css-speech-bubbles/ http://www.icyfire.me/2010/03/progressive-enhancement-pure-css-speech-bubbles/#comments Tue, 16 Mar 2010 08:16:56 +0000 icyfire http://www.icyfire.me/?p=914 使用CSS2.1和CSS3实现的对话气泡效果，没有用到图片跟javasript，很赞！]]> 对话气泡效果很流行，但是很多教程里的实现都依赖于表现性的HTML或者javascript。这篇教程里包含了用CSS2.1和CSS3实现的不同形式的对话气泡效果，没有用到图片，也没有用到javascript，你可以把它用在你的语义化HTML上。

演示页面用到的CSS文件已经经过详细的注释，你可以看到每个效果具体是由哪些代码实现的。

演示页面： 纯CSS实现对话气泡 （我：请使用支持CSS3的浏览器看，例如FF3.6+，Opera 10.10+，Chrome 4.0+， Safari 4.0+）

纯CSS实现的对话气泡

通过简单如<div>Content</div> or <p>Content</p>的HTML代码，你可以产生如下的对话气泡效果：

增加一个子元素，例如<blockquote><p>Quote</p></blockquote>，你甚至可以创建如下效果的对话气泡：

我鼓励你根据自己的实际需求去使用这些实例，在你的HTML文档中使用其他相关的元素。关键是使用:before和/或 :after这两个伪类去产生基本的形状。

通过使用诸如圆角和变形这些CSS3属性，你可以产生一些更为复杂的形状和方位。这也是我CSS typography experiment里心型的实现方法。

实例代码

这是创建一个经过一些改进的基础对话气泡的例子。更多的实例请看演示页面和它使用到的经过详细注释的CSS文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/* Bubble with an isoceles triangle
------------------------------------------ */
 
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;
 
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}
 
/* creates triangle */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

关于渐进增强

这篇文章里使用到的方法也属于“渐进增强”。样式先是简单的填充了颜色的盒子，然后变成了类似对话框的盒子，继而变成具有渐变背景的圆角矩形或者圆形，最后浏览器根据自身的渲染能力对样式进行渲染。

那些不完全支持CSS2.1的浏览器（例如IE6和IE7）或者不支持需要用到的CSS3属性的浏览器（例如IE8）并不会看到惨不忍睹的画面，它们只是不会有呈现完全的对话气泡效果。但是……

关于Firefox 3.0的警告

Firefox 3.0支持必需的CSS2.1伪类但是却不支持所产成内容的定位。

一些例子在Firefox3.0上的效果已经烂到接近了我所能接受的底线了。它是唯一一个市场份额超过2%（根据NetApplications统计，截至2010年3月为止大约为4%）但是却连基本的对话气泡效果都实现不了的浏览器。

在使用这个技术前，请考虑下支持Firefox3.0的重要性以及你的用户使用这个浏览器所占的比例。虽然它最终会成为一个很少人使用的浏览器，但是基于它对CSS2.1的不完全支持，你应该意识到使用这个技术的时候并没有针对Firefox3.0的很好的后备方案。

Translated by icyfire @ Canaand on Tue, 16th Mar. 2010

原文：Progressive enhancement: pure CSS speech bubbles
作者：Nicolas Gallagher

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

为什么要创建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);

这个函数可以直接运行（This function runs immediately。立刻运行？其实不太明白这里的意思- -），它传递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;

完整的代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

(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后引入它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery plugin: reverseText demonstration</title>
</head>
<body>
 
<h1>jQuery plugin: reverseText</h1>
<p>This jQuery plugin reverses all the text in the selected nodes.</p>
 
<ul>
<li>This text will be reversed</li>
<li>This text will not be reversed</li>
<li>reversed</li>
<li>not reversed</li>
</ul>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.reversetext.js"></script>
<script type="text/javascript">
// reverse even-numbered LI tag text
$("ul li:even").reverseText();
</script>
 
</body>
</html>

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

资源：

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

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

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

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

var iframe = document.createElement("iframe");
iframe.src = "simpleinner.htm";
 
if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}
 
document.body.appendChild(iframe);

来源于：NCZOnline
感谢作者Nicholas（《JavaScript高级程序设计》作者）以及提供方案的Christopher。