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

Selector

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

Traversing

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

$(document).ready(function(){

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

});

This DOM

$(this).remove; this 指向觸發 (trigger) 這個事件的 DOM,因此此例中只有陔 DOM 會被移除

$(this).closest('.vacation'); 找其最接近的 .vacation 祖先

Refactor

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!!

Filtering

<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

In CSS

.ticket {display: none;}

To show it

.find(ticket).slideDown(); 顯示

.find(ticket).slideDown(); 隱藏

.find(ticket).slideToggle(); 顯示加隱藏

.fadeIn();

.fadeOut();

.fadeToggle();

On() mouse event

click,focusin,mousedown,mousemove,mouseover,mouseenter,dbclick,focusout,mouseup,mouseout,mouseleave

On() keyboard event

keypress,keydown,keyup

jQuery 轉型

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

jQuery 存取 input 欄位

$('').val() 取值

$('').val() 存值

FadeToggle

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

.expand 觸發 event, 產生 event bubble, 會向上經過所有parent nodes,最後傳至document 這會導致頁面拉到最上方

防止瀏覽器預設行為

$(document).ready(function(){

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

});

防止 bubble up

$(document).ready(function(){

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

Changing the Style

Set style $(this).css(<attr>,<value>) or $(this).css(<obj>); $(this).css({'background-color':'red','boder-color':'blue'});

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

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

application.js

$(this).toggleClass("highlighted");

Animation

$(this).animate(<obj>);

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

application.css

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

hasClass

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

AJAX

<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'/>
    </div>
</li>

application.js (non-AJAX)

$('.confirmation').on('click', 'button', function(){
    $(this).closest('.confirmation').find('.ticket').slideDown();
});
$('.confirmation .view-boarding-pass').on('click', function() {
    $(this).closest('.ticket').find('img').show();
});

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
            $('.ticket').html(response).slideDown();
        }
    });
});

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' />
</div>

A shorthand method .get(url,success)

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

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

$.ajax('confirmation.html', {
    success: function(response) {
        $('.ticket').html(response).slideDown();
    },
  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
            $('.ticket').html(response).slideDown();},
    error: function(request, errorType, errorMessage) {        // Run when time out
            alert('Error: ' + errorType + ' with message: ' + errorMessage);},
    timeout: 3000,
    beforeSend: function() {    // Run before the Ajax request
        $('.confirmation').addClass('is-loading');},
        }
      complete: function() {    // Run after both success and error
          $('.confirmation').removeClass('is-loading');}
    });
});

AJAX 內的 AJAX 要指定 target $("div").on('click','button',function(){});

results matching ""

    No results matching ""