一篇jQuery小教程（2）

嗯，说到jQuery的强大之处了，jQuery对象可以接受无数个函数回调/消息/方法（哪一种是正确说法，请高手指教），也就是传说中的Chainability。也就是说我们不必要分两行写，一气呵成：

$(document).ready(function(){
    $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"#fcc", border:"1px solid #f00"})}).blur(function(){$(this).css({background: “transparent”, border: “1px solid #ccc”})});
})


啊呵，又一次貌似完成……又等一等，我们只需要针对IE啊，其他浏览器都可以使用CSS来实现，我们何苦要用JS来降低它们的处理效率呢，所以，我们用了jQuery自带的定义：

$(document).ready(function(){
if ($.browser.msie){
  $(”input[@type=’text’], input[@type=’password’], textarea”).focus(function(){$(this).css({background:”#fcc”, border:”1px solid #f00″})}).blur(function(){$(this).css({background: “transparent”, border: “1px solid #ccc”})});
  }
})

耶！我们真的完成了！嗯哪，要判断浏览器版本？似乎jQuery没有提供，但可以看看这个jQuery插件（plugin）：jQBrowser . 嗯嗯，似乎忘了跟大家说，jQuery还拥有许多超强的插件！有时间我整理几个出来奉献给大家。

对，看看我们这一步的成果：http://realazy.org/lab/jquery/tut/form_hover_step2.html，一定记得用IE6查看。

貌似又完成了一次（汗，前边不是说我们真的完成了么），不！大家看得爽的时候还记得我是做什么的吗？对对对，是Web标准！Web标准提倡什么？结构，表现，交互相分离啊，我们把样式写到了JS里边，相信这不是好事情。难不倒我们jQuery的！我们换种思路，我们把样式在一个class里定义好，在focus的时候加上的这个class，blur的时候去掉这个class不就OK了吗？聪明……jQuery相应的API是addClass和removeClass。过程不累赘了，否则篇幅又得增加一半（我还要睡觉，明天还要上班，可怜的上班族），代码如下：

$(document).ready(function(){
if ($.browser.msie){
  $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("ie_focus")}).blur(function(){$(this).removeClass("ie_focus")});
}
})

我必须承认，我把这个class命名为ie_focus是有点变态。嗯，进一步，虽然我们这个代码不大，但我们也分离出来一个独立文件吧。这是我们的最后步骤的演示：http://realazy.org/lab/jquery/tut/form_hover_step3.html，记得看源码哦。

很简单，对不？jQuery的威力不止于此，还有需多更酷更强的功能留待，你，和，我，共同探索。

P.S. jQuery的代码也很优美，对不？这种函数式编程风格我个人是十分喜欢的，但是大括号，小括号敲到我手疼……所有我又深深地爱上了基本上看不到括号的Ruby，Orz…阿门，晚安……