[範例4] 當 user 點選 id 為 open 的連結時,顯示 id 為 menu 的區塊,並回傳 false 避免瀏覽器真的換頁。

 


  1. $("a#open").click(function() {   

  2.   $("#menu").show();   

  3.   return false;   

  4. });  




可作用在類似以下的 HTML:

 


  1. <style type="text/css">  

  2.   #menu {display: none}   

  3. style>  

  4. <a id="open" href="#">控制面板a>  

  5. <ul id="menu">  

  6.   <li><a href="#1">控制面板首頁a>li>  

  7.   <li><a href="#2">編輯個人資料a>li>  

  8.   <li><a href="#3">個人空間管理a>li>  

  9. ul>  




[範例5] 將 id 為 menu 的區塊以下拉布幕的動態效果快速顯示:

 


  1. $("#menu").slideDown("fast");  




可作用在類似以下的 HTML,原本隱藏的選單會以動態下拉的方式顯示出來:

 


  1. <style type="text/css">  

  2.   #menu {display: none}   

  3. style>  

  4. <ul id="menu">  

  5.   <li><a href="#1">控制面板首頁a>li>  

  6.   <li><a href="#2">編輯個人資料a>li>  

  7.   <li><a href="#3">個人空間管理a>li>  

  8. ul>  




[範例6] 將所有的
漸變為寬 300px、文字與邊界寬 20px

 


  1. $("div").animate({   

  2.     width: '300px',   

  3.     padding: '20px'  

  4.   }, 'slow');  




可作用在類似以下的 HTML:

 


  1. <div style="width: 100px; border: solid 1px red;">  

  2.   Hello world!   

  3. div>  




PS. jQuery 核心程式的 animate 函數能改變的元素屬性並不多,但是可以透過其他 plugin 提供更多的動態效果。



[範例7] 動態效果的 callback 的範例,將所有的
以 0.5 秒的動態效果隱藏後,再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數,其中 $(this) 是原本程式所處理的各個元素。

 


  1. $("div").hide(500, function(){   

  2.   // $(this) 是每一個各別的 
      

  3.   $(this).show(500);   

  4. });  




可作用在類似以下的 HTML:

 


  1. <div style="width: 100px; border: solid 1px red;">  

  2.   Hello world!   

  3. div>  

  4. <div style="width: 100px; border: solid 1px red;">  

  5.   jsGears.com!   

  6. div>  




[範例8] 取得 sample.html 並將找出文件內所有
下一層的

填入原本文件 id 為 body 的元素內

 


  1. $("#body").load("sample.html div > h1");  




這是一段原始的 HTML :

 


  1. <div id="body">div>  




sample.html 的片段:

 


  1. <div>  

  2.   <h1>Hello world!h1>  

  3.   <h2>This is H2h2>  

  4.   <h1>jsGears.com!h1>  

  5. div>  




執行程式碼之後的結果:

 


  1. <div id="body">  

  2.   <h1>Hello world!h1>  

  3.   <h1>jsGears.com!h1>  

  4. div>  




[範例9] 透過 getJSON() 取得 JSON 格式的資料,並透過 callback 函數處理資料

 


  1. $.getJSON("test.json"function(data){   

  2.   for (var idx in data)   

  3.     $("#menu").append("
  4. " + data[idx] + "
  5. ");   
  6. });  




這是一段原始的 HTML:

 


  1. <ul id="menu">  

  2.   <li>項目1li>  

  3. ul>  




test.json 的內容:

 


  1. [   

  2.   "Hello world!",    

  3.   "jsGears.com!"  

  4. ]  




執行程式碼之後的結果:

 


  1. <ul id="menu">  

  2.   <li>項目1li>  

  3.   <li>Hello world!li>  

  4.   <li>jsGears.com!li>  

  5. ul>  



arrow
arrow
    全站熱搜

    狼翔月影 發表在 痞客邦 留言(0) 人氣()


    留言列表 留言列表

    發表留言