jQuery 基本手冊

tags: 程式導師 jQuery

jQuery 是⋯⋯

• 一種輕量的 JavaScript Library
• 有三大特色：輕量、跨瀏覽器、搭配 CSS 選擇器

原生 Ajax 在不同瀏覽器需要不同處理，無法一體適用，因此才有 jQuery 能解決不同瀏覽器控制 DOM 的適用問題。

寫法

選擇物件

document.addEventListener('DOMContentLoaded', function() { document.queryselector('.btn').addEventListener('click', function(){
    alert('click!');
    })
})

//jQuery
document.addEventListener('DOMContentLoaded', function() { 
  var element = jquery('.btn');
  element.click(function(e){
    alert('click');
  })
  }
})

// $=jquery，因此也能寫成「混用型」
document.addEventListener('DOMContentLoaded', function() { 
  var element = $('.btn');
  element.click(function(e){
    alert('click');
  })
})

// 或者純 jQuery
// A $( document ).ready() block.
$( document ).ready(function() {
    var element = $('.btn');
    element.click(function(e){
    alert('click');
  })
});

改寫內容

$('.box').text('I am a box.')

顯示／隱藏物件

• $('.box').show() and $('.box').hide()
• $('.box').fadeIn() and $('.box').fadeOut() 有漸變效果的顯示／隱藏

取得值

• $('.input').value()
• $('.input').value('abc') 若 value() 內有數值，就是預設值。

插入物件

• append() 放在最後面
• prepend() 放在最前面

jQuery 與 Ajax：如何用 jQuery 發 request?

// callback function 另外寫
$.ajax({
  method: 'GET',
  url: '<url>'
}).done(function(data){  //執行成功
  console.log(data);
}).fail(function(err){  //執行有錯誤
  console.log('err', errr);
})

//callback function 寫在一起
$.ajax({
  method: 'GET',
  url: '<url>',
  success: data => console.log(data),
  error: err => console.log('err', err)
})

參考資料

• You Might Not Need jQuery
• jQuery learn
• jQuery API Document