幻冰星空綜合論壇

This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

分享 jQuery 教學 - 基礎篇 2

誰把誰的難過感同身受

無敵大元帥
管理成員
版主
VIP
舊論壇發表時間:2012-8-3 14:26:27

以下用一連串的範例,以藍色字體展示一些基本的語法並且以深色字顯示文件中會被選取的元素。

$("div")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
解釋:選取所有 <div>


$("#body")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
解釋:選取 id 為 body 的元素


$("div#body")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
解釋:選取 id 為 body 的 <div>


$("div.contents p")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
解釋:選取 class 為 contents 的 <div> 所包住的所有下層的 <p>


$("div > div")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
解釋:選取被 <div> 包住的下一層 <div>


$("div:has(div)")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
解釋:和前一個範例相反,這邊是選取至少有包住一個 <div> 的 <div>


[做一些事情]
前一段的教學中介紹了如何使用 jQuery 來選取元素,其中大部份的語法都是可以讓你快速地一次選取多個元素,接下來當然就是要來對這些選取到的元素做些改變囉。透過 jQuery 內建的函數,你可以:

  • 對 DOM 進行操作,例如對文件節點的新增或修改
  • 添加事件處理
  • 做一些基本的視覺效果,例如隱藏、顯示、下拉顯示、淡出淡入等等
  • 使用 AJAX 傳送表單內容或取得遠端文件


[範例1] 選取所有有 target 屬性的 <a>,並且在其節點下加入一段文字。
  • $("a[target]").append(" (Opens in New Window)");

這是一段原始的 HTML :

選取有 target 屬性並加入文字後的結果:

[範例2] 選取 id 為 body 的元素,並且修改兩個 css 屬性。
  • $("#body").css({
  • border: "1px solid green",
  • height: "40px"
  • });

這是一段原始的 HTML :
  • <div id="body">
  • ...
  • </div>

選取 id 為 body 的元素並修改 css 後的結果(示意):
  • <div id="body" style="border: 1px solid green; height: 40px">
  • ...
  • </div>

[範例3] 在網頁上的表單送出時加入一個判斷,如果 username 這個欄位是空值的話,就顯示 help 這個區塊內的文字。
  • $("form").submit(function() {
  • if ($("input#username").val() == "")
  • $("span.help").show();
  • });

可作用在類似以下的 HTML,一開始 span.help 是隱藏的,如果沒有輸入 username,才會顯示:
  • <style type="text/css">
  • .help {display: none}
  • </style>
  • <form>
  • <label for="username">請輸入大名</label>
  • <input type="text" id="username" name="username" />
  • <span class="help">這個欄位必填喔</span>
  • </form>

[範例4] 當 user 點選 id 為 open 的連結時,顯示 id 為 menu 的區塊,並回傳 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");

可作用在類似以下的 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] 將所有的 <div> 漸變為寬 300px、文字與邊界寬 20px
  • $("div").animate({
  • width: '300px',
  • padding: '20px'
  • }, 'slow');

可作用在類似以下的 HTML:
  • <div style="width: 100px; border: solid 1px red;">
  • Hello world!
  • </div>

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

[範例7] 動態效果的 callback 的範例,將所有的 <div> 以 0.5 秒的動態效果隱藏後,再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數,其中 $(this) 是原本程式所處理的各個元素。
  • $("div").hide(500, function(){
  • // $(this) 是每一個各別的 <div>
  • $(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>

[範例8] 取得 sample.html 並將找出文件內所有 <div> 下一層的 <h1> 填入原本文件 id 為 body 的元素內
  • $("#body").load("sample.html div > h1");

這是一段原始的 HTML :
  • <div id="body"></div>

sample.html 的片段:
  • <div>
  • <h1>Hello world!</h1>
  • <h2>This is H2</h2>
  • <h1>jsGears.com!</h1>
  • </div>

執行程式碼之後的結果:
  • <div id="body">
  • <h1>Hello world!</h1>
  • <h1>jsGears.com!</h1>
  • </div>

[範例9] 透過 getJSON() 取得 JSON 格式的資料,並透過 callback 函數處理資料
  • $.getJSON("test.json", function(data){
  • for (var idx in data)
  • $("#menu").append("<li>" + data[idx] + "</li>");
  • });
 
頂部