jQuery 實戰經驗講座

更進一步瞭解 jQuery

你所知道的 jQuery

jQuery 的特色？

你用 jQuery 做過什麼？

你沒用過，但你知道的功能有哪些？

習題說明

Unobtrusive JavaScript

Chaining

Anonymous Function

this

•在函式裡代表？•在 jQuery Event Handler 裡代表？

closure

簡單來說，就是用到了外部function 所定義的變數的匿名函式

AJAX

$(selector).load()&

$.get()&

$.post()

$.ajax()&

$.ajaxSetup()

JSONvs.

XMLvs.

HTMLvs.

Text

API Reference

官方手冊(http://remysharp.com/jquery-api/)

&jQuery API

(http://remysharp.com/jquery-api/)

易搞混的 Selector 與method

ancestor descendantvs.

parent > childvs.

prev + nextvs.

prev ~ siblings

:not(selector)=

.not(selector)

:eq(index)=

.eq(index)

:has(selector)vs.

:contains(text)

:parentvs.

.parent(selector)vs.

.parents(selector)

$(selector)[index] =

$(selector).get(index)

:enabled, :disabled&

:checked, :selected(only form element)

:hidden&

:visible(1.3.2: offsetWidth or offsetHeight = 0 ?)

.after()vs.

.insertAfter()

.before()vs.

.insertBefore()

.append()vs.

.appendTo()

.prepend()vs.

.prependTo()

1.3 新特色(http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/01/15/jquery-1-3.aspx)

Sizzle Selector 引擎(http://sizzlejs.com/)

.live()

[@attr=xxx]to

[attr=xxx]

.closest(selector)

.isArray()

Plugins

blockUI(http://www.malsup.com/jquery/block/)

Form(http://www.malsup.com/jquery/form/)

checkboxes(http://www.texotela.co.uk/code/jquery/checkboxes/)

selectboxes(http://www.texotela.co.uk/code/jquery/select/)

mousewheel(http://brandonaaron.net/code)

UI(http://ui.jquery.com)

特別的技巧

如何做出可開合的頁首目錄？(http://codeigniter.com/user_guide/)

如何做出移過表格列時，出現編輯選單的效果？

(WordPress 後台編輯文章列表)

如何產生動態下拉選單？(http://www.ocar.com.tw/)

如何將頁面以 Ajax 方式載入到 blockUI ，並加入拖曳

效果？(http://demo.wabow.com/ecmail/)

還缺什麼？

你的想像力！

課後練習

請試著在 AJAX 要求啟動時，透過 blockUI 把頁面遮閉起來；然後當 AJAX 要求結束時，再解除blockUI 。

在「如何產生動態下拉選單？」範例中有個隱藏欄位「 fullIdPath 」，指得是頁面載入時，下拉選單依次會選到的項目。請試著完成這部份的功能。

請試著結合「如何做出移過表格列時，出現編輯選單的效果？」及「如何將頁面以Ajax 方式載入到blockUI，並加入拖曳效果？」兩個範例的效果，也就是當點選「修改」後，會出現修改的彈出視窗。

下課