jQuery入門

3,795 views

Published on

jQuery入門的教學文件,未來會陸續修正其內容,有任何建議歡迎聯絡。

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,795
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
85
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery入門

  1. 1. jQuery<br />Lecturer-Allen<br />
  2. 2. 簡介<br />jQuery是一套 JavaScript的 Library,因此,你必須稍具 JavaScript 的基礎,至少寫過一些 JavaScript 才比較容易上手,並且看得懂後續的教學。<br />jQuery的核心程式並非包山包海、什麼都可以幫你做,相反地,jQuery主要是用在 DOM文件的操作,包含「快速選取元素(Element)」並且「做一些事情」,快速選取元素可以讓你一次選取單一或多個的元素,然後你可以將這些被選取的元素 做一些改變,例如隱藏、顯示等等。<br />此外 jQuery的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。<br />
  3. 3. 再談談 jQuery 的好<br /> 1.官方文件詳細。(重要)2. 簡潔不笨重,壓縮後大約15KB (v1.2.6)。3. 只要你有 JavaScript 的基礎,不用再多去學習一大堆新語法。4. 不用去煩惱跨瀏覽器的問題,jQuery已經幫你作好了。(IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)5. 支援CSS3選擇器。6. 社群活躍,你可以有很多人家寫好免費的 plugin用。7. 跟其它 library 一起使用也不衝突。(jQuery.noConflict())8. jQuery UI 幫你漂亮搞定 (Web 2.0?) 網站使用者介面。<br />
  4. 4. jQuery 網站<br />Min版本在瀏覽器打開後會重新編碼一次,但對於伺服器負擔較輕。<br />
  5. 5. 開始使用<br /><ul><li>在HTML中嵌入JavaScript檔案</li></li></ul><li>jQuery 架構<br />jQuery程式最好放置document之中<br />Function的方法也一樣可以使用。<br />
  6. 6. jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢?<br />請看看程式碼:<br />$("div").addClass("special");<br />移除Class removeClass(class)<br />以下符號的代表是?<br />(# .input)<br />div#body<br />div.body<br />div > div <br />解釋:選取div id 為 body 的 <div><br />解釋:選取 divclass 為 body 的 <div><br />解釋:選取被 <div> 包住的下一層 <div><br />
  7. 7. 控制CSS屬性<br />
  8. 8. 驗證事件<br />
  9. 9. 觸發事件<br />
  10. 10. DOM<br />
  11. 11. DOM 大家庭<br />
  12. 12. 作業<br />jQuery 表單驗證<br />
  13. 13. 教學網站<br />MSDN「邊做邊學」系列<br />jQuery - Write less, Do more<br />SOHTANAKA<br />

×