寫個小教程,以期能讓大家對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
了,多好