小试牛刀——一篇jQuery小教程

写个小教程，以期能让大家对jQuery有所了解，甚至喜欢上它（请不要怪我）。

不废话，先说明我们的目的。我们知道，当代浏览器（modern browsers）的文本框的聚焦(focus)样式可以通过CSS的伪类:focus来设置。假设我们有这么一段代码：

<form>
	<dl>
		<dt>Name: <dt>
		<dd><input type="text" /></dd>
		<dt>Password: <dt>
		<dd><input type="password" /></dd>
		<dt>Textarea: <dt>
		<dd><textarea></textarea></dd>
	</dl>
</form>

则我们这样的CSS就可以搞定focus样式：

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }

简单不过，对不？你可以拿任何一款当代浏览器来测试（Firefox, Safari, IE7）： http://realazy.org/lab/jquery/tut/form_hover_step1.html。IE6? 呵呵，这就是本篇教程的目的所在，没错，既然IE不支持:focus，我们只能Using DOM Scripting to Plug the Holes in CSS，不过我们用jQuery来实现。

先来看看jQuery的工作方式。jQuery使用美元符号$来返回一个jQuery对象，然后我们就可以使用jQuery提供的API（接口。很多很多很实用，赶紧参考Visual JQuery）进行操作了。

我们都不懂程序，对，我假设你跟我这样，只是了解一些最基本的语法（对不起大虾了，高手不要自扁身份）。既然我们不懂，我们就用CSS的方式来思维。

首先我们要从DOM中获得type="text", type="password"的input和textarea。对，我们伟大的美金出场了，哦，是美元符号。参考http://proj.jquery.com/docs/Base/Expression/CSS/，我们知道，我们可以这样选择到他们：

$("input[@type='text'], input[@type='password'], textarea”)

选中它们以后呢？我们就要靠事件（event）来处理了。:focus对应的的事件是onfocus，然而jQuery讨厌on，于是就是focus了，多好（参考http://proj.jquery.com/docs/EventModule/）。于是我们知道我们该这么做：

$("input[@type='text'], input[@type='password'], textarea”).focus();

嘿嘿，我们已经迈出一大步了！我们要继续告诉focus该做些什么。在jQuery中，我们通常需要一些匿名函数来帮我们干些事情，不理解不打紧，让我们继续：

$("input[@type='text'], input[@type='password'], textarea”).focus( function(){ } );

我们的目的是什么？对，是给聚焦的文本框加上样式。jQuery有一个css (prop)的API，参考前面的CSS，我们可以这么写：

css({background:"#fcc", border:"1px solid #f00"})

bingo! 离成功仅一步之遥。我假设你知道，返回对象自身使用this。在jQuery中，返回自身当然也是this, 但是，需要返回的对象还是jQuery对象，我们还必须使用美元符号。所以是$(this)。那么：

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

That’s it! 然后我们该怎么执行这段代码呢？我们知道有一个body onload=""可以用，也知道有一个window.onload可以用，但jQuery提供了一个更佳的方案，让我们可以进一步分离结构与交互。

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

所以我们只需将我们的代码放到里面去：

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

呵呵……貌似成功了。等等，我们要送佛送到西天，好人做到底……在上面的交互中，只有聚焦的情况，那么失焦的时候呢？嗯，我们不要想当然，失焦？那么聚焦的样式就自动清楚清除了嘛~不会的，除非我们明确告诉它。依瓢画葫芦：

$(this).blur(function(){$(this).css({background: "transparent", border: "1px solid #ccc"})})

嗯，说到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…阿门，晚安……

This entry was posted on Thursday, August 31st, 2006 at 00:34 and is filed under JS / Dom. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

limodou Says:
August 31st, 2006 at 08:22

非常好！刚开始了解jQuery，希望有更多好的文章！

smzz Says:
August 31st, 2006 at 09:23

好！
以后有希望和网页里夹杂的<a herf=”#” onclick=”func();return false;”>XXX</a>说拜拜了！

huashancc Says:
August 31st, 2006 at 10:18

易懂，8错！

old9 Says:
August 31st, 2006 at 14:00

大赞~

PR Says:
September 2nd, 2006 at 23:30

顶一个！多写点心得

dngpng Says:
September 3rd, 2006 at 05:56

可能有点跟主题无关，看你在Form里用了dl/dt/dd，感觉不太妥，记得以前听Tantek的一个关于HTML语义性（Semantics）的Presentation时，提到过类似的问题，Form表单中的项目应该用属于定义性质的东西，所以这么用也许有点误用。

dngpng Says:
September 3rd, 2006 at 05:57

上面打错了：“Form表单中的项目应该不属于定义性质的东西，所以这么用也许有点误用。”

s5s5 Says:
September 3rd, 2006 at 09:39

对，向JQuery开炮！开炮！开炮！

Arrix Says:
September 3rd, 2006 at 10:11

好文！看来笔者的确很喜欢JQuery啊。不知道jquery的诡异选择器效率如何，别像Prototype的$$那样。

Yang Says:
September 3rd, 2006 at 22:22

好啊,换了新样式!

realazy Says:
September 6th, 2006 at 16:25

回 dngpng：

Tantek那个presentation我也看过（现在一下找不出来 -_-），确实是有这样的问题，我承认。

HTML规范发展到今天（实质上已经停滞很多年了），固有标签依然无法满足现代的需求，表现跟结构还是结合得太死。许多用法都是见仁见智，没有什么统一的标准的。

我倒觉得这个Simplequiz可以参考参考： http://www.simplebits.com/notebook/2004/01/02/simplequiz_part_xi_image_floating.html 以及它的解决方案：http://www.simplebits.com/notebook/2004/01/20/sqxi_conclusion.html .

实际上，在项目中，我的表单还是用表格来实现（可以避免好多麻烦，而且表格用在表单也没有语义问题）。对于这种比较短的简单的范例，我又喜欢用自定义列表。

多谢指正

xw Says:
September 8th, 2006 at 18:02

哈哈不错不错开始了解 JQuery，准备以后做东西的时候用JQuery玩玩~~！

DesignBook Says:
September 12th, 2006 at 15:10

新东东！有兴趣的话，写本教程吧。

dngpng Says:
September 14th, 2006 at 03:55

我个人比较喜欢用列表ul/ol来处理，在无样式的时候看着也还可以:
<ul>
<li>
<label for="unternehmen">Unternehmen</label>
<input id="unternehmen" name="Unternehmen" />
</li>
<li>
<label for="ort">Ort</label>
<input id="ort" name="Ort" />
</li>
</ul>

heiyeluren Says:
September 18th, 2006 at 10:29

路过，不说话，就是不说话~~~~

flyingstone Says:
September 26th, 2006 at 09:57

用jquery咋取得一个具体的对象
$(”objectName”) 为什么不能取得ID=objectName 的具体对象，而是返回一个数组，还得用get(1)才能取得。

moregatest Says:
October 19th, 2006 at 11:39

get(1)就不知道了
不過
.get(0).value
可以用
.val()
取代

bengxia Says:
October 26th, 2006 at 16:34

今天刚开始学习jQuery，谢谢！

yorsal Says:
November 14th, 2006 at 10:39

呵呵～，我从jquery的authority 找到你家的，你是外国人吧～～

realazy Says:
November 14th, 2006 at 11:16

@yorsal，你这个想法真让我感到吃惊，呵呵，我可是如假包换的中国人。

johnny Says:
November 14th, 2006 at 13:56

就是喜欢这种语言风格的tutorial，于是就这样把我领进了门。谢谢

yorsal Says:
November 14th, 2006 at 22:01

呵呵,那jquery的官方网站上怎么就你一篇中文demo啊,呵呵~
还有就是我觉得中国的jquery发展太慢了,文档也少,我想组个group来发展中国的jquery,你看怎么样~
http://jquery.webirth.com
有兴趣可以加我的 qq:80250726

yorsal Says:
November 14th, 2006 at 22:02

主要是做翻译文档和demo的工作

mahx Says:
November 15th, 2006 at 18:48

有点上瘾！期待更多中文的资料，应用为先，大家都盼着了！
先敬一杯！

永恒 Says:
December 4th, 2006 at 18:19

好文，关注中

spidercaoxin Says:
December 26th, 2006 at 16:35

好文,有种上瘾的感觉

alex Says:
February 7th, 2007 at 01:02

完了完了，我中毒了！！！你赔你赔！！

cvpc Says:
February 10th, 2007 at 21:17

很好，希望多翻译好文。

喜欢 Says:
March 9th, 2007 at 08:52

喜欢,感觉就要中毒了

xellzhang Says:
March 12th, 2007 at 12:49

非常好，我阅读的第一篇关于jquery的文章，入门了。下面准备向官网资料进攻了，谢谢！！

is Says:
March 20th, 2007 at 23:06

good,写的非常好.最近也打算研究一下jQuery了.

» [转帖]小试牛刀——一篇jQuery小教程 - PHP资讯网络 Says:
April 4th, 2007 at 22:10

[...] 转自：http://realazy.org/blog/2006/08/31/small-jquery-tutorial/ [...]

dmw Says:
April 9th, 2007 at 21:50

刚接触JQUERY，多多指教~！

ryan Says:
June 6th, 2007 at 17:28

good job

jlake Says:
August 13th, 2007 at 21:16

我用jQuery做的日历：
http://geedigg.com/cnCalendar/
http://geedigg.com/usCalendar/
http://geedigg.com/jpCalendar/

jQuery确实很吸引人。

Yuancheng Says:
September 12th, 2007 at 00:23

Great one! Can’t help leaving u a msg!

ui163 Says:
October 22nd, 2007 at 11:16

刚接触JQUERY，正在学习~！

学习 jQuery at catch the digital flow Says:
October 30th, 2007 at 21:13

[...] 我看的是 realazy 的这篇“小教程”，我照着做，可没想到这么简单的代码都费了半天劲，小括号、中括号、大括号像刚闭幕没多久的某大会代表似的，全体出席好不热闹，害我写起来那个累啊，再加上我的 Ubuntu 只有可怜的 gedit，想检查括号究竟是哪个跟哪个闭合都成问题，迫切需要一个 Linux 环境下的 UltraEdit！ [...]

Indra Says:
November 5th, 2007 at 03:23

Javascript 就是应该这样写，jQuery 做得很漂亮。Javascript 本来就是函数型语言（虽然语法可写成命令式的），我就不明白为什么别的那些库要想法设法的在 Javascript 中实现面向对象的风格，好像不用面向对象大家就写不出或写不好程序一样！最后费尽心思、顽强拼搏、使用了各种各样的奇技淫巧，终于可以用 Javascript 写 OOP 了，但回过头来看看这个完成的库吧，要多大就有多大，要多慢就有多慢，要多难看就有多难看！

这世上不是只有面向对象、设计模式，OOP 也没想象中那么完美，看看现在倍受推崇的 ruby 与 python 中的很多特征，实行上都来源于古老的 Lisp，就明白了一句话：简洁就是美。

P.S. jQuery 实在很有意思，在我看来，它的语法不是什么对象、封装、消息传递等等，而是 Lisp 与 Forth 的混合体，精彩！

xddxz Says:
December 27th, 2007 at 14:40

jQuery 确实很强大。

路人IT Says:
January 2nd, 2008 at 14:47

不懂，还是看不懂。不知道怎么动手。
使用ajax可以引用ajax.dll .
使用jQuery引用啥？从哪里开始下手啊？

wwww Says:
January 3rd, 2008 at 18:21

谢谢

kkorange Says:
January 16th, 2008 at 23:02

谢谢~让我有了很好的体会~有点喜欢上JQuery咯~

IT china Says:
February 26th, 2008 at 16:44

刚开始学习jquery，已经感觉到他的强大，而且好多好多，不过我该开始接触web，好多都不懂，就直接奔jquery来了。

kenneth Says:
March 27th, 2008 at 06:45

is jQuery similar to Ruby?

andol Says:
July 25th, 2008 at 13:56

轻松看懂了，
想进一步看看jquery就诶和Ajax的教程，
希望保持简洁易懂的风格。

realazy

小试牛刀——一篇jQuery小教程

47 Responses to “小试牛刀——一篇jQuery小教程”

Leave a Reply