# 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](http://youmightnotneedjquery.com/)
- [jQuery learn](https://learn.jquery.com/)
- [jQuery API Document](https://api.jquery.com/)