jQuery 新手入門教學

本篇介紹 jQuery 新手入門教學，jQuery 是一套跨瀏覽器的 JavaScript 的函式庫，用於簡化 HTML 與 JavaScript 之間的操作，提供了一些簡便的語法，廢話不多說，直接開始進行最基本的 jQuery 範例。

以下 jQuery 新手入門教學分為這幾部分，

  • jQuery 基本用法
  • jQuery 處理按鈕事件

jQuery 基本用法

在網頁中要先在 src 中指定 jQuery library 路徑，否則會執行錯誤，如下範例，使用 3.6.0 版本的 jquery.min.js，

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

你也可以下載一份 jQuery 函式庫放在本地端，然後更改 script 的 src="..." 使用本地端的 jQuery 版本。

1
<script src="/jquery/3.6.0/jquery.min.js"></script>

以下範例是在網頁 html 的 DOM 元素全部下載完後觸發 $(document).ready() 執行程式，$(document).ready() 跟 window.onload 很像，都是在 HTML 執行 DOM 操作，但他們還是有一些觸發時間差異，

jquery-tutorial.html
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
27
28
29
30
31
32
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("p").click(function(){
          //document.body.style.background = 'red';
          
          //let elements = document.querySelectorAll('p');
          //elements.forEach(ele => ele.style.background = 'red');

          /*let p = document.getElementsByTagName('p');
          for (let i = 0; i < p.length; i++) {
              p[i].style.background = 'red';
          }*/
          
          //$('p').css('background', 'red');
          
          //document.getElementById("hello").style.background = 'red';
          $('#hello').css('background', 'red');
        });
      });
    </script>
  </head>
  <body>
    <p id="hello">Hello World</p>
    <p>This is a jQuery example</p>
  </body>
</html>

jQuery 處理按鈕事件

以下示範點擊按鈕後，觸發按鈕事件，在按鈕事件中紀錄點擊次數，並顯示點擊次數顯示在按鈕上，

jquery-tutorial2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      let counter = 0;
      $(document).ready(function() {
        $('#btn').on('click', function() {
          counter++;
          console.log(counter);
          $(this).html("按鈕點擊" + counter + "次")
          //$('#btn').text("按鈕點擊" + counter + "次");
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">按鈕</button>
  </body>
</html>

以上就是 JavaScript 判斷手機版/行動裝置範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其他參考
jQuery Tutorial
https://www.w3schools.com/jquery/default.asp
[基礎課程] jQuery 教學（一）：基礎觀念 | 洛奇的邪惡組織手札
https://summer10920.github.io/2020/04-23/jq-baseclass-1/