close
好久沒寫jQuery相關文章了,這陣子總算是實際上手使用了。(但是還沒機會實測ajax部份)
這篇大概紀錄一下用到哪些方便的函式。
基於程式功力不高,避免用詞錯誤指導錯誤,所以就寫的比較簡單 囧
有錯誤就煩請各位前輩指正 0rz



準備式
根據經驗,放壓縮版的(也就是還要重新經過瀏覽器將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



以上
這陣子摸索心得

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 ezcshi 的頭像
    ezcshi

    一陣嘻,噓!

    ezcshi 發表在 痞客邦 留言(1) 人氣()