owned this note
owned this note
Published
Linked with GitHub
# JS幼幼班 - jQuery篇
---
tags: Javascript relate
---
###### tags: `Javascript, jQuery`
# jQuery 簡介
## 01為何還要繼續使用jQuery呢?
1.台灣還是有高市佔率
2.支援套件仍然是最多
3.從jQuery了解JS在瀏覽器能做些什麼
* DOM操作
* 事件觸發 (滑鼠點擊、鍵盤點擊)
* 表單送出
### JQuery就是把JS的內容"擷取"其精華，讓JS變得更具體更好操作
jQuery的寫法
JS的寫法
很明顯可以比較出jQuery的寫法是比較精簡好讀的
## 02 如何使用 jQuery 並實現第一個範例
步驟一到官網下載檔案
[jQuery官網](https://jquery.com/)
步驟二創建資料夾並把剛剛下載的檔案以及要使用jQuery的檔案擺在一起
步驟三在head內引入link(跟引入CSS很像)
```javascript=
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.js"></script>
</head>
```
步驟四撰寫小範例:
點擊按鈕修改顏色
* `$()`選擇器
* `.click` 點擊事件
* `.css` 修改CSS
```javascript=
<body>
<h1 id="hello world">hello world</h1>
<button id="btnred">red</button>
<button id="btnblue">blue</button>
<script>
$("#btnred").click(function () {
$("#btnred").css('color', 'red');
})
$("#btnblue").click(function () {
$("#btnblue").css('color', 'blue');
})
</script>
</body>
```
## 03 jQuery 到底在做些什麼 ?
JS可以在瀏覽器做的事情以及讓它更精簡且易讀
* 當 按下按鈕 => 跳出視窗
* 當 送出表單 => 跳轉頁面
* 當 上傳檔案 => 通知完成
## 04 jQuery 的三大重點
### 1. 選擇器:
`$()`
選取要觸發的元素
例如: `$("body")` 選取整個`<body>`
### 2. 事件觸發:
決定那些事件可以觸發callback函式
例如: `.click` 點擊觸發事件
### 3. callback函式:
事件觸發後會執行甚麼動作
* 顯示、隱藏元素
* 改變CSS效果
* DOM操作
而上面的小範例就是點擊後執行修改按鈕顏色
# 第一章 選擇器
## id選擇器
```javascript=
<body>
<h1 id="hello world">hello world</h1>
<button id="btnred">red</button>
<button id="btnblue">blue</button>
<script>
$("#btnred").click(function () {
$("#btnred").css('color', 'red');
})
$("#btnblue").click(function () {
$("#btnblue").css('color', 'blue');
})
</script>
</body>
```
一樣以上面的範例舉例:
`$("#btnred")` - 抓取要操作的id加上#並用雙引號包起來就完成瞜!
## class 選擇器
跟id抓法不同會抓取一樣class的全部內容
`$(".btnred")` - 抓取要操作的class加上(.)並用雙引號包起來就完成瞜!
### 元素選擇器
一樣會選取全部的該名稱的元素
直接輸入名稱就可以抓取他們瞜
`$("p")`抓去段落`<p>`
# 第二章 事件
## 01 滑鼠事件，點擊(click) 與連續兩次點擊(dblclick)
我繼續沿用上面的範例做操作
* 點擊一次改變紅色按鈕(click)
* 點擊兩次改變藍色按鈕(dblclick)
```javascript=
<script>
$("#btnred").click(function () {
$("#btnred").css('color', 'red');
})
$("#btnblue").dblclick(function () {
$("#btnblue").css('color', 'blue');
})
</script>
```
印出結果:
## 02 滑鼠事件，移入(mouseenter)與移出(mouseout)
* 當滑鼠移入目標觸發事件
* 當滑鼠移出目標觸發事件
```javascript=
<script>
$("#btnred").mouseenter(function () {
$("#btnred").css('color', 'red');
})
$("#btnblue").mouseout(function () {
$("#btnblue").css('color', 'blue');
})
</script>
```
* red是進入觸發顏色
* blue是出去觸發顏色
## 03 滑鼠的hover 事件
當取得焦點時觸發事件
```javascript=
<script>
$("#btnred").hover(function () {
$("#btnred").css('color', 'red');
})
$("#btnblue").hover(function () {
$("#btnblue").css('color', 'blue');
})
</script>
```
當取得焦點時觸發事件
## 04 如果遇到沒看過的滑鼠事件該怎麼辦?
[閱讀官方文件](https://api.jquery.com/)
[w3cschool](https://www.w3schools.com/jquery/)
## 05 遇到jQuery 文件中不懂得地方該怎麼辦 ?
知道大方向在處理什麼內容
並從文件中去搜尋
## 06 on('click', ..) 與 click()是等價的
click事件其實是個縮寫:
後面的handler是callback函式
`.on("click", handler)`
其實跟原生的JS的寫法很像
```javascript=
clickHandler(){
console.log(123)
}
addEventListener('click', clickHandler)
```
## 07 我們怎麼知道DOM 是否已經就緒 ? 使用 ready()
ready()這個方法提供了我們一個方式讓我們去跑JS並且在網頁的DOM載入完全的情況下去操作
下列方法都是等價的
```
* $( handler )
* $( document ).ready( handler )
* $( "document" ).ready( handler )
* $( "img" ).ready( handler )
* $().ready( handler )
```
## 08 如何在 vscode 中快速產生 ready() code snippet
尋找這個套件
使用jq前墜去尋找就可以找到搂!
# 第三章 選擇器的進階
## 選擇器的進階 Traversal 鄰居、爸爸與小孩 - 鄰居篇
使用`.siblings()`印出id:1以外其他同一層的鄰居
```javascript=
<body>
<h1 id="hello world">hello world</h1>
<p id="1">1</p>
<p id="2">2</p>
<p id="3">3</p>
<script>
$('#1').siblings().css('color','red');
</script>
```
讓其他同一層的鄰居呈現紅色
h1以及p都在同一階層
### 搭配使用
使用`first()`去找到鄰居的第一個也就是h1
```javascript=
<script>
$("#1").siblings().first().css("color", "red");
</script>
```
印出結果
也可以搭配[]中括號使用index抓取內容去操作
不過要注意整段sinbings加上中括號的部分需要再用選擇器包裹住一次才有辦法使用
```javascript=
<script>
$($("#1").siblings()[2]).first().css("color", "red");
</script>
```
印出index為2的物件呈現紅色
## 選擇器的進階 Traversal 鄰居、爸爸與小孩 - 父母篇
尋找元素本身的上一層就是找父母的意思
使用`parent()`這個方法
```javascript=
<body>
<div>
<p id="1">1</p>
</div>
<div>
<p id="2">2</p>
</div>
<div>
<p id="3">3</p>
</div>
<script>
$("#1").parent().css("background-color", "red");
</script>
</body>
```
尋找段落p的parent也就是它外層的div並讓他上紅色
### 搭配使用
一樣可以使用`siblings()`去尋找父母的鄰居
```javascript=
<script>
$("#1").parent().siblings().css("background-color", "red");
</script>
```
會得到這個結果
## 選擇器的進階 Traversal 鄰居、爸爸與小孩 - 小孩篇
去尋找子層的元素做操作
```javascript=
<body>
<div>
<p id="1">
<l1>1</l1>
<l1>1</l1>
<l1>1</l1>
</p>
</div>
<div>
<p id="2">2</p>
</div>
<div>
<p id="3">3</p>
</div>
<script>
$("#1").children().css("background-color", "red");
</script>
</body>
```
這三個li就是id:1元素的子層
印出結果
### 搭配使用
使用`.last()`抓取子層的最後一個元素做操作
```javascript=
<script>
$("#1").children().last().css("background-color", "red");
</script>
```
抓取最後一個元素做操作
印出結果
## chain method
如果要操作的元素外面有很多層也可以把`children()`疊很多層做操作
```javascript=
<body>
<div id="divgrand">
<div id="divparent">
<p id="1">
<l1>1</l1>
<l1>2</l1>
<l1>3</l1>
</p>
</div>
</div>
<div>
<p id="2">2</p>
</div>
<div>
<p id="3">3</p>
</div>
<script>
$("#divgrand")
.children()
.children()
.children()
.last()
.css("background-color", "red");
</script>
</body>
```
找了三層進去並且使用last()設定最後一個元素
印出結果
## parant(), parants(), parentsUntil()的差異
比較上面三者的不同
```javascript=
<body>
<div id="divgrand">
<div id="divparent">
<p id="1">
<l1>1</l1>
<l1>2</l1>
<l1>3</l1>
</p>
</div>
</div>
<div>
<p id="2">2</p>
</div>
<div>
<p id="3">3</p>
</div>
<script>
$("#1").parent().css("border", " 5px solid red");
</script>
</body>
```
### `parant()`
只取其上層一個parent
也就是外面的這層divparent
### `parants()`
取全部的parent
### `parentsUntil()`
取到哪個parent為止
```javascript=
<script>
$("#1").parentsUntil("#divgrand").css("border", " 5px solid red");
</script>
```
取到parent - divgrand 為止所以只會給他的上一層divparent上外框
印出結果
## Traversal : Traversing 中的 first(), last(), find()
### `first()`
使用`first()`去找到鄰居的第一個也就是h1
```javascript=
<script>
$("#1").siblings().first().css("color", "red");
</script>
```
印出結果
### `last()`
使用`.last()`抓取子層的最後一個元素做操作
```javascript=
<script>
$("#1").children().last().css("background-color", "red");
</script>
```
抓取最後一個元素做操作
印出結果
### `find()`
尋找特定id底下的元素(任何都可以div, p, li 等等)
```javascript=
<body>
<div id="divgrand">
<div id="divparent">
<p id="1">
<l1>1</l1>
<l1>2</l1>
<l1>3</l1>
</p>
</div>
</div>
<div>
<p id="2">2</p>
</div>
<div>
<p id="3">3</p>
</div>
<script>
$("#divgrand").find("p").css("border", " 5px solid red");
</script>
</body>
```
尋找divgrand底下的p段落並且全部加上邊框
印出結果
## Traversal 中的 eq(), filter() 與 not()
### eq()
可以選取指定的位置的元素
注意:ndex得部分不一定從0開始 是可以自訂成從1或是從0開始
```javascript=
<body>
<div id="divgrand">
<div id="divparent">
<p id="1" class="1">
<l1>1</l1>
<l1>2</l1>
<l1>3</l1>
</p>
</div>
</div>
<div>
<p id="1" class="1">
<l1>a</l1>
<l1>b</l1>
<l1>c</l1>
</p>
</div>
<div>
<p id="1" class="1">
<l1>A</l1>
<l1>B</l1>
<l1>C</l1>
</p>
</div>
<script>
$(".1").eq("2").css("border", "5px solid red");
</script>
</body>
```
選取index2 為ABC
### filter()
可以篩選內容
```javascript=
<body>
<div id="divgrand">
<div id="divparent">
<p id="1" class="1">
<l1>1</l1>
<l1>2</l1>
<l1>3</l1>
</p>
</div>
</div>
<div>
<p id="1" class="1">
<l1>a</l1>
<l1>b</l1>
<l1>c</l1>
</p>
</div>
<div>
<p id="1" class="1">
<l1>A</l1>
<l1>B</l1>
<l1>C</l1>
</p>
</div>
<span class="1">span</span>
<script>
$("span").filter(".1").css("border", "5px solid red");
</script>
</body>
```
使用filter篩選span裡面有id = 1元素加上紅框框就不會抓到div去搂!
### not()
篩選"不是的"內容做操作
```javascript=
<body>
<div id="divgrand">
<div id="divparent">
<p id="1" class="1">
<l1>1</l1>
<l1>2</l1>
<l1>3</l1>
</p>
</div>
</div>
<div>
<p id="1" class="2">
<l1>a</l1>
<l1>b</l1>
<l1>c</l1>
</p>
</div>
<div>
<p id="1" class="1">
<l1>A</l1>
<l1>B</l1>
<l1>C</l1>
</p>
</div>
<span class="2">span</span>
<script>
$("p").not(".1").css("border", "5px solid red");
</script>
</body>
```
這邊我做篩選段落中的P不是class = 1的會產紅框框
由上面可以理解小寫的abc不符合所以上色
# 第四章：快速理解 jQuery API (一) 特效類
## 顯示或隱藏元素 hide() 與 show()
這邊我設置點擊事件作範例
```javascript=
<body>
<button id="show">show</button>
<button id="hide">hide</button>
<div>div</div>
<div>div</div>
<script>
$("#hide").click(function () {
$("div").hide();
});
$("#show").click(function () {
$("div").show();
});
</script>
</body>
```
show,hide的效果
## 淡入與淡出 fadeIn() fadeOut()
這邊我設置個持續一秒效果如下:
```javascript=
<script>
$("#hide").click(function () {
$("div").fadeOut(1000);
});
$("#show").click(function () {
$("div").fadeIn(1000);
});
</script>
```
## 特效類 animate() 實現簡單動畫
一般不會這樣使用，會放到CSS裡面操作
不過使用起來長這樣:
* 設定了變長
* 設定了透明
```javascript=
<script>
$("#hide").click(function () {
$("div").animate({ opacity: 0.3 });
});
$("#show").click(function () {
$("div").animate({ width: "400px" });
});
</script>
```
## jQuery 中的 Callback 回調(函式)
當事件觸發後執行的函式就是回調函式
這裡的animate就是一種:
```javascript=
<script>
$("#hide").click(function () {
$("div").animate({ opacity: 0.3 });
});
$("#show").click(function () {
$("div").animate({ width: "400px" });
});
</script>
```
# 第五章：快速理解 jQuery API (二) 「取得」與「覆寫」值
## text()取得元素標籤中的文字 / 修改文字也可以的
`text()`不加內容的用法可以取得選取元素的文字內容
在這邊同時利用alert彈出選取元素的文字內容
```javascript=
<button class="btnone">getstr</button>
<button class="btntwo">getsecstr</button>
<p class="1">123</p>
<p class="2">123</p>
<p class="3">123</p>
<script>
$(".btnone").click(function () {
var str = $(".1").text();
alert(str);
});
</script>
```
點擊getstr後跳出class = 1 那段落的文字內容
### 並且可以針對選取的class去選擇first, last
抓取元素第一個最後一個等等
```javascript=
<body>
<button class="btnone">getstr</button>
<button class="btntwo">getsecstr</button>
<p class="1">123456</p>
<p class="2">123</p>
<p class="3">123</p>
<script>
$(".btnone").click(function () {
var str = $("p:first").text();
alert(str);
});
$("#show").click(function () {});
</script>
</body>
```
點擊getstr的印出結果
### 針對抓取的元素可以做指定
這樣選取就可以針對修飾段落p中的class = 3的部分
```javascript=
<body>
<button class="btnone">getstr</button>
<button class="btntwo">getsecstr</button>
<p class="1">123456</p>
<p class="2">123</p>
<p class="3">12348</p>
<script>
$(".btnone").click(function () {
var str = $("p.3").text();
alert(str);
});
$("#show").click(function () {});
</script>
</body>
```
點擊getstr的印出結果
### text()，把值放進去設定會修改文字內容
如果在text()內部填入值的話會修改文字內容
```javascript=
<body>
<button class="btnone">getstr</button>
<button class="btntwo">getsecstr</button>
<p class="1">123456</p>
<p class="2">123</p>
<p class="3">12348</p>
<script>
$(".btnone").click(function () {
$("p.3").text("hello world");
});
</script>
</body>
```
在這邊操作的話會是點擊後改變文字內容成()內部的文字
## html() 取得或是修改DOM
### html()內不填入值
取得html內部的值:
html()內不填入值，一樣會取得元素的值
```javascript=
<body>
<button class="btnone">change</button>
<button class="btntwo">reverse</button>
<p class="1">I will change</p>
<div></div>
<script>
$(".btnone").click(function () {
var str = $(".1").html();
alert(str);
});
</script>
</body>
```
按下change後顯示這個段落p內部的值
取得html tag:
html()內不填入值，但是抓取parent的話會直接印出children的html tag+內容
```javascript=
<body>
<button class="btnone">change</button>
<button class="btntwo">reverse</button>
<div>
<p id="1">I will change</p>
</div>
<script>
$(".btnone").click(function () {
var str = $("div").html();
alert(str);
});
</script>
</body>
```
點擊change後印出結果會包含子層的html tag+內容
### html()內部填入值
會取代掉原本的內容
```javascript=
<body>
<button class="btnone">change</button>
<button class="btntwo">reverse</button>
<div></div>
<p id="1">I will change</p>
<script>
$(".btnone").click(function () {
$(".btntwo").html("<p>hello world</p>");
});
</script>
</body>
```
點下change後reverse會轉變成hello world
#### 比較奇怪的情況是
如果把內容換成div就不會被取代而是增加一個children進去如下圖
```javascript=
<script>
$(".btnone").click(function () {
$("div").html("<p>hello world</p>");
});
</script>
```
點擊change後hello world加入div內部
## attr() 取得或改變元素的屬性
### 取得元素的屬性
取得href,alt的值
```javascript=
<body>
<button id="btn1">getHREF</button>
<button id="btn2">getImagealt</button>
<p><a href="http://123123123.com">123123123</a></p>
<img src="123.jpg" alt="cloudy sky" />
<script>
$("#btn1").click(function () {
var str = $("a").attr("href");
alert(str);
});
$("#btn2").click(function () {
var str = $("img").attr("alt");
alert(str);
});
</script>
</body>
```
點擊getHREF
點擊getimagealt
### 複寫值
#### 複寫單一屬性
`attr("要被複寫的屬性名稱", "改寫的內容")`
```javascript=
<body>
<button id="btn1">getHREF</button>
<button id="btn2">getImagealt</button>
<p><a href="http://123123123.com">123123123</a></p>
<img src="123.jpg" alt="cloudy sky" />
<script>
$("#btn2").click(function () {
$("img").attr("alt", "123");
});
</script>
</body>
```
#### 一次複寫多種屬性需要加入中括號並且要修改的屬性鍵值配對
ex.(title: "jQuery")
```javascript=
<body>
<button id="btn1">getHREF</button>
<button id="btn2">getImagealt</button>
<p><a href="http://123123123.com">123123123</a></p>
<img src="123.jpg" alt="cloudy sky" />
<script>
$("#btn2").click(function () {
var str = $("img").attr({
title: "jQuery",
alt: "jQuery Logo",
});
alert(str);
});
</script>
```
image就會被複寫新的值進去(修改alt以及增加title進去)
## val() 取得或修改 form 表單的值
### val()取得值
針對輸入在#name, #comment, #city這三個區域的值並且使用alert把它們抓出來
```javascript=
<body>
<label for="">姓名</label>
<input type="text" id="name" /><br />
<label for="">comments</label>
<input type="text" id="comment" /><br />
<label>city</label>
<select id="city">
<option value="JP">JP</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<br />
<button id="getname">getname</button>
<button id="getcomment">getcomment</button>
<button id="getcity">getcity</button>
<script>
$("#getname").click(function () {
var name = $("#name").val();
alert(name);
});
$("#getcomment").click(function () {
var comment = $("#comment").val();
alert(comment);
});
$("#getcity").click(function () {
var city = $("#city").val();
alert(city);
});
</script>
</body>
```
輸出結果:
### val()修改內容
這邊使用$("#getname").text()取得要修改的內容後指派給變數name
在使用val(name)直接更換裡面的內容
```javascript=
<body>
<label for="">國家</label>
<input type="text" id="name" /><br />
<button id="getname">TW</button>
<button id="getcomment">UK</button>
<button id="getcity">USA</button>
<script>
$("#getname").click(function () {
var name = $("#getname").text();
$("#name").val(name);
});
$("#getcomment").click(function () {
var name = $("#getcomment").text();
$("#name").val(name);
});
$("#getcity").click(function () {
var name = $("#getcity").text();
$("#name").val(name);
});
</script>
</body>
```
點擊事件觸發修改value
# 第六章 快速理解 jQuery API (三) DOM 的操作
## append()選取元素內部最後加入內容
在所選取的元素內部的最後方加入內容
可以是純文字或是`<p><div><h1>`
範例處我做`<h1>`示範
```javascript=
<body>
<h1>append</h1>
<div id="div">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
quasi?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In,
voluptatem?
</p>
</div>
<script>
$("#div").append("<div>this is how append work</div>");
</script>
</body>
```
## prepend()選取元素內部最前加入內容
在所選取的元素內部的最前方加入內容
可以是純文字或是`<p><div><h1>`
範例處我做`<h1>`示範
```javascript=
<body>
<h1>prepend</h1>
<div id="div">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
quasi?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In,
voluptatem?
</p>
</div>
<script>
$("#div").prepend("<h1>this is how prepend work</h1>");
</script>
</body>
```
## before() 選取元素同一層最前加入內容
在所選取的元素同一層(sibling)的前方加入內容
可以在圖中觀察到我加進去的h1跟我選取的div是sibling也就是它們是同一層的最前方
```javascript=
<body>
<h1>before</h1>
<div id="div">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
quasi?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In,
voluptatem?
</p>
</div>
<script>
$("#div").before("<h1>this is how before work</h1>");
</script>
</body>
```
## after()選取元素同一層最後加入內容
在所選取的元素同一層(sibling)的後方加入內容
可以在圖中觀察到我加進去的h1跟我選取的div是sibling也就是它們是同一層的後方
```javascript=
<body>
<h1>after</h1>
<div id="div">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
quasi?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In,
voluptatem?
</p>
</div>
<script>
$("#div").after("<h1>this is how after work</h1>");
</script>
</body>
```
## empty()清空內容(留下tag)
清空指定元素
像我這邊移除了內容，但是div的部分會繼續存在
```javascript=
<body>
<h1>empety</h1>
<div id="div">
<p>Lorem ipsum dolor sit amet consec</p>
<p></p>
</div>
<button id="btn">empty</button>
<script>
$("#btn").click(function () {
$("#div").empty();
});
</script>
</body>
```
## remove() 移除元素(移除tag)
移除指定元素
像我這邊移除了div，他會div連同內容全部移除
```javascript=
<body>
<h1>after</h1>
<div id="div">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur,
quasi?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. In,
voluptatem?
</p>
</div>
<button id="btn">remove</button>
<script>
$("#btn").click(function () {
$("#div").remove();
});
</script>
</body>
```
## remoteAttr() 刪除元素的屬性
刪除元素的屬性
```javascript=
<body>
<h1>removeAttr</h1>
<div id="div">
<a id="a" href="http://123123.com"></a>
</div>
<button id="btn">removeAttr</button>
<script>
$("#btn").click(function () {
$("#a").removeAttr("href");
});
</script>
</body>
```
## wrap() 可以保裹住元素
影片範例中使用了div以及 b,em等tag去包裹元素
但是可以使用append相關的API就好這個比較不常使用
Google Drive
Gist
Clipboard
Sign in with Wallet
