JQuery基礎 — 環境建置與選擇器
⭐ 什麼是 JQuery ?
🏠 環境建置
1️⃣ 下載 JQuery 引用檔案
Step1. 到 jquery 官網後，按下右邊 Download 進入下載頁面
Step2. 這邊我是選取紅框圈起來的連結來下載 Download the compressed, production jQuery 3.6.3
Step3. 進入連結之後直接按右鍵另存新檔到要使用的專案資料夾內
2️⃣ 引用 JQuery 及下載 JQuery snippets 插件
在 HTML 檔案的 <head></head> 內以 <script src=""></script> 載入 jQuery 檔案
1 | <!-- index.html --> |
下載 JQuery Code Snippets 插件
🔑 JQuery 語法
📖 JQuery 選擇器 (Selector)
-
以
$表示選擇器 (Selector) -
( )內的字串參數必須 “遵循 CSS 語法” 來選擇元素的標籤、class、id 等等1
$('字串參數')
📖 JQuery 語法載入
Step1. 載入 jquery 檔案
-
新增
index.js 檔案，並載入到在</body>標籤前面，也就是 HTML 元素最後面 -
因為程式是由上往下執行，JQuery 才可以操作網頁 DOM 元素
1
2
3
4
5
6<!-- index.html -->
<body>
<!-- 這邊是 HTML 元素 -->
<script src="./javascript/index.js"></script>
</body>
Step2. JQuery 語法載入方式，兩者擇一都可以
-
第一種:
1
2
3
4
5// index.js
$( document ).ready(function() {
// 之後對元素的動作都寫在這
}); -
第二種:
1
2
3
4
5// index.js
$(function() {
// 之後對元素的動作都寫在這
});
📖 JQuery API 常用方法
📌 CSS 渲染方法
.css()
-
語法:
1
2$( "selector" ).css("propertyName", "value" )
$( "選擇器" ).css("CSS 屬性名稱", "CSS 屬性值" )
📌 jQuery Effect
.hide() & .show()
-
語法:
1
2$( "selector" ).hide() // 隱藏元素
$( "selector" ).show() // 顯示元素
.toggle()
-
語法一: 將指定元素初始狀態變為顯示或隱藏，可搭配動作持續時間
1
2$( "selector" ).toggle( [duration ] [, complete ] )
$( "selector" ).toggle( '顯示/隱藏 持續時間', 動作完成後執行的函式 )[duration]: 填入持續時間，時間單位為 “毫秒 (ms)” 如300或600，也可寫fast或slow[complete]: 顯示或隱藏完成後執行的函式- 當指定元素初始狀態為顯示，會變為隱藏；當指定元素初始狀態為隱藏，會變為顯示
-
語法二: 將指定元素顯示或隱藏
1
$( "selector" ).toggle( display );
-
display: 填入 Boolean 值，操作元素的顯示和隱藏，true為顯示元素，false為隱藏元素 -
此語法可等價為:
1
2
3
4
5if ( display === true ) {
$( "selector" ).show();
} else if ( display === false ) {
$( "selector" ).hide();
}
-
📌 jQuery Event
.on()
-
語法:
1
2$( "selector" ).on("events", "childSelector", "data", handler function)
$( "選擇器" ).css("事件名稱", "子元素", "傳遞到函數的額外數據", 事件觸發後的處理函式 ).on()是用來將元素添加事件處理(event handler function) -
常用事件:
-
click事件1
2
3<!-- index.html -->
<h1 class="title">My name is Amy</h1>
<button class="btn">click</button>1
2
3
4
5
6// index.js
$( document ).ready(function() {
$( ".btn" ).on("click" , function () {
$( ".title" ).css("color", "pink")
});
}); -
submit事件1
2
3
4$( "form" ).on( "submit", function( event ) {
// 取消表單的預設動作
event.preventDefault();
});
-
💁♀️ .click() vs. .on()
對於直接將元素用 .click() 的寫法只能針對本來就有的 HTML 元素做綁定和操作，但是如果利用 jQuery 額外動態添加的 HTML 元素就無法做綁定與對元素做任何操作。
而 .on() 最大的特色就是動態事件的綁定處理，他可以成功的綁定和操作動態生成的 HTML 元素!
📌 Class 屬性
.toggleClass()
.addClass() & .removeClass()
.hasClass()
📌 操作 DOM 元素
$(this)
-
this使用的語法:1
jQuery(element)
這個函數允許我們通過使用以其他方式找到的 DOM 元素 (例如:
this) 來創建 jQuery 物件 -
$(this)是用來指定某個 DOM 元素，this為被指定的 HTML DOM 元素，再利用語法$()在 HTML document 中查找並包裝這個 DOM 元素為 jQuery 物件後，才可以在這個指定元素使用 jQuery 的方法
find(), parent() & siblings()
find(): 找到子層所有符合的元素parent(): 找到上一層的父元素siblings(): 找到同一層級的元素
.html() & .text()
-
.html(): 可用來在某元素內設置 HTML 元素內容，而元素內本來的 HTML 元素內容會被將設置的 HTML 元素內容取代-
語法:
1
$( "selector" ).html( "htmlString" )
-
-
.text(): 可用來在某元素內設置文字內容，而元素內本來的文字內容會被將設置的文字內容取代-
語法:
1
$( "selector" ).text( "text" )
-