jQuery 學習筆記(一) -hello world
先前有稍為看了一下jQuery，因為目前愈來愈需要美感的網頁，所以還是認真點學習這些簡化Javascript 的framework吧!
歷程
jQuery 由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入，到目前為止(2008-12-29)最新的release 版本為 v1.2.6 ， 最小化後的檔案約30.3KB，以下為相關jquery基本連結。
- 官方網站：http://jquery.com/
- Project ：http://code.google.com/p/jqueryjs/
- 未壓縮版：http://jqueryjs.googlecode.com/files/jquery-1.2.6.js
- 已壓縮版：http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
- 最大壓縮：http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js
- 打包下載：http://jqueryjs.googlecode.com/files/jquery-1.2.6-release.zip
jQuery是繼prototype之後又一個優秀的Javascrīpt框架。其宗旨是WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它能快速,簡潔的使用HTML documents, handle events, perform animations,並且能把Ajax交互應用到網頁, jQuery 能夠改變並減化你寫JavaScript的方式及程式碼。
它是輕量級的 js 庫(壓縮後只有30k) ，這是其它的 js 庫所不jquery及的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
而目前在網路上，jQuery的使用案例及教學手冊文件等都非常充足，而學習jQuery前最好對xml力Css,Javascript,Html,DOM都有基本概念，這樣上手才會快一點。
小弟評估了jQuery及Prototype之後，才想把主力放在jQuery上，理由改天有空再寫囉!!
基本使用方式 :
1.要記得載入jQuery的函式庫
2.jQuery程式碼必須在以下的地方撰寫
A.$(document).ready() 就像是jQuery的window.onload()
將jQuery 程式碼寫在這
});
B.這種方式也可以，但同時寫時A會先執行
將jQuery 程式碼寫在這
});
3.如何取得物件
A.抓取所有的<a /> tag物件
B.此為抓取指定的ID，只要ID或NAME為this_id都會被抓出來
C. 此為抓取指定的class，只要css 裡有包含指定的sytle名稱就會被抓出來
D. 先小結A+B+C，他們還可以結合使用喔!!
$(”a.this_style”) //找出 <a />tag,calss 名稱為this_style的 (感謝shian指導修正)
E.還有比較不容易搞混的取得物件方式，下例是為抓取this_id名稱的input物件
F.也可以用這種方式取得，此為抓取type=checkbox的物件
G.還有一種叫層級的取法，以這個div > p會得到<p>two</p>
$(”div > p“)
還有很多種取得方式，詳細請再去參考文件，除了官網的文件蠻充足的(可惜都英文的)外；這裡還有簡體版的jQuery API 使用手冊 ，對DOM操作不太熟悉的，可以看一下jQuery 學習筆記 (6) — 操作 DOM 物件這篇，寫的淺顯易懂，應該很容易可以上手
再來當然要寫一個hello world囉:
先瞭解一下如何讀取及加入html code
在<body>裡加入一段html碼
結果會在<body>加入<div><p>Hello</p></div></body>
再來我們要取得物(div)裡的html，以上述例子再繼續執行$(”div”).html() 結果會取得:<p>Hello</p>
而我們也可以在已知物件加入html code
這樣我們想要的結果就會顯示出來啦，完整如以下範例
<script src=”js/jquery-1.2.6.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“div”).html(“<p>Hello World</p>”);
});
</script>
</head>
<body>
<div><p>two</p></div>
</body>
</html>
參考資訊:
http://www.hudong.com/versionview/DdncDAFtRA3V,XA,ndwfwoBUw
http://blog.shian.tw/jquery-base.html
http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%8C%87%E5%AF%BC:15%E5%A4%A9%E5%AD%A6%E4%BC%9Ajquery
近期留言