使用選擇器的三個基本格式是：
序 格式 範例 說明
1 $("HTML標籤") $("div") 傳回表示所有div要素的jQuery物件
2 $("#要素的ID") $("#linksLeft") 傳回表示<div id="linksLeft">要素的jQuery物件
3 $(".要素的類別") $(".blogname") 傳回<div class="blogname">要素的jQuery物件
jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢？請看看程式碼：
$("div").addClass("special");$("div") 解釋：選取所有 <div>
$("#body") 解釋：選取 id 為 body 的元素
$("div#body") 解釋：選取 id 為 body 的 <div>
$("div.contents p") 解釋：選取 class 為 contents 的 <div> 所包住的所有下層的 <p>
$("div > div") 解釋：選取被 <div> 包住的下一層 <div>
$("div:has(div)") 解釋：和前一個範例相反，這邊是選取至少有包住一個 <div> 的 <div>
[範例1] 選取所有有 target 屬性的 <a>，並且在其節點下加入一段文字
$("a[target]").append(" (Opens in New Window)"); 這是一段原始的 HTML
jsGears
Amazon
選取有 target 屬性並加入文字後的結果：
jsGears
Google (Opens in New Window)
Amazon (Opens in New Window)
[範例2] 選取 id 為 body 的元素，並且修改兩個 css 屬性。
$("#body").css({
border: "1px solid green",
height: "40px"
}); 這是一段原始的 HTML :
...
選取 id 為 body 的元素並修改 css 後的結果(示意)：
...
[範例3] 在網頁上的表單送出時加入一個判斷，如果 username 這個欄位是空值的話，就顯示 help 這個區塊內的文字。
$("form").submit(function() {
if ($("input#username").val() == "")
$("span.help").show();
}); 可作用在類似以下的 HTML，一開始 span.help 是隱藏的，如果沒有輸入 username，才會顯示：
[範例4] 當 user 點選 id 為 open 的連結時，顯示 id 為 menu 的區塊，並回傳 false 避免瀏覽器真的換頁。
$("a#open").click(function() {
$("#menu").show();
return false;
}); 可作用在類似以下的 HTML：
控制面板
[範例5] 將 id 為 menu 的區塊以下拉布幕的動態效果快速顯示：
$("#menu").slideDown("fast");可作用在類似以下的 HTML，原本隱藏的選單會以動態下拉的方式顯示出來：
[範例6] 將所有的 <div> 漸變為寬 300px、文字與邊界寬 20px
$("div").animate({
width: '300px',
padding: '20px'
}, 'slow'); 可作用在類似以下的 HTML：
Hello world!
PS. jQuery 核心程式的 animate 函數能改變的元素屬性並不多，但是可以透過其他 plugin 提供更多的動態效果。
[範例7] 動態效果的 callback 的範例，將所有的 <div> 以 0.5 秒的動態效果隱藏後，再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數，其中 $(this) 是原本程式所處理的各個元素。
$("div").hide(500, function(){
// $(this) 是每一個各別的 <div>
$(this).show(500);
}); 可作用在類似以下的 HTML：
Hello world!
jsGears.com!
[範例8] 取得 sample.html 並將找出文件內所有 <div> 下一層的 <h1> 填入原本文件 id 為 body 的元素內
$("#body").load("sample.html div > h1"); 這是一段原始的 HTML :
sample.html 的片段：
Hello world!
This is H2
jsGears.com!
執行程式碼之後的結果：
Hello world!
jsGears.com!
[範例9] 透過 getJSON() 取得 JSON 格式的資料，並透過 callback 函數處理資料
$.getJSON("test.json", function(data){
for (var idx in data)
$("#menu").append("});
這是一段原始的 HTML：
test.json 的內容：
[
"Hello world!",
"jsGears.com!"
]
執行程式碼之後的結果：
[範例10]抓取DIV內容
onclick="addition('DivSh_Year');"[範例11]抓取DIV內容
onclick="addition(DivSh_Year);"
沒有留言:
張貼留言