[jQuery] .bind(), .delegate(), .on()

.bind( eventType [, eventData ], handler(eventObject) )

Def: Attach a handler to an event for the elements.
- Attaching an event handler directly to elements, so the elements must exist at the point the call to .bind() occurs.

.delegate( selector, eventType, handler(eventObject) )

Def: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
- Dynamic friendly: 所有新增的元素也都會被 track 

.on( events [, selector ] [, data ], handler(eventObject) )   // prefered after v1.7

Def: Attach an event handler function for one or more events to the selected elements.
- When a selector is provided, the event handler is referred to as delegated.
- Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

[轉] jQuery(document).ready() vs. window.onload

使用 jQuery(document).ready() 與 window.onload 注意事項 | 保哥

[jQuery] 教學網站整理

jQuery 教學 - 基礎篇 | jsGears
jQuery 教學 | WebDesign

[jQuery] e.preventDefault

If this method is called, the default action of the event will not be triggered

Default 行為像是: <a> 點了之後會移去超連結，form submit 點了之後會送出。
多加了這一行，都會把這些動作取消掉。
轉: event.preventDefault() | jQuery
表單提交(submit)時使用preventDefault可能產生的問題
e.preventDefault(); 和return false的区别是什么?

How-To-Submit-a-Form-with-jQuery-and-AJAX

How-To-Submit-a-Form-with-jQuery-and-AJAX

[AJAX] jQuery.ajax() success: vs. .done

done is the preferred way to implement success callbacks, as it can be called on any deferred.

Reference: jQuery.ajax handling continue responses: “success:” vs “.done”?, what is diffrence between success and .done() method of $.ajax

[轉] Codeigniter 上利用 jQuery 實現 AJAX

Codeigniter 上利用 jQuery 實現 AJAX

[轉] 為什麼有時你應該優先考慮 event delegate 而不是 event binding

為什麼有時你應該優先考慮 event delegate 而不是 event binding | TonyQ @ IT 邦

[轉] Event bubbling vs. Event capturing

Event bubbling vs. Event capturing
不過事實上，幾乎都是 event bubbling，很少很少會用的 event capturing

[jQuery] .bind(), .trigger(), .live()

Reference: jQuery 學習心得筆記 (2) | erick.net, .bind(), .trigger(), .live()

自訂 event 的好處就在於，你可以把物件任意地 bind 於某個 event 上

[jQuery] event.target, $(this)

Reference: Events, event.target | jQuery

event.target: The DOM element that initiated the event.
event.currentTarget (=== this): The current DOM element within the event bubbling phase.

[jQuery] Event Handling 事件處理

Reference: jQuery 的事件(Event)處理 | ericsk.net
非常棒的文章!

[JavaScript] 使用 eval() 跑迴圈

Reference: Javascript 的eval()語法

jQuery HTML 操作

函數	描述
$(selector).html(content)	改變被選元素的（內部）HTML
$(selector).append(content)	向被選元素的（內部）HTML 追加內容
$(selector).prepend(content)	向被選元素的（內部）HTML “預置”（Prepend）內容
$(selector).after(content)	在被選元素之後添加HTML
$(selector).before(content)	在被選元素之前添加HTML

Reference: jQuery HTML 操作 | w3school, .html() | jQuery

[jQuery] Mouse Events

Reference: Mouse Event
.hover() - Fires when both mouseover() and mouseout()

[jQuery] toggle(), slideToggle() animation

.toggle()

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});

.slideToggle()

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

More animation effect on jQuery UI

[jQuery] check visibility display or hide

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]

Reference: Stackoverflow

jQuery UI tab select implementation with event activate

$( ".selector" ).tabs({
    activate: function( event, ui ) {}
});

Event-Activate - jQuery UI

jQuery difference between .add() and .append()

.add()

Add elements to the set of matched elements.

$('div').css('background-color':'yellow').add('p').css('color':'red');

.append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

$('div').append('p');

Reference: whats-the-difference-between-add-and-append-jquery

jQuery + CSS 電視牆

jquery和CSS3实现的超酷类似电视墙的交互式菜单