over 4 years ago

jQuery make it easy to:
1. find elements in and HTML document
2. change HTML content
3. listen to what a user does and react accrodingly
4. animate content on the apge
5. talk over the network to fetch new content

$("h1"); 找 h1 element
$("h1").text(); 顯示h1 element裡的內容
$("h1").text("blah"); 改變h1 element裡的內容
$("li").length; 計算 li 數目

$(document).ready(function(){}); 讀完DOM之後才會開始做裡面的事
function 是 even handler


$("ol li"); Descendant selector
$("ol > li"); Child selector
$("hi, h2"); Multiple selector
$("ol li:first"); CSS like pesudo selector (filter)
$("ol li:last");
$("ol li:odd");
$("ol li:even");


$("ol").find("li"); 速度比 selector 快
$("li").first().next(); 選第二個 li
$("li").first().next().prev(); 選第一個 li
$("li").first().parent(); 選擇其 parent
$("ol").children("li"); 選擇 ol 的 direct children,而且只選 li

Manipulating the DOM

var message = $("<span>1-555-jquery-air</span>"); 產生一個 DOM 並存入 message
$('.vacation').append('<p>Append</p>'); 在 vacation class 的 direct children 新增一個 DOM p 在最後
$('.vacation').prepend('<p>Append</p>'); 在 vacation class 的 direct children 新增一個 DOM p 在最前
$('.vacation').before('<p>Append</p>'); 在 vacation class 之前新增一個 DOM p 在最前
$('.vacation').after('<p>Append</p>'); 在 vacation class 之後新增一個 DOM p 在最前
$('button').remove(); 移除 DOM button

Acting on interaction


    $("button").on('click', function(){
        Manipulating the DOM


This DOM

$(this).remove; this 指向觸發 (trigger) 這個事件的 DOM,因此此例中只有陔 DOM 會被移除
$(this).closest('.vacation'); 找其最接近的 .vacation 祖先


var vacation = $(this).closest('.vacation'); 簡化 code
vacation.remove(); = $(this).closest('.vacation').remove

Tackling the HTML

.data(<name>); HTML5中有data attribute,可使用此方法處理這些data attributes,"name"為其鍵值
<p data-price='100'> 使用 .data('price');

$(".vacation").on('click','button', function(){}); 只對 vacation 裡的 button click 反應,button也可以置換成 class or id 和其它的 DOM,注意這裡被觸發的是button不是.vacation!!


<li class="vacation onsale>假定有一個 DOM
$(".vacation").filter("onsale");` 選擇 .class 中含有 .onsale 的 DOM

DOM manipulation

.addClass(<class>); e.x. $('p').addClass('highlight')
.removeClass(<class>); e.x. $('.highlight').removeClass('highlight')

Slide down

.ticket {display: none;}
To show it
.find(ticket).slideDown(); 顯示
.find(ticket).slideDown(); 隱藏
.find(ticket).slideToggle(); 顯示加隱藏

On() mouse event


On() keyboard event


jQuery 轉型

+$('p').data('price'); 將字串轉型為數字

jQuery 存取 input 欄位

$('').val() 取值
$('').val() 存值


<a href='#' class='expand'>show comments</a>

.expand 觸發 event, 產生 event bubble, 會向上經過所有parent nodes,最後傳至document



    $(".expand").on('click', function(event){
        Manipulating the DOM


防止 bubble up


    $(".expand").on('click', function(event){
        Manipulating the DOM

Changing the Style

Set style
$(this).css(<attr>,<value>) or $(this).css(<obj>);

不要在 js 內寫 css,寫在CSS裡 (application.js => application.css)

.highlighted {
    background-color: red;
.highlighted .price {
    background-color: green;
  display: block;




$(this).animate({'top','-10px'},time); 從目前狀態變成設定的 obj 的狀態
default time = 400, 'fast' = 200, 'slow' = 600; time 可以用在 slideToggle, fadeToggle...
同樣,不希望在 js 裡寫 css

.vacation {
    transition: top 0.2;
.highlited {
    top: -10px;


$(this).hasClass('highlighted'); 檢查是否有 highlighted 類,回傳 bool


<li class='confirmation'>
    <h3>Hawaiian Vacation</h3>
    <button>Flight details</button>
    <div class='ticket'>
        <a class='view-boarding-pass'>View Boarding Pass</a>
        <img src='/ticket-14836.png'/>

application.js (non-AJAX)

$('.confirmation').on('click', 'button', function(){
$('.confirmation .view-boarding-pass').on('click', function() {

application.js (AJAX)
$.ajax(url, <obj>)

$('.confirmation').on('click', 'button', function(){
    $.ajax(url, {
        success: function(response) {       // Run only when the server returns a successful response

What responded is...

<div> ...
<strong>Boarding Pass: </strong>
<a href='#' class='view-boarding-pass'>View Boarding Pass</a>
<img src='ticket.png' alt='Your boarding pass' class='boarding-pass' />

A shorthand method

$('.confirmation').on('click', 'button', function(){```
    $.get('confirmation.html', function(response) {

AJAX url we like this
confirmation.html?confNum=1234 Dynamic url

$.ajax('confirmation.html', {
    success: function(response) {
  data: { "confNum": 1234 }     // js object

If you have data attribute, you can pull it from HTML, replace the js object obove
data: { "confNum": $(".ticket").data("confNum")

Some Ajax options

$('.confirmation').on('click', 'button', function(){
    $.ajax(url, {
        success: function(response) {       // Run only when the server returns a successful response
    error: function(request, errorType, errorMessage) {     // Run when time out
            alert('Error: ' + errorType + ' with message: ' + errorMessage);},
    timeout: 3000,
    beforeSend: function() {    // Run before the Ajax request
    complete: function() {  // Run after both success and error

AJAX 內的 AJAX 要指定 target

← Git memo N+1 query, repack →
comments powered by Disqus