[範例4]
當 user 點選 id 為 open 的連結時，顯示 id 為 menu 的區塊，並回傳 false 避免瀏覽器真的換頁。
- $("a#open").click(function() {
- $("#menu").show();
- return false;
- });
$("a#open").click(function() {
$("#menu").show();
return false;
});
可作用在類似以下的 HTML：
- style type="text/css">
- #menu {display: none}
- style>
- a id="open" href="#">控制面板a>
- ul id="menu">
- li>a href="#1">控制面板首頁a>li>
- li>a href="#2">編輯個人資料a>li>
- li>a href="#3">個人空間管理a>li>
- ul>
[範例5]
控制面板
將 id 為 menu 的區塊以下拉布幕的動態效果快速顯示：
- $("#menu").slideDown("fast");
$("#menu").slideDown("fast");
可作用在類似以下的 HTML，原本隱藏的選單會以動態下拉的方式顯示出來：
- style type="text/css">
- #menu {display: none}
- style>
- ul id="menu">
- li>a href="#1">控制面板首頁a>li>
- li>a href="#2">編輯個人資料a>li>
- li>a href="#3">個人空間管理a>li>
- ul>
[範例6]
將所有的
漸變為寬 300px、文字與邊界寬 20px
可作用在類似以下的 HTML：
PS. jQuery 核心程式的 animate 函數能改變的元素屬性並不多，但是可以透過其他 plugin 提供更多的動態效果。
[範例7] 動態效果的 callback 的範例，將所有的
- $("div").animate({
- width: '300px',
- padding: '20px'
- }, 'slow');
$("div").animate({
width: '300px',
padding: '20px'
}, 'slow');可作用在類似以下的 HTML：
- div style="width: 100px; border: solid 1px red;">
- Hello world!
- div>
Hello world!
PS. jQuery 核心程式的 animate 函數能改變的元素屬性並不多，但是可以透過其他 plugin 提供更多的動態效果。
[範例7] 動態效果的 callback 的範例，將所有的
以 0.5 秒的動態效果隱藏後，再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數，其中 $(this) 是原本程式所處理的各個元素。
- $("div").hide(500, function(){
- // $(this) 是每一個各別的
- $(this).show(500);
- });
$("div").hide(500, function(){
// $(this) 是每一個各別的
$(this).show(500);
});
可作用在類似以下的 HTML：
- div style="width: 100px; border: solid 1px red;">
- Hello world!
- div>
- div style="width: 100px; border: solid 1px red;">
- jsGears.com!
- div>
Hello world!
jsGears.com!
[範例8] 取得 sample.html 並將找出文件內所有下一層的填入原本文件 id 為 body 的元素內
- $("#body").load("sample.html div > h1");
$("#body").load("sample.html div > h1");
這是一段原始的 HTML :
- div id="body">div>
sample.html 的片段：
- div>
- h1>Hello world!h1>
- h2>This is H2h2>
- h1>jsGears.com!h1>
- div>
Hello world!
This is H2
jsGears.com!
執行程式碼之後的結果：
- div id="body">
- h1>Hello world!h1>
- h1>jsGears.com!h1>
- div>
Hello world!
jsGears.com!
[範例9] 透過 getJSON() 取得 JSON 格式的資料，並透過 callback 函數處理資料
- $.getJSON("test.json", function(data){
- for (var idx in data)
- $("#menu").append("
- "
+ data[idx] + " "); - });
$.getJSON("test.json", function(data){
for (var idx in data)
$("#menu").append("- " + data[idx] + "
");
});
這是一段原始的 HTML：
- ul id="menu">
- li>項目1li>
- ul>
test.json 的內容：
- [
- "Hello world!",
- "jsGears.com!"
- ]
[
"Hello world!",
"jsGears.com!"
]
執行程式碼之後的結果：
- ul id="menu">
- li>項目1li>
- li>Hello world!li>
- li>jsGears.com!li>
- ul>
全站熱搜
留言列表
