15 Days of jQuery(转载)

15 Days of jQuery(Day 0)---JQuery - What, Why, When, Where, Who
what
jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得javascript更加有趣。

如果你这样想：“孩子，我需要另外一个javascript库，就好比我I need another hole in my head”那么加入这个俱乐部吧。这正是我第一次遇到的时候所想的。

我已经用过了Moo.fx, Scriptaculous, TW-SACK, 和 Prototype. 我曾参与了RICO, Yahoo YUI和其他一些库的开发。

没有了PHPjavascript和我一点也不亲近了。但是我还是尽全力保持头脑清醒，并尽量保持用AJAX去思考。

所以当我遇到jQuery的时候我想:"还需要另外一个javascript库吗?不了,谢谢..."

why
为什么我改变我我对jQuery的看法，以及为什么你要考虑去使用它?
很简单,只要你看一眼过使用jQuery的页面你就会发现它是如此的简单易用.只用很少的几行,就能表现出很优雅的效果.
有一天当我突然看到一些用jQuery写的代码时我一下子豁然开朗了. 早茶的过程中,我例行公务的去翻阅我的订阅,去看每日必看的设计博客的时候我看到了一个用jQuery写的javascript的例子.事实证明,这些代码还是有些和浏览器关联的bug,不过这些概念还是我以前从来没有见过的.

还有那些代码...

代码看起来很简单看起来不像我以前见过的.但也不无道理.

我开始通读文档,并且惊奇的发现用一点点代码竟然能做这么多事情.

when
你应当在你需要的时候使用jQuery.

给你一个小型的库文件
DOM强大的控制能力
不费吹灰之力的工作,和少许的努力.

或者

快速的通过AJAX
没有大量无用的代码
和一些基本的动画效果

但是

如果你需要超级花式效果,动画,拖放,和超级平稳动画,那么你可能想使用Prototype.他是一个有大量动画效果的类库.

where
你可以jQuery的官方网站下载到他的源代码(10K).

who
jQuery was created by John Resig.

查看原文
================================
15 Days of jQuery(Day 1)---比window.onload更快一些的载入

[Copy to clipboard] [ - ]

CODE:

$(document).ready(function(){
// Your code here...
});

你可以用他来载入任何你想要载入的javascript，并不一定要保留jQuery的编码风格。让jQuery同时去执行多个函数也是可以的。

你以前可能见过类似于init()之类的函数，你会发现jQuery会快很多。

在以后的教程里我们会一遍又一遍的用到这个函数。

OK你现在可以尝试一下代码：(记得把jQuery引用进你的页面哦，不记得的话看看上篇。)

[Copy to clipboard] [ - ]

CODE:

});

很Easy，不是吗？ 用几分钟时间做的双色表格。

查看原文
==============================
15 Days of jQuery(Day 2)---很容易的制作双色表格

[Copy to clipboard] [ - ]

CODE:

<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
</tbody>
</table>
<p>PS: 飘飘说我的table没有<thead>,我知错了...</p>
</body>
</html>

预览地址
这里有一个jQuery的技巧不得不提一下：
jQuery的链式操作，什么是链式操作呢？ 我们来看看
本来应该写成这样子的：

[Copy to clipboard] [ - ]

CODE:

但是我们写成了：

[Copy to clipboard] [ - ]

CODE:

因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样子如果有很多对象并且在他们身上发生了很多动作那么就会节省很多代码。（我暂时是这样理解的，也不知道对不对希望高手能够斧正。）

原文地址   双色表格制作原文
=================================
15 Days of jQuery(Day 3)---巧妙的伪装链接

[Copy to clipboard] [ - ]

CODE:

这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是www.website.com?aff=123,则可以在状态栏显示为www.website.com.

问题
你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.并且还要给每个链接添加这种效果那么你肯定会厌倦的.加入有一天你要修改任务栏里显示的链接的时候估计你会疯掉的.

jQuery的解决办法
首先
我们想让javascript尽快的掩饰我们的链接所以我们应该先从这里开始:

[Copy to clipboard] [ - ]

CODE:

$(document).ready(function(){
//code goes here
});
</script>

当DOM准备好的时候我们放在ready里的代码就开始执行了.

接下来

要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL:www.affsite.com并且同样的信息会显示在浏览器的状态栏(IE Only).

[Copy to clipboard] [ - ]

CODE:

告诉jQuery找到有class="affLink"的链接

[Copy to clipboard] [ - ]

CODE:

$('a.affLink')

添加一个鼠标划过事件

[Copy to clipboard] [ - ]

CODE:

$('a.affLink').mouseover(function(){window.status=this.title;return true;})

简单的说:找到class="affLink"的所有链接,当鼠标划过它们的时候改变浏览器状态栏信息为该链接title的内容.这个在FireFox并不能正常的工作,只是在IE里起作用.在FireFox的状态栏只是显示一个"Done",或者更准确的说,鼠标划过超链接对状态栏并没有任何影响.我没有更多的浏览器测试.

继续-mouseout
jQuery可以让我们用"链"的方式,像这样:

[Copy to clipboard] [ - ]

CODE:

$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});

这点代码告诉jQuery改变浏览器状态栏信息,或者当鼠标不再停留在链接上时返回"Done".
如果你不适应jQuery的这种链的工作方式,那么你完全可以这样写:

[Copy to clipboard] [ - ]

CODE:

$('a.affLink').mouseover(function(){window.status=this.title;return true;});
$('a.affLink').mouseout(function(){window.status='Done';return true;});

这就看你了.

把这些代码放到一起:

[Copy to clipboard] [ - ]

CODE:

$(document).ready(function(){
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
});
</script>

最后的想法
你们当中可能觉得今天的课程太简单了,有些还可能还是有点不太明白,因为你们不是二级经销商.
In “Days” to come you’ll see me tackle issues that get more involved and apply to almost anyone with a website - whether you monetize your traffic or not.

原文地址

=============================
15 Days of jQuery(Day 4)---安全邮件列表

规则提到如何防止垃圾邮件:不要把你的邮件地址放到任何一个mailto:链接中.
在与垃圾邮件恶魔做斗争的过程中我们的网页设计师和程序员总结出了一些有创意的解决办法,让我们快速的看一些这些常见方法的缺点(或多或少有一些).
name [at-no-spam] website.com
问题:链接式的更方便,而且把邮件地址敲入收件人栏还有可能会出错.

联系方式
问题:你冒着这么大的风险就是因为有一个垃圾邮件借用你的帐户发送大量的垃圾邮件(除非你使用真正的安全邮件脚本).而这样就扼杀了那些只想给你发个简单邮件的用户.

javascript加密
问题:你的邮件仍然暴露在光天化日之下,即使你使用了复杂的密码技术给它带上面具.还有谁希望为了发送一封邮件而启用第三方的解密网站,反正我是不会.

藏在一种简单的形式后面
(有一个例子,但是打不开了.)http://simon.incutio.com/contact/
我能想到的没有人…但是让我们看看是否我们能改进观念。

可能的解决办法:AJAX

• 我提供的解决方案将比目前设计师们使用的方法有如下优势:
• 易于实施
• 易于修改
• 还有一些小小的花哨的效果
• 不用第三方工具来加密邮件地址
• 没有邮件地址暴露在光天化日之下

最后我想说明一点,我认为电子邮件靠这种闪烁其词的加密手段来躲避垃圾邮件还是非常不明智的.在实践中,我认为电子邮件加密是相对安全的,但是客观事实是,电子邮件还是在html原代码里.

概念
1.用jQuery从服务器上把html文件内容抓下来.
2.把包含邮件链接的html文件放到好的容器中是一种简单的保护机制.

示例
我要示范一些例子来显示邮件链接地址,当访客点击一个按钮或者一个链接的时候,页面就会跳转到对应的那个例子里.
按钮点击--立即显示
链接点击--淡出
页面载入--淡出
页面载入--立即显示
(说明:所谓的立即显示,我的意思是说"没有花哨的效果而尽快的显示电子邮件地址")

代码
这里发表非商业共创使用许可,如果你希望将代码使用在你的商业产品中时,请联系我.我正在一个新的CMS for web designers中使用它.

为什么这种方式比普通的mailto链接安全?
真正的问题是垃圾邮件制造者会使用自动化软降从html源文件中寻找电子邮件链接,这种做法和google一样:使用相关链接.
他么就和我们大部分人一样懒惰.所以很难所他们不会拿个本子放在键盘旁边记下你的电子邮件地址.
请查看我提供的示例的源代码,你将不会在html里找到任何的邮件地址.
这几坚实的保证了你绝对不会收到垃圾邮件,只会从朋友或者浏览者那里收到邮件.
但是从页面中移除邮件地址,.....................

最后一点说明
先仔细看看前面三个例子,你会看到我使用了AJAX回调函数来触发slideDown() 和 show() 效果.
换句话说,我希望AJAX调用收到信息(html)时jQuery才开始slideDown() 效果.把秘密粘贴到我们简单的服务段脚本并且等待服务器返回信息.

正确的方法:

[Copy to clipboard] [ - ]

CODE:

});
});

错误的方法:

[Copy to clipboard] [ - ]

CODE:

});

原文地址
=================================
15 Days of jQuery(Day 5)---包起来--懒人用Jquery生成的HTML

[Copy to clipboard] [ - ]

CODE:

</div>
</div>
</div>

所有这些divs充当一个给图片添加投影效果的"钩子".
这不见得好,我们可以把源代码精简成这样:

[Copy to clipboard] [ - ]

CODE:

按着这个思路...

目标
在这里,我要想你展示如何用jQuery轻而易举的将多于的标记从你的源代码中剔除.运
用这个方法,让你的代码更加干净(更重要的是)将使以后变换布局容易的多.

解
这里,看看jQuery是如何击退这个问题的.

[Copy to clipboard] [ - ]

CODE:

});

图片就可以保持这样了:

[Copy to clipboard] [ - ]

CODE:

仔细看看
$(document).ready() 是jQuery版的window.onload()
$("img.dropshadow") 告诉jQuery找到带有class="dropshadow"的图片,如果你想用一个id你可以这样: $("img#dropshadow")
wrap() (wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis. )

最后的结果
傻乎乎的图片,但是和original Onion Skinned Drop Shadows用的是一样的.

[Copy to clipboard] [ - ]

CODE:

     <p>View the source of this page and you'll see the huge difference in markup!</p>
</body>
</html>

(这里只是代码,没有图片.要看效果去这里)

jQuery和其它解决方法的比较
jQuery的网站上有一个到Ajaxian网站的链接,那里有用另外一个javascrip库创建的Onion Skin Drop Shadow ,我相信他的代码复杂程度和代码量现在看来自不待言.我宁愿使用jQuery.(怎么?你猜到了..)
平心而论,没有一个库是对于每一个工作或每一段代码都是合适的.本教程不是为了证明jQuery是一切javascrip类库中的老大.
试试Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.如果你找到了一个你用起来比较顺手的,那就去用它吧.
jQuery对于我来说只是一个工具.我只是希望这个教程能够提供给你更多使用它的方法.

有关jQuery的工具
jQuery用难以置信的简单来操作DOM. 你应该花些时间看看jQuery能用来做什么用下append(), prepend(), before(), after(), html(), and remove().

QUOTE:

来自jQuery Docs
arap(String html)
把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包装完成之后再行添加。
示例:

[Copy to clipboard] [ - ]

CODE:

HTML

[Copy to clipboard] [ - ]

CODE:

<p>Test Paragraph.</p>

结果

[Copy to clipboard] [ - ]

CODE:

<div class='wrap'><p>Test Paragraph.</p></div>