---
# System prepended metadata

title: Hi~前端工具們 - jQuery basic 1

---

# Hi~前端工具們 - jQuery basic 1

前端工具們：
1. jQuery
2. Bootstrap
3. CSS 預處理器 Sass
4. Babel
5. gulp
6. Webpack

---

## jQuery
是一種 **JS library**

- 優勢: 檔案小又可以壓縮，支援CSS3，跨瀏覽器

透過簡化語法將常見的 function 包在一起，進而壓縮檔案大小
例如 
$() 就是 selector
$ = jQuery
.on() 就是 onClick

---

### 由來

- **2006年 IE7 & Firefox** <= jQuery 誕生年

當年主流瀏覽器是 ie ，有多種瀏覽器，一個功能就可能要有五種寫法 所以 jQuery 的誕生在此時最大的優勢就是跨瀏覽器 Cross-Beowser

- **2007年 iPhone誕生**
- **2008年 Chrome 推出**  目前主流瀏覽器已經變成 Chrome 了

---

### 如何使用

在html檔前面引入網址

`<script src=“https://code.jquery.com/jquery-3.6.0.js”></script>`

範例

```
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">

    <title>jQ</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="jquery-3.6.0.js"></script>
    <style>
      .box{
        width: 200px;
        height: 200px;
        background-color: rgb(230, 137, 253);
        margin: 60px;
        font-size: 60px;
      }
    </style>
  </head>

  <body>
    <input class="todo_input" type="text"/>
    <button class="btn">BB</button>
    <div class="box">box</div>
```
原本的寫法

`<script>`


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



jQuery的寫法
```
     $(document).ready(function(){
      $('.btn').click(function(e){
        //alert('click!')
        $('.box').text('Hi!')
      })
     });
```

還可以使用 hide()，預設的style="display:none"
使用預設的淡入淡出很方便 fadeIn(),fadeOut()，中間可以放秒數

```
 var isHide = false
 $(document).ready(function(){
  $('.btn').click(function(e){
    if(isHide) {
      $('.box').fadeIn()
    } else {
      $('.box').fadeOut()
    }
    isHide = !isHide
  })
 });
```


```
</script>

</body>
</html>
```



---



### 查詢資料

**1. 官方文件**
https://api.jquery.com/

**2. You might not need jQuery**

可以查原生怎麼寫對照 jQuery 怎麼寫
http://youmightnotneedjquery.com/