準備式
根據經驗，放壓縮版的（也就是還要重新經過瀏覽器將js檔案解譯）的，網頁執行流暢度會受限於CPU，多數都會有稍微頓一下的感覺。
所以google code很好心的提供了讓我們直接取用的jQuery，且可以從google.load("jquery","選擇版本")，一整個佛心來著阿！ 經過之前架設網站使用jQuery的動態效果，發現換成下列這種方式載入以後，比原本的載入size小的包裝版順暢很多。
相關詳細連結：The Will Will Web 的 網站部署可考慮使用 Google AJAX Libraries API 載入 JS
----------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3");
</script>
----------------------------
起始式
其中$(function(){....}同等於body的onload，也就是一進入網頁執行。
----------------------------
<script type="text/javascript">
$(function() {
你的程式碼
});
</script>
----------------------------
接下來紀錄一下常用的函式
each()
相關詳細連結：黑暗執行序的作者 的 邊做邊學 jQuery 系列 6-jQuery 網頁元素操控
摘自詳細連結
jQuery.each(array, function() { ... }) ，將 array 的各元素逐一送給 callback 函數處理，函數中以 this 取得陣列元素內容。
jQuery.each(object, function(i, val) { ... })，逐一傳入物件各屬性的名稱 (i) 以及值 (val) 給 callback 函數處理。
(註: each 中 return false 時，後續尚未處理到的其他陣列元素/物件屬性則略過不處理。)
但是我不是拿來撈array跟object，我是拿去撈表格，範例如下
----------------------------
$('#data tr:gt('+ns+')').each(function(i) {
var indata = $(this).html();
$(indata).each(function(j){
dataval = $(this).text();
----------------------------
取id為data內的tr標籤，gt就是取第幾筆（ns）以後的所有資料。
而i則是該tr的類似索引。
each就是將function內的i當作索引，會每筆每筆的讀出來，而可以用$(this).html()或$(this).text()讀取後塞到變數內。
而上面例子就是讀取巢狀表格。
是說我不曉得這樣算不算正規讀取法 囧
jQuery.extend
建立自定義函式，要把程式模組化會用到。
----------------------------
jQuery.extend({
fun1: function (i){
alert(i);
},
fun2: function (){
},
fun3: function (){
},
});
$.fun1('hi'); //呼叫方式
----------------------------
建立物件
避免忘記 囧
----------------------------
var book = new Object;
book.name = '書名';
----------------------------
讀取陣列資料
我忘記從哪裡看來的，如果找到了再貼回來。
----------------------------
function listMember(main) {
var s = ""; for( key in main ) // 使用 in 運算子列舉所有成員
s += key + ": " + main[key] + "n";
return s;
} ;
----------------------------
變數與文字組合
直接拿自己寫的當示範，這部份就是組合網址。
----------------------------
var image_url='http://static.findbook.tw/image/book/';
image_url += bisbn + '/large'
var book_url='http://findbook.tw/book/';
book_url += bisbn +'/basic';
----------------------------
append
將資料加在其選擇的後方
----------------------------
$('#list').append(bookurl);
----------------------------
上面例子就是在id為list的物件後面加上bookurl的變數資料。
load
load(url,[data],[callback])
這功能實在可以說是超棒，但是傳到伺服器上就會有跨網域無法讀取的問題，所以...
好用歸好用，但是不能上傳以後還能直接撈其他網域的資料。
----------------------------
$("#demo").load("book1.html div > table",function(){$.fun1('hi');otherfunction();});
----------------------------
簡單來說，上面那一行意思就是，在id為demo的物件上將book1.html 內的div標籤下的表格資料載入。
而後面的function，其實是因為當載入後面再接其他函式需要為load讀取的資料時，會造成讀不到資料，所以這類需要撈取函式需要下在load後。函式才能夠將讀取的資料讀來運用。
下面這個例子，直接複製貼上到筆記本後存為網頁檔。
----------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3");
</script>
<script type="text/javascript">
$(function() {
$('body').load("http://tw.yahoo.com #news");
});
</script>
----------------------------
將其執行，你就會覺得load簡直就是太棒了，但是.... 上傳到網頁上就不能執行了，因為會出現same-origin policy限制，攸關不同網域的安全性。
儘管如此，光靠這個應該就有人嗅出可以寫出處理自己零散資訊的程式了吧。
如果這個讀取問題可以解決，基本上就能夠以靜態網站模擬成動態網站啦！
或許可以用在單機程式開發上的運用，端看看倌們如何運用啦。
補齊相關jQuery連結：
魚乾的部落格 - jQuery標籤
Web Designer Wall 國外設計師的jQuery教學（英文）
jsGears.com 技術論壇
記載著 Will 在網路世界的學習心得與技術分享 - jQuery標籤
jQuery 1.3 API參考文襠中文版
邊做邊學系列影片 - jQuery
http://ezcshi.pixnet.net/blog/post/27406659-jquery-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-2
|
