前端新米

Heidi's Blog

0%

[week 12] 前端工具之一 - jQuery 與 Bootstrap

發表於 更新於 分類於
文章字數： 3.8k 所需閱讀時間 ≈ 3 分鐘

本篇為 [FE201] 前端中階：那些前端會用到的工具們 這門課程的學習筆記。如有錯誤歡迎指正。

前言

在使用新工具之前，大致會依照下列步驟：

  1. 安裝工具
  2. 閱讀官方文件
  3. 更改設定檔

jQuery：JS 函式庫

jQuery 是一個 JavaScript 函式庫（Javascipt Framework），是幫助加速網頁程式開發的工具。可解決跨瀏覽器的問題，能夠快速又方面操作 DOM，縮短開發時間與簡化程式碼。

如何使用

和引入 JavaScript 方法類似：

1
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

基本格式

使用 jQuery 的基本語法如下，意即指派元素到指定的事件：

1
2
3
4
5
// 選取 `$(selector)` 元素，並指派它進行 `.action()` 事件
$(selector).action()

// 範例
$( "button.continue" ).html( "Next Step..." )

其中的 $() 符號就是 jQuery 常用的選擇器，善用選擇器可以快速找到網頁當中的物件。

以按鈕 Button 的點擊事件為例：

JavaScript 原生語法

1
2
3
4
5
6
// 使用 DOMContentLoaded 或 load 事件，可確保 DOM 結構被完整的讀取跟解析
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('.btn').addEventListener('click', function() {
    alert('click!')
  })
})

兩者結構其實非常類似，多數情況下 JavaScript 和 jQuery 的語法兩者也能夠混用。

使用 jQuery

1
2
3
4
5
6
// jQuery === $
$(document).ready (function() {
  $('.btn').click(function(e) {
    alert('click jq!')
  })
})

參考資料：

  • DOMContentLoaded與load的區別
  • jQuery Core API Documentation：用來查閱官方說明文件
  • You might not need jQuery：可對照 jQuery 和 JavaScript 的寫法

相關語法

淡入淡出效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  .box {
    height: 200px;
    width: 200px;
    background: brown;
  }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script>
  var isHide = false
  $(document).ready (function() {
    $('.btn').click(function(e) {
      if (isHide) {
        $('.box').fadeIn(500)    // show()
      } else {
        $('.box').fadeOut(500)   // hide()
      }
      isHide = !isHide
    })
  })
  </script>
<body>
  <button class="btn">I am a button</button>
  <div class="box"></div>
</body>

簡易 todo list

首先建立點擊事件，來拿取 input 欄位輸入的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready (function() {
  $('.btn').click(function(e) {
    console.log($('.todo-input').val()) // 測試是否讀取成功
  })
})
</script>
<body>
  <input class="todo-input" />
  <button class="btn">Add todo</button>
  <div class="todos"></div>
</body>

再來加入新增 todo 到 todos 的功能：

  • prepend()：新增元素到最上面
  • append()：新增元素到最下面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .todo {
    padding: 10px;
    border: 1px solid #eee;
  }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
  $(document).ready (function() {
    $('.btn').click(function(e) {             // 建立點擊事件
      const value = $('.todo-input').val()    // 拿取 value 值
      $('.todo-input').val('')                // 讀取完後清空 input 欄位
      $('.todos').prepend(`<div class="todo">${value}</div>`)    // 把該元素新增到 todos
    })
  })
</script>
<body>
  <input class="todo-input" />
  <button class="btn">Add todo</button>
  <div class="todos"></div>

ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.ajax({
  type: "GET", // 指定 method
  url: 'ajax/test.html',
  success: function(data) {
  $('.result').html(data);
  alert('Load was performed.');
  }
});

// 取得 HTML: load()
$("#htmDoc").load("test.html");

// 取得 JSON 格式的資料: getJSON()
$.getJSON("test.json", function(data){  
  for (var idx in data)  
    $("#menu").append("<li>" + data[idx] + "</li>"); 
});  

// document ready 事件
$(document).ready(function() {  
  alert('Hello');    // 網頁下載完成後立即執行 alert()
});

參考資料：

  • jQuery 簡單介紹
  • JQuery 筆記 (一) – 淺談 JQuery

Bootstrap：UI Library

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架，內建多項模組化的版型與元件樣式。例如：字體排印、表單、按鈕、導航及其他各種元件及 Javascript 擴充套件。主要用於創建網站和 Web 應用程式，能幫助快速開發響應式網頁。

參考資料：

  • Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學
  • Bootswatch：提供各種經過調整顏色的 Bootstrap 版本，可以套用在已有的 Bootstrap 網站上