程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> jQuery小教程

jQuery小教程

編輯:.NET實例教程

小試牛刀——一篇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"inputtextarea。對,我們偉大的美金出場了,哦,是美元符號。參考http://proj.jquery.com/docs/Base/Expression/CSS/,我們知道,我們可以這樣選擇到他們:

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

選中它們以後呢?我們就要靠事件(event)來處理了。:focus對應的的事件是onfocus,然而jQuery討厭on,於是就是focus了,多好

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved