jQuery 基本用法

取得 jQuery Library§

於文件中導入 jQuery 檔。可由官網先下載此檔，或由 CDNs 導入 [註： CDN]。檔名中有 min 的表示已經過壓縮 (compressed) 。

html 文件：在 <head> 或 <body> 元素區段中加 <script> 導入。
<script src="./jquery.js" defer></script>

以 src 屬性指定 jQuery Library 的核心 js 檔的來源網址。

jQuery 物件基本使用模式

jQuery function 物件
jQuery("section#news").css({color:"gray"});
jQuery 物件
jQuery.extend(ob1,ob2);

大多時候 jQuery 可改為 $ 代稱速寫。

跟一般 ECMAScript (Javascript) 一樣，可寫在獨立的 js 檔，或是寫在 <script> 元素中。

jQuery(selector)§

第一個參數 selector 為 String type (文字態，以 " 或 ' 包圍) 。可以是標準的 css selectors ，或是 jQuery 裡延伸的定義。

假設 html 片段
<ul class="menu">
 <li>桃源行 <strong>王維</strong></li>
 <li>早梅 <strong>張謂</strong></li>
 <li>定風波 <strong>蘇東坡</strong></li>
</ul>
jQuery() 以 css selectors 參數取得元素並產生物件，如，
jQuery("*.menu")
jQuery("*.menu li")
jQuery("li>strong")
jQuery("*.menu>li:last-child")

jQuery 物件的方法 (methods)§

.css()#

方法可變更或取得元素的樣式。參數可有數種型式，先以 object 為例。

jQuery script 片段 (借用前節 html)
$("*.menu").css({textAlign:"justify"});
$("*.menu li").css({backgroundColor:"aqua",display:"inline-block",marginRight:"0.5em"});
html 動態變為
<ul class="menu" style="text-align:justify">
 <li style="background-color:aqua;display:inline-block;margin-right:0.5em;">桃源行 <strong>王維</strong></li>
 <li style="background-color:aqua;display:inline-block;margin-right:0.5em;">早梅 <strong>張謂</strong></li>
 <li style="background-color:aqua;display:inline-block;margin-right:0.5em;">定風波 <strong>蘇東坡</strong></li>
</ul>
.addClass(), .removeClass()#

方法可加入或移除元素的 class 屬性的名稱值。參數為 String type 。

jQuery script 片段，替元素加 class 名稱 (借用前節 html)
$("*.menu").addClass("poem");
$("li>strong").addClass("author");
html 動態變為
<ul class="menu poem">
 <li>桃源行 <strong class="author">王維</strong></li>
 <li>早梅 <strong class="author">張謂</strong></li>
 <li>定風波 <strong class="author">蘇東坡</strong></li>
</ul>
jQuery script 片段，接著假設在不同時候，移除元素 class 名稱，如，
$("*.menu").removeClass("poem");
$("li>strong").removeClass();
html 動態變為
<ul class="menu">
 <li>桃源行 <strong class="">王維</strong></li>
 <li>早梅 <strong class="">張謂</strong></li>
 <li>定風波 <strong class="">蘇東坡</strong></li>
</ul>
.on(events, handler)#

方法指定偵聽的事件名稱 (events, String type) 及事件處理函數 (handler, Function type) 。

假設 html 片段
<dl class="item">
 <dt>涼州詞 <strong>王翰</strong></dt>
 <dd>
  <p>葡萄美酒夜光杯</p>
  <p>欲飲琵琶馬上催</p>
  <p>醉臥沙場君莫笑</p>
  <p>古來征戰幾人回</p>
 </dd>
 <dd>
  <button>上色</button>
 </dd>
</dl>
jQuery script 片段，替元素加 click 使用者互動的事件 (interactive event)，如，
var c1=function(){
 $("*.item>*:nth-child(2)>*:nth-child(2n)").css({backgroundColor:"#eee"});
 $(this).remove();
};
$("*.item button").on("click", c1);
使用者在 [上色] button 按下執行鍵後， html 動態變為
<dl class="item">
 <dt>涼州詞 <strong>王翰</strong></dt>
 <dd>
  <p>葡萄美酒夜光杯</p>
  <p style="background-color:#eee">欲飲琵琶馬上催</p>
  <p>醉臥沙場君莫笑</p>
  <p style="background-color:#eee">古來征戰幾人回</p>
 </dd>
 <dd></dd>
</dl>
.ready(handler)#

方法為文件 完整讀入完畢 (包括完成載入外部來源) 的特別事件函數。參數 handler (Function type) 是事件處理函數。

jQuery script 片段
jQuery(document).ready(function(){/*DOM 完整載入後才執行的 script 區段*/});

建議以簡化語法，

jQuery(function(){/*DOM 完整載入後才執行的 script 區段 */});
jQuery script 片段，使用 jQuery 代稱，如 $ ，以事件處理函數的參數指定代稱，可防止與其它 Library 發生名稱衝突。
jQuery(document).ready(function($){/*DOM 完整載入後才執行的 script 區段，可安全使用 $ */});

建議以簡化語法，

jQuery(function($){/*DOM 完整載入後才執行的 script 區段，可安全使用 $ */});

更新日期：