jQuery some example

http://jsgears.com/thread-63-1-1.html

$("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>


$("a[target]").append(" (Opens in New Window)"); 


  1. $("#body").css({ 
  2.   border: "1px solid green", 
  3.   height: "40px" 
  4. }); 

    1. $("form").submit(function() { 
  2.   if ($("input#username").val() == "") 
  3.   $("span.help").show(); 
  4. }); 


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

  1. $("a#open").click(function() { 
  2.   $("#menu").show(); 
  3.   return false; 
  4. }); 


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


  1. $("div").animate({ 
  2.     width: '300px', 
  3.     padding: '20px' 
  4.   }, 'slow'); 


  1. $("div").hide(500, function(){ 
  2.   // $(this) 是每一個各別的 <div> 
  3.   $(this).show(500); 
  4. }); 


取得 sample.html 並將找出文件內所有 <div> 下一層的 <h1> 填入原本文件 id 為 body 的元素內

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


透過 getJSON() 取得 JSON 格式的資料，並透過 callback 函數處理資料

  1. $.getJSON("test.json", function(data){ 
  2.   for (var idx in data) 
  3.     $("#menu").append("<li>" + data[idx] + "</li>"); 
  4. }); 


$("div").css("color", "blue"); 


  1. $("ul.open")                // [ ul, ul, ul ] 
  2.   .children("li")           // [ li, li, li ] 
  3.   .addClass("open")         // [ li, li, li] 
  4.   .end()                    // [ ul, ul, ul ] 
  5.   .find("a")                // [ a, a, a ] 
  6.   .click(function(){ 
  7.     $(this).next().toggle(); 
  8.     return false; 
  9.   })                        // [ a, a, a ] 
 10.   .end();                   // [ ul, ul, ul ] 


  1. var $j = jQuery.noConflict(); 
  2. $j(document).ready(function() { 
  3.   $j("div").addClass("special"); 
  4. });