Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Try Jquery ( 1 )( 2 )( 3 ) :建立互動式的購物網頁

使用javascript時,每個瀏覽器的DOM API有些許的不同,所以可能需要用不一樣的寫法。
而透過jQuery的話,只需要一種寫法就可以適用所有的瀏覽器。

Document Object Model

DOM - A tree-like structure created by browsers so we can quickly find HTML Elements using JavaScript.

Inside the DOM, HTML elements become “nodes”

建立一個互動式的價目網站

Step 1:按下get price時就會顯示價錢。

程式邏輯:

1.先刪除get price按鈕。(remove)
2.加上顯示價錢的element。(appending a node)

$(document).ready(function() {
   var price = $('<p>From $399.99</p>');
   $('.vacation').append(price);
   $('button').remove();
});

Step 2-1: 使用$(this)找到讓按下的button改變,而不是全部的button。

$(document).ready(function() {
   $('button').on('click', function() {
     var price = $('<p>From $399.99</p>');
     $(this).after(price);
     $(this).remove();
}); });

Step 2-2另一種加入price的方法

$(document).ready(function() {
   $('button').on('click', function() {
     var price = $('<p>From $399.99</p>');
     $(this).closest('.vacation').append(price);
     $(this).remove();
   }); 
});

使用closet()可以找到離自己最近的「一個」元素,比使用parents()還要更加精準。

$(this).closest('.vacation').append(price);

使用parents可能會搜尋到自己不要的element。

$(this).parents('.vacation').append(price);

Step 3: 每個price取得各自的標價。

$(document).ready(function() {
   $('button').on('click', function() {
     var amount = $(this).closest('.vacation').data('price');
     var price = $('<p>From $'+amount+'</p>');
     $(this).closest('.vacation').append(price);
     $(this).remove();
   });
});

$(this).closest('.vacation')可重複利用,用變數vacation儲存之。

$(document).ready(function() {
   $('button').on('click', function() {
      var vacation = $(this).closest('.vacation');
      var amount = vacation.data('price');
      var price = $('<p>From $'+amount+'</p>');
      vacation.append(price);
      $(this).remove();
   });
});

Step 4: 每個button設定不同的click handler

Step 5: 按下右上方high light鈕時能夠顯示對應的效果。

  1. Filtering for Vacations On sale
  2. 對每個找到的元素加high-light style。
<div id='filters'>
  ...
   <button class='onsale-filter'>On Sale Now</button>
   <button class='expiring-filter'>Expiring</button>
  ...
</div>
$('#filters').on('click', '.onsale-filter', function() {
    $('.highlighted').removeClass('highlighted');
   $('.vacation').filter('.onsale').addClass('highlighted');
 });

這三章學習到的技能有

1. 使用jQuery選取元素

第一個方法是使用css selector
第二個方法是使用traversing的方式來選取元素。

使用css selector選取元素

css selector的用法是在$(" 輸入css selector ")

使用traversing選取元素

Learn.jquery.com Traversing
jquery.com traversing API

2. appending的用法

3. event handler

$('button').on('click',function(){
  //runs when any button is clicked

});
.on(<event>, <event handler>)

4. 使用closest找到最近的元素