当前位置

首页 > 博客 > qyt的博客

jQuery 初探

qyt 在 周二, 2007-10-16 16:16 提交


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

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

  1.  
  2. $(document).ready( function() { //网页 ready 后加载此方法
  3.     $('span[id=email]') //定位到<span id="email">元素
  4.         .mouseover( function() { $(this).css("background-color",
  5. "#ffff90") }) //鼠标移上<span id="email">元素后改其css里background-
  6. color的值
  7.         .mouseout( function() { $(this).css("background-color",
  8. "white") }) //鼠标移离<span id="email">元素后改其css里background-
  9. color的值
  10.         .click( function() { //给<span id="email">元素绑定 click 事件
  11.             var origEmail = $(this).text() //取得<span>元素包含的文本
  12.             $(this).hide() //隐藏自身
  13.             $('<input name="email" value="' + origEmail + '" type="text"/>') //创建
  14. 一个<input>元素其值为原来的 email
  15.                 .appendTo("div#email") //把该元素添加到<div id="email">中
  16.                 .focus() //把焦点移到该元素上
  17.                 .keydown( function(ev) { //绑定 keydown 事件
  18.                     if (ev.which == 13) { //回车的键盘 key code 为 13
  19.                         var email = $(this).val() //取出<input>元素此时的值
  20.                         $(this).remove() //移除该<input>元素
  21.                         $('span[id=email]').text(email).show() //显示
  22. 原来的<span>元素并将 email 添加其中
  23.                     }                  
  24.                 })
  25.         })
  26. })

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

示例页面：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!

附件大小
HTML 图标 input_replace_span.html1.7 KB
Topic: 
技术
网络

评论

qyb 在 周三, 2007-10-17 08:35 提交

修改 css 属性还是应该用 .css ，而不是 .attr("style", ...)

因为 attr() 的作用是全部替换，当你用 

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

如果这个 HTMLElement 的 style 还有其他的属性，就都被覆盖掉了

qyt 在 周三, 2007-10-17 09:15 提交

有理

沙龙拔丝 (未验证) 在 周三, 2007-10-17 09:56 提交

超级无敌大帅哥，HIAHIA~~

qyt 在 周三, 2007-10-17 10:58 提交

由于页面上没有提示，担心读者不知道点哪个地方可以修改，所以写一个让人有修改欲望的词组在上面，hoho

netcasper (未验证) 在 周四, 2007-10-25 13:01 提交

bloglines里面连续几天都弹出这篇文章，今天更是一次出现6条。:-(

qyb 在 周四, 2007-10-25 21:30 提交

我也用 bloglines... 及其郁闷.. 不知道什么原因..