亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

[轉]小試牛刀——一篇jQuery小教程

系統 2351 0

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

作者: realazy

文章來源: http://realazy.org/blog/2006/08/31/small-jquery-tutorial/

如果你還不了解什么是jQuery,那么先參考這篇文章: http://realazy.org/blog/2006/08/27/jquery-new-wave-javascript/

文章正式開始:

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

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

      <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; }
    

簡單不過,對不?你可以拿任何一款當代瀏覽器來測試(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(接口。很多很多很實用,趕緊參考 http://screencasts.visualjquery.com/visual/docs-redux.xml )進行操作了。

我們都不懂程序,對,我假設你跟我這樣,只是了解一些最基本的語法(對不起大蝦了,高手不要自扁身份)。既然我們不懂,我們就用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 對應的的事件是 onfocus ,然而jQuery討厭on,于是就是 focus 了,多好 (參考 http://proj.jquery.com/docs/EventModule/ )。于是我們知道我們該這么做:

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

嘿嘿,我們已經邁出一大步了!我們要繼續告訴 focus 該做些什么。在jQuery中,我們通常需要一些匿名函數來幫我們干些事情,不理解不打緊,讓我們繼續:

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

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

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

bingo! 離成功僅一步之遙。我假設你知道,返回對象自身使用 this 。在jQuery中,返回自身當然也是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! 然后我們該怎么執行這段代碼呢? 我們知道有一個 body onload="" 可以用,也知道有一個 window.onload 可以用,但jQuery提供了一個更佳的方案,讓我們可以進一步分離結構與交互。

      <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″})} );
});
    

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

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

嗯,說到jQuery的強大之處了,jQuery對象可以接受無數個函數回調/消息/方法(哪一種是正確說法,請高手指教),也就是傳說中的 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來實現,我們何苦要用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沒有提供,但可以看看這個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 。過程不累贅了,否則篇幅又得增加一半(我還要睡覺,明天還要上班,可憐的上班族),代碼如下:

      <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”)});
	}
})
    

我必須承認,我把這個 class 命名為 ie_focus 是有點變態。嗯,進一步,雖然我們這個代碼不大,但我們也分離出來一個獨立文件吧。這是我們的最后步驟的演示: http://realazy.org/lab/jquery/tut/form_hover_step3.html ,記得看源碼哦。

很簡單,對不?jQuery的威力不止于此,還有需多更酷更強的功能留待,你,和,我,共同探索。

P.S. jQuery的代碼也很優美,對不?這種函數式編程風格我個人是十分喜歡的,但是大括號,小括號敲到我手疼……所有我又深深地愛上了基本上看不到括號的 Ruby Orz …阿門,晚安……

[轉]小試牛刀——一篇jQuery小教程


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 久久精品免费观看 | 成人在线视频观看 | 日本精品久久久久中文字幕2 | 精品伊人久久久99热这里只 | 久久这里只有精品免费看青草 | 久久亚洲精品永久网站 | 波多野结衣在线观看3人 | 中文精品久久久久中文 | 高清国产精品久久久久 | 欧美特欧美特级一片 | 国产精品久久久久久久hd | 97精品国产综合久久久久久欧美 | 久久久久欧美国产精品 | 国产视频福利 | 欧洲成人免费视频 | 天天干天天曰天天操 | 91手机视频 | 亚洲欧洲毛片 | 成人精品亚洲人成在线 | 久久久久在线视频 | 欧美伦禁片在线播放 | 毛片在线视频观看 | 不卡在线播放 | 全部毛片免费看 | 国产精品美女自在线观看免费 | 日日狠狠的日日日日 | 亚洲国产精品乱码一区二区三区 | 国产福利福利视频 | 久久综合亚洲一区二区三区 | 国产一区二区三区不卡在线观看 | 欧美区国产区 | 久久精品中文字幕 | 亚洲欧美精品一区二区 | 欧美一级美片在线观看免费 | 亚洲日本一区二区三区高清在线 | 久久青青草原精品国产麻豆 | 日日噜噜夜夜狠狠久久aⅴ 日日噜噜夜夜狠狠久久丁香 | 午夜精品影院 | 四虎影视4hutv最新地址在线 | 九9热这里真品 | 九九精彩视频在线观看视频 |