專業設計師團隊,賦予空間新美感
裝潢設計搭配量身訂做系統家具
壁紙跳蚤防治專業團隊服務,消滅跳蚤蟲卵蛹
徹底消滅跳蚤,免費諮詢服務

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 學習筆記

房東:阿弟
發表時間:2012-01-21
[檢舉]


準備式

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





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: