1. 介紹 JavaScript 與 jQuery

1.1 什麼是 JavaScript？

JavaScript 是一種高級、動態、直譯式程式語言，主要用於網頁開發。它可以與HTML和CSS相互搭配，使網頁具有更多的交互性和動態性。

1.2 為什麼使用 JavaScript？

• 客戶端腳本語言： JavaScript 在瀏覽器中運行，可以動態地修改網頁內容，實現與用戶的即時互動。

• 廣泛支援： 幾乎所有現代瀏覽器都支援 JavaScript，使其成為開發前端應用的理想選擇。

• 生態系統豐富： 有許多強大的框架和函式庫，擁有龐大的開發者社區和資源。

1.3 介紹 jQuery

jQuery 是一個快速、輕量且功能豐富的JavaScript函式庫。它簡化了處理HTML文件遍歷和操作、事件處理、動畫和AJAX等操作的方式，讓開發者可以更輕鬆地完成常見的任務。

1.4 為什麼使用 jQuery？

• 簡化語法： jQuery 使用簡潔的語法，使 DOM 操作和事件處理更加容易。

• 跨瀏覽器相容性： jQuery 解決了不同瀏覽器之間的兼容性問題，使開發更加一致。

• 豐富的插件： jQuery 生態系統擁有豐富的插件，可以快速擴充功能。

• 快速開發： 基於簡化的API和功能，jQuery 可以加速前端開發的速度。

1.5 Query 與 JavaScript 比較範例

元素選取範例

JavaScript 元素選取範例

// 獲取所有段落元素
let paragraphs = document.getElementsByTagName('p');
// 將所有段落文字設定為紅色
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = 'red';
}

jQuery 元素選取範例

// 將所有段落文字設定為紅色
$('p').css('color', 'red');

動畫效果範例

JavaScript 動畫效果範例

// 獲取元素
let element = document.getElementById('myElement');
// 動畫效果：透明度在3秒內從1降到0
let opacity = 1;
let interval = setInterval(function() {
    element.style.opacity = opacity;
    opacity -= 0.01;
    if (opacity <= 0) {
        clearInterval(interval);
    }
}, 30);

jQuery 動畫效果範例

// 動畫效果：透明度在3秒內從1降到0
$('#myElement').animate({ opacity: 0 }, 3000);

異步請求範例

JavaScript 異步請求範例

// 創建XMLHttpRequest對象
let xhr = new XMLHttpRequest();
// 設定異步GET請求
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 處理請求完成後的回調函數
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
// 發送請求
xhr.send();

jQuery 異步請求範例

// 使用jQuery的ajax方法發送GET請求
$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET'
}).done(function(data) {
    console.log(data);
}).fail(function(xhr, status, error) {
    console.error('Ajax request failed:', status, error);
});

1.5 結語

1. 簡潔的語法： jQuery的語法簡單易讀，可以用更少的代碼實現相同的功能，提高開發效率。

// JavaScript
document.getElementById('myElement').style.color = 'red';
// jQuery
$('#myElement').css('color', 'red');

1. 跨瀏覽器相容性： jQuery處理了大多數瀏覽器之間的差異，確保開發者無需擔心兼容性問題，提高代碼的可靠性。

2. 便捷的DOM操作： 提供了簡單而強大的DOM操作方法，使元素的選取、修改和操作變得更容易。

// JavaScript
document.getElementById('myElement').innerHTML = 'Hello, World!';
// jQuery
$('#myElement').html('Hello, World!');

1. 特效和動畫： 提供了方便的動畫和特效函數，使開發者能夠輕鬆地添加動態效果，而不必深入研究原生JavaScript的動畫實現。

// jQuery 動畫
$('#myElement').fadeOut(1000).fadeIn(1000);

1. Ajax的簡化： jQuery簡化了異步請求（Ajax）的處理，使開發者能夠更容易地進行數據的讀取和提交。

// jQuery Ajax
$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET'
}).done(function(data) {
    console.log(data);
}).fail(function(xhr, status, error) {
    console.error('Ajax request failed:', status, error);
});