jQueryTutorial上官林傑(ericsk)2008/07/25課程大綱JavaScriptFrameworkjQuery設計概念jQuery選擇器及DOM基本操作事件處理及Ajax特效與UI實作練習"IfIhaveseenfurther,itisbystandingontheshouldersofGiants."IssacNewton,1676.WhyJavaScriptFramework?JavaScript太難寫了!有framework可以減輕負擔,何樂而不為?各個瀏覽器各自為政(其實也就MSIE比較不合群一點)不要再浪費時間在處理跨瀏覽器的問題了。站在巨人的肩膀上,讓專業的來牛頓都跟你說了...容易有範本可以抄(好工程師不要學...)嗯,免得東抄西抄code更難維護...WhyjQuery?好學好用,重點是它還很輕巧以物件為中心,可以是主格也可以是受格。e.g.,有append也可以appendTo完整的源碼大小(壓縮後傳輸)僅僅16Kb(版本1.2.6)超棒超快速的選擇器完全支援CSS3及XPath選擇器,容易操作網頁上的物件。一次呼叫便套用至所有被選擇到的元素。OpenSource&Googlehosted不用自己煩惱更換版本或是擺放jQuery的位址。...jQuery的設計架構及使用jQuery能做的事...新增或移除DOM物件(網頁上的元素)更改網頁元素的樣式及內容處理事件產生特效或動畫Ajax....jQuery的設計概念jQuery是用來操作選擇器的物件,也是整套framework的prototype所有東西都是jQuery,也可以簡單寫作$。所有API的回傳值都是jQuery物件及陣列jQuery物件->可以接combo技e.g.,$('
test
').css({color:'red'}).attr({id:'title'}).appendTo($('body'));陣列->一個動作套用到全部e.g.,$('.items').addClass('selected');使用jQuery1.在http://jquery.com/下載最新的jquery*.js檔案,然後跟你的project擺在一起並且引入。e.g.,
2.直接使用Googlehost的jQueryjQueryHelloWorld$('Hello,world
').appendTo($('body'));作了什麼事?1.動態產生了一個Hello,world
,並且把它變成jQuery物件。2.使用jQuery.appendToAPI將之插入到bodytag的最後面。jQuery選擇器jQuery的選擇器包括:一段HTML,如果沒有match到則會產生新的。$('test
')標籤名$('body')CSS3選擇器$('ul>li.selected')XPath$('a[@href^=http://www.cht]')jQuery選擇器(續)搭配選擇器一同服用的filter$('ul>li:even'),$('ul>li:first-child')表單特殊的選擇...