寫 個(gè)小教程，以期能讓大家對 jQuery 有所了解，甚至喜歡上它（請不要怪我）。

不廢話，先說明我們的目的。我們知道，當(dāng)代瀏覽器（modern browsers）的文本框的聚焦(focus)樣式可以通過CSS的偽類 :focus 來設(shè)置。假設(shè)我們有這么一段代碼：

      <codce></codce><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樣式：

      <codce></codce>input[type=”text”]:focus, input[type=”password”]:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }
    

簡單不過，對不？你可以拿任何一款當(dāng)代瀏覽器來測試（Firefox, Safari, IE7）： http://realazy.org/lab/jquery/tut/form_hover_step1.html 。IE6? 呵呵，這就是本篇教程的目的所在，沒錯(cuò)，既然IE不支持 :focus ，我們只能 Using DOM Scripting to Plug the Holes in CSS ，不過我們用jQuery來實(shí)現(xiàn)。

先來看看jQuery的工作方式。jQuery使用美元符號 $ 來返回一個(gè)jQuery對象，然后我們就可以使用jQuery提供的API（接口。很多很多很實(shí)用，趕緊參考 http://screencasts.visualjquery.com/visual/docs-redux.xml ）進(jìn)行操作了。

我們都不懂程序，對，我假設(shè)你跟我這樣，只是了解一些最基本的語法（對不起大蝦了，高手不要自扁身份）。既然我們不懂，我們就用CSS的方式來思維。

首先我們要從DOM中獲得 type="text" , type="password" 的 input 和 textarea 。對，我們偉大的美金出場了，哦，是美元符號。參考 http://proj.jquery.com/docs/Base/Expression/CSS/ ，我們知道，我們可以這樣選擇到他們：

      <codce></codce>$(”input[@type=’text’], input[@type=’password’], textarea”)
    

選中它們以后呢？我們就要靠事件（event）來處理了。 :focus 對應(yīng)的的事件是 onfocus ，然而jQuery討厭on，于是就是 focus 了，多好 （參考 http://proj.jquery.com/docs/EventModule/ ）。于是我們知道我們該這么做：

      <codce></codce>$(”input[@type=’text’], input[@type=’password’], textarea”)
      
        .focus()
      
      ;
    

嘿嘿，我們已經(jīng)邁出一大步了！我們要繼續(xù)告訴 focus 該做些什么。在jQuery中，我們通常需要一些匿名函數(shù)來幫我們干些事情，不理解不打緊，讓我們繼續(xù)：

      <codce></codce>$(”input[@type=’text’], input[@type=’password’], textarea”).focus( 
      
        function(){ }
      
       );
    

我們的目的是什么？對，是給聚焦的文本框加上樣式。jQuery有一個(gè) css (prop) 的API，參考前面的CSS，我們可以這么寫：

      <codce></codce>css({background:”#fcc”, border:”1px solid #f00″})
    

bingo! 離成功僅一步之遙。我假設(shè)你知道，返回對象自身使用 this 。在jQuery中，返回自身當(dāng)然也是this, 但是，需要返回的對象還是jQuery對象，我們還必須使用美元符號。所以是 $(this) 。那么：

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

That’s it! 然后我們該怎么執(zhí)行這段代碼呢？ 我們知道有一個(gè) body onload="" 可以用，也知道有一個(gè) window.onload 可以用，但jQuery提供了一個(gè)更佳的方案，讓我們可以進(jìn)一步分離結(jié)構(gòu)與交互。

      <codce></codce>$(document).ready(function(){
    // Your code here…
});
    

所以我們只需將我們的代碼放到里面去：

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

呵呵……貌似成功了。等等，我們要送佛送到西天，好人做到底……在上面的交互中，只有聚焦的情況，那么失焦的時(shí)候呢？嗯，我們不要想當(dāng)然，失焦？那么聚焦的樣式就自動(dòng) 清楚 清除了嘛~不會(huì)的，除非我們明確告訴它。依瓢畫葫蘆：

      <codce></codce>$(this).blur(function(){$(this).css({background: “transparent”, border: “1px solid #ccc”})})
    

嗯，說到j(luò)Query的強(qiáng)大之處了，jQuery對象可以接受無數(shù)個(gè)函數(shù)回調(diào)/消息/方法（哪一種是正確說法，請高手指教），也就是傳說中的 Chainability 。也就是說我們不必要分兩行寫，一氣呵成：

      <codce></codce>$(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來實(shí)現(xiàn)，我們何苦要用JS來降低它們的處理效率呢，所以，我們用了jQuery自帶的定義：

      <codce></codce>$(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沒有提供，但可以看看這個(gè)jQuery插件（plugin）： jQBrowser . 嗯嗯，似乎忘了跟大家說，jQuery還擁有許多超強(qiáng)的插件！有時(shí)間我整理幾個(gè)出來奉獻(xiàn)給大家。

對，看看我們這一步的成果： http://realazy.org/lab/jquery/tut/form_hover_step2.html ，一定記得用IE6查看。

貌似又完成了一次（汗，前邊不是說我們真的完成了么），不！大家看得爽的時(shí)候還記得我是做什么的嗎？對對對，是 Web標(biāo)準(zhǔn) ！Web標(biāo)準(zhǔn)提倡什么？結(jié)構(gòu)，表現(xiàn)，交互相分離啊，我們把樣式寫到了JS里邊，相信這不是好事情。難不倒我們jQuery的！我們換種思路，我們把樣式在一個(gè) class 里定義好，在 focus 的時(shí)候加上的這個(gè) class ， blur 的時(shí)候去掉這個(gè) class 不就OK了嗎？聰明……jQuery相應(yīng)的API是 addClass 和 removeClass 。過程不累贅了，否則篇幅又得增加一半（我還要睡覺，明天還要上班，可憐的上班族），代碼如下：

      <codce></codce>$(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”)});
	}
})
    

我必須承認(rèn)，我把這個(gè) class 命名為 ie_focus 是有點(diǎn)變態(tài)。嗯，進(jìn)一步，雖然我們這個(gè)代碼不大，但我們也分離出來一個(gè)獨(dú)立文件吧。這是我們的最后步驟的演示： http://realazy.org/lab/jquery/tut/form_hover_step3.html ，記得看源碼哦。

很簡單，對不？jQuery的威力不止于此，還有需多更酷更強(qiáng)的功能留待，你，和，我，共同探索。

P.S. jQuery的代碼也很優(yōu)美，對不？這種函數(shù)式編程風(fēng)格我個(gè)人是十分喜歡的，但是大括號，小括號敲到我手疼……所有我又深深地愛上了基本上看不到括號的 Ruby ， Orz …阿門，晚安……