jQuery 初探

记得两年前刚开始玩 flickr 的时候，贴心的使用体验一下子就征服了我。其中对一个更改照片主题的效果印象尤其深刻：鼠标移到照片的主题上，这条文本背景变成淡黄色；左键点击，文本变成输入框；输入新名字后回车，名字更改完毕。整个过程不像在操作网页，倒是像在使用文本编辑器。

由于对 html，javascript 所知甚少，隐藏在这神奇效果后面的技术令我叹服不止且念念不忘。随着后来看了一点点 Ajax 方面的东东，感觉到这应该是页面上的元素替换。这两天尝试了一下 jQuery，想起了这个当年让我耳目一新的页面效果，实现之：

完成后，心情一阵悸动，哈哈，好久没这么爽了，两年来压在心头的谜团就这么解掉了。

示例页面：input_replace_span.html

更新：

上面的代码是精炼过的，本来面目可不是这样，花了许多时间 refine，将收获总结如下

1.用 hover 的方法可以替换 mouseover 和 mouseout，将两句话写在一句里面。但是在这个地方，hover 却还有些问题，input 变成 span 后，有时鼠标不在 span 上，它的背景色仍然是淡黄色（Fx 有此问题，IE 没有）

2.attr 修改属性的方法固然好，但是对于 style 属性因为 css 里面又有各种描述，所以 jQuery 做一个 css 方法不是白做的，理由见回复

3.在匿名函数里面，本元素用 $(this) 表示就 ok 了，没必要再用 selector 定位一次

4.span 在被 input 替换的时候，不用 remove，只用 hide 即可，到需要它的时候再 show 出来。这种方法明显对性能有好处，否则如果 remove 掉再 appendTo 进来时，还要重新绑定一系列事件响应函数

5.jQuery 的 API 文档里面对事件响应内的匿名函数的参数没有言及，它是可以传递参数的，代码里的 keydown 事件就传了 ev 进去

6.对于键盘响应的 key code，Fx 和 IE 支持的标准不同，网上的示例基本都是 key=window.event?ev.keyCode:ev.which 这样解决的。jQuery 包装了一层，所以在这里用 ev.which 即可

7.可以将 appendTo，keydown，focus 这些函数写在一条语句里面，不过保证性能的同时也要兼顾代码可读性

Write Less, Do More. Let's Go!

attr("style", "background-color:#ffff90");