###### tags: `學習` `jQuery`
# jQuery影音課程筆記
## jQuery版本差別
1.x：相容ie678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
2.x：不相容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不相容ie678，只支援最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery外掛不支援這個版本。目前該版本是官方主要更新維護的版本。
## 如何使用
1.[官網下載](https://jquery.com/)jQuery
2.將下載的jQuery的核心路徑寫入HTML的head裡面
```htmlembedded=
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="相對路徑"></script>
</head>
```
3.新增一個js檔案
```javascript=
$(document).ready(function () {
$('.title').hide();
});
```
所有的jQuery都需要上面的範例內跑，$(.title).hide();表示class為title隱藏，會在html寫入style="display:none;"
## 選擇器
1.其實與CSS的選擇器是一樣的，先選擇標籤在選擇樣式/動作
```htmlembedded=
<div class="header">
<div class="title">
<h1>123</1h>
</div>
</div>
```
```javascript=
$(document).ready(function () {
$('.header h1').hide();
});
```
以上範例就是選擇header內h1隱藏
## 網頁互動範例
### 1.設計一個按鈕，點擊後可以隱藏文字的功能
```htmlembedded=
<h1 class="title">123</h1>
<input type="button" class="switch" value="隱藏">
```
```javascript=
$(document).ready(function(){
$('.switch').click(function(){//選擇class switch在滑鼠點擊時
$('.title').hide(); //會將class title的內容隱藏
});
});
```
[hide範例](https://codepen.io/efzdamnp-the-lessful/pen/BaZQxzZ)
### 2.設計一個按鈕，點擊後可以隱藏與顯示文字的功能-toggle
```htmlembedded=
<h1 class="title">123</h1>
<input type="button" class="switch" value="開關">
```
```javascript=
$(document).ready(function(){
$('.switch').click(function(){//選擇class switch在滑鼠點擊時
$('.title').toggle(); //會將class title的內容隱藏或顯示
});
});
```
[toggle範例](https://codepen.io/efzdamnp-the-lessful/pen/VwWmxMa)
### 3.slideDown、slideUp與slideToggle效果
**注意** slidedown需要display:none;
```htmlembedded=
<input type="button" class="switchDown" value="slide down">
<input type="button" class="switchUp" value="slide up">
<input type="button" class="switch" value="switch">
<div class="massage">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="送出">
</div>
```
```css=
.massage{
display: none;
}
```
```javascript=
$(document).ready(function () {
$(".switchDown").click(function () {
$(".massage").slideDown(500);//500等於0.5秒 slideDown執行的時間
});
$(".switchUp").click(function () {
$(".massage").slideUp(500);
});
$(".switch").click(function () {
$(".massage").slideToggle(500);
});
});
```
[slideDown與slideUp範例](https://codepen.io/efzdamnp-the-lessful/pen/ExXNLOa)
### 4.fadeIn、fadeOut與fadeToggle效果
**注意** fadeIn需要display:none;
```htmlembedded=
<input type="button" class="switchIn" value="fade In">
<input type="button" class="switchOut" value="fade Out">
<input type="button" class="switch" value="switch">
<div class="massage">
<textarea name="" id="" cols="30" rows="10">
</textarea><input type="submit" value="送出">
</div>
```
```css=
.massage{
display: none;
}
```
```javascript=
$(document).ready(function () {
$(".switchIn").click(function () {
$(".massage").fadeIn(500);
});
$(".switchOut").click(function () {
$(".massage").fadeOut(500);
});
$(".switch").click(function () {
$(".massage").fadeToggle(500);
});
});
```
[fadeIn與fadeOut範例](https://codepen.io/efzdamnp-the-lessful/pen/bGRBmwO)
### 5.toggleClass客製化動畫效果
```htmlembedded=
<input type="button" class="switch" value="switch">
<input type="button" class="switch2" value="switch2">
<div class="massage ">
<textarea name="" id="" cols="30" rows="10">
</textarea><input type="submit" value="送出">
</div>
<div class="massage2">
<textarea name="" id="" cols="30" rows="10">
</textarea><input type="submit" value="送出">
</div>
```
```css=
.massage{
display: none;
}
.massage.active{
display: block;
}
.massage2{
opacity: 0; //使用透明度做到漸入漸出的效果
transition:all 0.5s;//變化透明度的時間 all表示所有元素 0.5s 表示0.5秒
}
.massage2.active{
opacity: 1;
transition:all 0.5s;
}
```
```javascript=
$(document).ready(function () {
$(".switch").click(function () {
$(".massage").toggleClass("active");//toggleClass會在massage沒有active的時加入，
//active在有active時移除active
//addClass("active");
//removeClass("active");
});
$(".switch2").click(function () {
$(".massage2").toggleClass("active");
});
});
```
[toggleClass範例](https://codepen.io/efzdamnp-the-lessful/pen/mdwOzpj)
[toggleClass範例2](https://codepen.io/efzdamnp-the-lessful/pen/GRWzNpL)
### 6.jQuery鏈式寫法
所謂的鏈式寫法的效果就是會連續執行寫入的jQuery動作
以下設計為點擊按鈕之後textarea會淡出後淡入
```htmlembedded=
<input type="button" class="switch" value="switch">
<div class="massage">
<textarea name="" id="" cols="30" rows="10"></textarea><input type="submit" value="送出">
</div>
```
```css=
.massage{
display: none;
}
```
```javascript=
$(document).ready(function () {
$(".switch").click(function () {
$(".massage").fadeIn(1000).fadeOut(1000);//直接將jQery效果已.做連結寫在第一個效果之後，可以不斷串接
});
});
```
[jQuery鏈式寫法](https://codepen.io/efzdamnp-the-lessful/pen/gORLZeR)
## css搭配jQuery做出其他的動畫效果
### 1.preventDefault
preventDefault就是阻止預設的事件發生
以下範例使用a連結當作按鈕觸發fadeToggle
```htmlembedded=
<a href="https://www.google.com.tw/" class="btn">linker</a>//一個a連結往google
<div class="box"></div>
```
```css=
.box{
width: 100px;
height: 100px;
background: #000;
display: none;
}
```
```javascript=
$(document).ready(function(){
$('.btn').click(function(event){
event.preventDefault();//使用preventDefault阻止a連結預設功能
$('.box').fadeToggle();
});
});
```
[preventDefault範例](https://codepen.io/efzdamnp-the-lessful/pen/LYLxjEv)
### 2.使用.css動態載入css樣式
以下程式碼為使用.css動態載入css樣式範例
範例分別載入box與box2的新樣式
```htmlembedded=
<div class="box"></div>
<div class="box2"></div>
```
以下css為box、box2原本樣式
```css=
.box{
width: 200px;
height: 200px;
background: orange;
}
.box2{
width: 100px;
height: 200px;
background: #000;
}
```
動態載入樣式
```javascript=
$(document).ready(function () {
$(".box").css("width", "500px").css("background", "green");
//使用鏈式寫法增加載入的樣式
$(".box2").css({ //使用{property:value, property:value, ...}載入多個樣式
"width": "50px",//注意property與value都要使用""或''，每組property:value要用,區隔
"height": "60px",
"margin-top": "30px"
});
});
```
[jQuery-.css語法動態載入css樣式](https://codepen.io/efzdamnp-the-lessful/pen/zYzNdJQ)
[jQuery-.css語法參考資料](https://www.w3school.com.cn/jquery/css_css.asp)
### 3.使用jQuery製作設計下拉式收闔選單
目標：
1.點擊時slide出清單
2.被點擊區塊維持hover時的樣式
以下為範例的程式碼
```htmlembedded=
<ul class="nav">
<li><a href="#">首頁</a></li>
<li>
<a class="dropDown" href="#">產品頁面</a>
<ul class="list">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</li>
<li><a href="#">產品手冊</a></li>
<li><a class="dropDown2" href="#">訂購資訊</a>
<ul class="list2">
<li><a href="#">訂單查詢</a></li>
<li><a href="#">退貨申請</a></li>
<li><a href="#">出貨進度</a></li>
</ul>
</li>
<li><a href="#">聯絡我們</a></li>
</ul>
```
**注意事項**
1.dropDown要寫在a的class內，如果寫在li的class內，則不會有任何的動作，原因是使用.on()取代.click()其中on()有參數是childSelector，所以dropDown為childSelector需要是li的子層才會有作用。
2.dropDown2要寫在a的class內，如果寫在li的class內，會在點擊下拉的清單，清單會閉合而且清單內的a連結也會失效，原因是要看html的結構，點了裡面的li也是點了外面的li，因為外面的li包住裡面的li如果要把dropDown2寫在裡面的話則需要加入event.stopPropagation();請看底下JS有說明。
```css=
a{
text-align: center;
width: 200px;
text-decoration: none;
border: 1px solid #fff;
color: orange;
display: block;
padding: 10px;
background: #000;
}
a:hover,.dropDown.active,.dropDown2.active{//hover與點擊後的樣式
color: #fff;
background: orange;
}
li{
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.nav{
display: flex;
justify-content: center;
align-items: center;
background: #000;
padding: 20px 0;
}
.list,.list2{
display: none;
position: absolute;//使用position固定dropDown出現的位置
top: 100%;
}
```
```javascript=
$(document).ready(function(){
$('li').on('click','.dropDown',function(event){//這裡改用.on('click',function(){});取代.click
event.preventDefault();
$('.dropDown').toggleClass('active')
$('.list').slideToggle(500);
});
$('.dropDown2').click(function(event){
event.preventDefault();
$('.dropDown2').toggleClass('active')
$('.list2').slideToggle(500);
//event.stopPropagation();如果dropDown2這個class寫在li則需要加入這一行
});
})
});
```
[jQuery-dropDown範例](https://codepen.io/efzdamnp-the-lessful/pen/qBjrOap?editors=1111)
[.on()參考資料](http://skaih.logdown.com/posts/712464-jquery-click-on-the-where-different)
[DOM 的事件傳遞機制：捕獲與冒泡](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/)
### 4.jQuery-.delay()的使用
1.可以讓動畫效果延遲出現.delay(延遲時間毫秒)
下面為範例
```htmlembedded=
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<button class="btn" value="On">On</button>
```
```css=
*{
width: 50px;
height: 50px;
margin-top: 20px;
}
.box1{
background: #000;
}
.box2{
background: red;
}
.box3{
background: green;
}
.box4{
background: blue;
}
.box5{
background: orange;
}
.box-style{
background: pink;
}
.box-style1{
background: yellow;
}
.box1,.box2,.box3,.box4,.box5{
display: none;
}
```
```javascript=
$(document).ready(function () {
$(".btn").click(function () {
$(".box1").delay(300).fadeIn();
$(".box2").delay(600).fadeIn();
$(".box3").delay(900).slideDown();
$(".box4").delay(1200).slideDown();
$(".box5").delay(1500).show(0);
$(".box1")
.delay(1800)
.queue(function () {
$(".box1").addClass("box-style").fadeOut().dequeue()
//這裡如果沒有.dequeue的話fadeOut沒會效果，但不會影響下面程式的運行。
});
$(".box2")
.delay(2100)
.queue(function () {
$(".box2").addClass("box-style1").dequeue()
});
});
});
```
**注意** .show()在使用.delay()記得要加入時間參數.show(0)否則show會直接出現
如果delay()想要在動畫以外的地方用到則需要搭配.queue(function{});或是用setTimeout()取代delay()
可以在queue內放入要執行的動作例如addClass()、remove()，在動作結束後加入dequeue代表程式可以跑下一個功能。
[jQuery-.delay()範例](https://codepen.io/efzdamnp-the-lessful/pen/OJgpWOe)
### 5.jQuery-控制文字大小
目的:
1.製作按鈕可以控制文字大小
2.點擊按鈕之後維持hover時的樣式
```htmlembedded=
<div class="container">
<h2>文字大小</h2>
<ul>
<li><a class="text-b" href="#">大</a></li>
<li><a class="text-m" href="#">中</a></li>
<li><a class="text-s" href="#">小</a></li>
</ul>
<p class="text-size">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, nemo illum architecto doloribus, ex libero sed ullam atque dignissimos eligendi qui saepe ea quod laborum totam hic sequi facilis debitis!
Nihil, rem provident? Ipsam facilis vitae ullam magni accusantium? Aliquam esse dolores suscipit laudantium recusandae sequi. Ea, esse. Eveniet ut pariatur sapiente corrupti obcaecati aut eius facere at laborum inventore?
Reprehenderit nesciunt nisi delectus quo architecto aperiam eius, deleniti voluptas cupiditate nostrum. Officiis aut atque magnam obcaecati non, tenetur consequatur reiciendis maiores perspiciatis tempora quibusdam earum facilis, autem quos neque?
Repellat ratione, eveniet officiis ipsa autem enim laboriosam dignissimos atque vel, consequuntur perspiciatis veritatis qui eum dolorem ipsam, voluptatem porro odio vitae velit tenetur? Beatae maxime ut vero aperiam dolorum?
Corporis, doloremque veniam. Saepe placeat numquam dolorem? Magnam enim possimus aperiam provident repudiandae amet dignissimos modi asperiores ullam necessitatibus iure similique rem, minus totam aliquam. Autem ea ex impedit numquam?
</p>
</div>
<!--固定在左下角的card-->
<div class="card">
<a href="" class="btn-close">關閉</a>
<div class="card-body">
<div class="card-text">
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
```
```css=
.container{
width: 500px;
margin: 0 auto;
}
ul{
margin-top: 20px;
display: flex;
gap:20px;
padding: 10px;
background: orange;
}
a{
text-decoration: none;
border: 1px solid #000;
color: #000;
font-size: 20px;
display: block;
&:hover,&.active{
color: #fff;
border: 1px solid #fff;
}
}
```
```javascript=
$(document).ready(function () {
$(".text-b").click(function (event) {
event.preventDefault();
$(".text-b").css({ color: "#fff", border: "1px solid #fff" });
$(".text-m").css({ color: "#000", border: "1px solid #000" });
$(".text-s").css({ color: "#000", border: "1px solid #000" });
$(".text-size").css({ "font-size": "36px", "line-height": "1.5" });
});
$(".text-m").click(function (event) {
event.preventDefault();
$(".text-b").css({ color: "#000", border: "1px solid #000" });
$(".text-m").css({ color: "#fff", border: "1px solid #fff" });
$(".text-s").css({ color: "#000", border: "1px solid #000" });
$(".text-size").css({ "font-size": "24px", "line-height": "1.3" });
});
$(".text-s").click(function (event) {
event.preventDefault();
$(".text-b").css({ color: "#000", border: "1px solid #000" });
$(".text-m").css({ color: "#000", border: "1px solid #000" });
$(".text-s").css({ color: "#fff", border: "1px solid #fff" });
$(".text-size").css({ "font-size": "18px", "line-height": "1.2" });
});
});
```
使用.css()直接把樣式寫入，直接調整文字大小與按鈕樣式，考慮到使用者切換不同文字大小時，會直接點擊按鈕，所以按鈕不只是控制文字大小，還必須加入控制其他按鈕的樣式。
[jQuery-控制文字大小範例](https://codepen.io/efzdamnp-the-lessful/pen/mdwWGyN?editors=1010)
### 6.jQuery-Fixede固定網頁內容
目的：製作一個可以被關閉，且固定在螢幕視窗左下角的card
```htmlembedded=
<div class="container">
<h2>文字大小</h2>
<ul>
<li><a class="text-b" href="#">大</a></li>
<li><a class="text-m" href="#">中</a></li>
<li><a class="text-s" href="#">小</a></li>
</ul>
<p class="text-size">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, nemo illum architecto doloribus, ex libero sed ullam atque dignissimos eligendi qui saepe ea quod laborum totam hic sequi facilis debitis!
Nihil, rem provident? Ipsam facilis vitae ullam magni accusantium? Aliquam esse dolores suscipit laudantium recusandae sequi. Ea, esse. Eveniet ut pariatur sapiente corrupti obcaecati aut eius facere at laborum inventore?
Reprehenderit nesciunt nisi delectus quo architecto aperiam eius, deleniti voluptas cupiditate nostrum. Officiis aut atque magnam obcaecati non, tenetur consequatur reiciendis maiores perspiciatis tempora quibusdam earum facilis, autem quos neque?
Repellat ratione, eveniet officiis ipsa autem enim laboriosam dignissimos atque vel, consequuntur perspiciatis veritatis qui eum dolorem ipsam, voluptatem porro odio vitae velit tenetur? Beatae maxime ut vero aperiam dolorum?
Corporis, doloremque veniam. Saepe placeat numquam dolorem? Magnam enim possimus aperiam provident repudiandae amet dignissimos modi asperiores ullam necessitatibus iure similique rem, minus totam aliquam. Autem ea ex impedit numquam?
</p>
</div>
<div class="card">
<a href="" class="btn-close">關閉</a>
<div class="card-body">
<div class="card-text">
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
```
```css=
.container{
width: 500px;
margin: 0 auto;
}
ul{
margin-top: 20px;
display: flex;
gap:20px;
padding: 10px;
background: orange;
}
a{
text-decoration: none;
border: 1px solid #000;
color: #000;
font-size: 20px;
display: block;
&:hover,&.active{
color: #fff;
border: 1px solid #fff;
}
}
.card{
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
color: #fff;
position: relative;//固定關閉按鈕
position: fixed;//將畫面固定在左下角
bottom: 0;
left: 0;
background: #000;
.btn-close{
position: absolute;//將關閉按鈕放置在card的右上角
top: 0;
right: 0;
background: red;
&:hover{
background: blue;
border: 1px solid blue;
}
}
}
```
```javascript=
$(document).ready(function () {
//card關閉按鈕
$('.btn-close').click(function(event){
event.preventDefault()
$('.card').slideUp()
});
//文字大小
$(".text-b").click(function (event) {
event.preventDefault();
$(".text-b").css({ color: "#fff", border: "1px solid #fff" });
$(".text-m").css({ color: "#000", border: "1px solid #000" });
$(".text-s").css({ color: "#000", border: "1px solid #000" });
$(".text-size").css({ "font-size": "36px", "line-height": "1.5" });
});
$(".text-m").click(function (event) {
event.preventDefault();
$(".text-b").css({ color: "#000", border: "1px solid #000" });
$(".text-m").css({ color: "#fff", border: "1px solid #fff" });
$(".text-s").css({ color: "#000", border: "1px solid #000" });
$(".text-size").css({ "font-size": "24px", "line-height": "1.3" });
});
$(".text-s").click(function (event) {
event.preventDefault();
$(".text-b").css({ color: "#000", border: "1px solid #000" });
$(".text-m").css({ color: "#000", border: "1px solid #000" });
$(".text-s").css({ color: "#fff", border: "1px solid #fff" });
$(".text-size").css({ "font-size": "18px", "line-height": "1.2" });
});
});
```
[jQuery-Fixede固定網頁內容-範例](https://codepen.io/efzdamnp-the-lessful/pen/zYzZmyv)
### 7.jQuery-.stop()
.stop()可以讓直行到一半的動畫停止後去執行反向的動畫(與toggle搭配時)。
```htmlembedded=
<input type="button" class="switch" value="switch">
<div class="massage">
<textarea name="" id="" cols="30" rows="10"></textarea><input type="submit" value="送出">
</div>
```
```css=
.massage{
display: none;
}
```
```javascript=
$(document).ready(function () {
$(".switch").click(function () {
$(".massage").stop().slideToggle(5000);
});
});
```
[jQuery-.stop()範例](https://codepen.io/efzdamnp-the-lessful/pen/jOwBomv)
### 8.jQuery與套件Animate.css搭配使用
目的：
1.點擊按鈕後，執行動畫
2.再次點擊按鈕，動畫可以在執行
1.先載入套件
載入方法參考[官方網站](https://animate.style/)
```htmlembedded=
<button class="on">on</button>
<div class="box animate__animated"></div>
```
```css=
.box{
width: 500px;
height: 500px;
background: #000;
margin-top: 20px;
}
```
```javascript=
$(document).ready(function () {
$(".on").click(function (event) {
event.preventDefault()
$(".box").addClass("animate__wobble")
$(".box").delay(1000).queue(function(){//延遲1秒後清除動畫的class，這樣能讓同一個按鈕觸發動畫
$(".box").removeClass("animate__wobble")
});
});
});
```
[使用jQuery與套件Animate.css-範例](https://codepen.io/efzdamnp-the-lessful/pen/xxrdpjQ?editors=1111)
## 如何操控網頁元素
### 1.jQuery$(this)
在上述學到的選擇器都是直接選擇class，指定被選擇的class做出動作，那如果在class或是HTML標籤很多又重複的情況，該怎麼辦，這個時候this就派上用場了，
目標：寫出5個box，被點擊的box單獨變色。
以下為範例
```htmlembedded=
<ul>
<li><a href="#" class="btn">1</a></a></li>
<li><a href="#" class="btn">2</a></li>
<li><a href="#" class="btn">3</a></li>
<li><a href="#" class="btn">4</a></li>
<li><a href="#" class="btn">5</a></li>
</ul>
```
可以看到每一個box的html標籤與class是相同的
```css=
a{
display:block;
width: 200px;
height: 200px;
background: #000;
margin-top: 20px;
color: #fff;
text-decoration: none;
font-size: 50px;
text-align: center;
vertical-align: middle;
&.active{
background: orange;
}
}
ul{
list-style:none;
}
```
```javascript=
$('doucment').ready(function(){
$('.btn').click(function(event){
event.preventDefault()
$(this).toggleClass('active')
});
});
```
使用this代表被點擊的那一個box會變色，這樣子就不需要再增加其他的class。
[jQuery-$(this)](https://codepen.io/efzdamnp-the-lessful/pen/YzQQKQw)
### 2.jQuery.parent()
.parent()會放在選擇器後面，用來選取選擇器內標籤的父層
請看以下範例
目的:點選黑色box會使父層背景變色
```htmlembedded=
<ul>
<li><a href="#" class="btn">1</a></a></li>
<li><a href="#" class="btn">2</a></li>
<li><a href="#" class="btn">3</a></li>
<li><a href="#" class="btn">4</a></li>
<li><a href="#" class="btn">5</a></li>
</ul>
```
可以看到每一個box的html標籤與class是相同的
```css=
a{
display:block;
width: 200px;
height: 200px;
background: #000;
margin-top: 20px;
color: #fff;
text-decoration: none;
font-size: 50px;
text-align: center;
vertical-align: middle;
&.active{
background: orange;
}
}
ul{
list-style:none;
&.active{
background: orange;
}
}
```
```javascript=
$("doucment").ready(function () {
$(".click").click(function (event) {
event.preventDefault();
$(this).parent().toggleClass("active");//在選擇器之後加入.parent()選擇class='click'的父層ul
});
});
```
[jQuery.praent()](https://codepen.io/efzdamnp-the-lessful/pen/PojjNrE)
### 3.jQuery.siblings()
siblings()是選擇同個父層下所有的html標籤，即使有不同的class或是沒有class
詳見下方html
目的：製作選單，只有被點選時產生active效果，在點選其他選單時，上一個被點選的選單復原，除了選單7。
```htmlembedded=
<ul>
<li class="btn">選單1</li>
<li class="btn">選單2</li>
<li class="btn">選單3</li>
<li class="btn">選單4</li>
<li class="btn">選單5</li>
<li class="btn2">選單6</li>
<li><a href="#">選單7</a></li>
<a href="#">選單8</a>
<h2>選單9</h2>
<span>選單10</span>
</ul>
```
```css=
.btn,.btn2,h2,span,a{
margin: 20px;
border: 1px solid #000;
width: 200px;
padding: 20px 0;
text-align: center;
&:hover,&.active{
background: #000;
border: 1px solid #fff;
color: #fff;
}
}
```
```javascript=
$('document').ready(function(){
$('.btn').click(function(){
$(this).toggleClass('active').siblings().removeClass('active')
});//jQuery鍊是寫法在toggleClass後選擇siblings()，在這裡.siblings()是同個父層的html標籤
//在這個範例中是li、h2、span
$('.btn2').click(function(){
$(this).toggleClass('active').siblings().removeClass('active')
});
$('h2').click(function(){
$(this).toggleClass('active').siblings().removeClass('active')
});
$('span').click(function(){
$(this).toggleClass('active').siblings().removeClass('active')
});
$('a').click(function(event){
event.preventDefault()
$(this).toggleClass('active').siblings().removeClass('active')
});//因為選單7的a不再li的子層所以不會被siblings()選擇但，選單8為ul的子層所以.siblings()有效果
});
```
在上面的html可以看到ul中有li、h2、span、a(除了選單7的a)在.siblings()都會一起被選擇
[jQuery.sibling()範例](https://codepen.io/efzdamnp-the-lessful/pen/jOwwrVJ)
### 4.jQuery.find()
.find()是用來尋找被選擇標籤(父元素)以下的所有元素(包含子元素、孫元素....)，.find('.class')//.find('a')
目的:使用.find()在點擊card時，讓title有背景，並且在點擊其他card時，原本card內的title背景會還原
```htmlembedded=
<div class="container">
<ul>
<li class="card">
<h2>title1</h2>
<a href="#">product1</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, modi.</p>
</li>
<li class="card">
<h2>title2</h2>
<a href="#">product2</a>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
<h2>title3</h2>
<a href="#">product3</a>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li class="card">
<h2>title4</h2>
<a href="#">product4</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore?</p>
</li>
<li class="card">
<h2>title5</h2>
<a href="#">product5</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti consequuntur aut illum sequi sunt quis tempore odit magnam itaque officia.</p>
</li>
<li class="card">
<h2>title6</h2>
<a href="#">product6</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, libero doloremque inventore est aperiam hic assumenda vitae magni aliquid nihil. Dolorum labore nemo, rem distinctio praesentium recusandae facere consequatur officiis.
</p>
</li>
</ul>
</div>
```
```css=
.container{
width: 600px;
margin: 0 auto;
}
ul{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.card{
padding: 5px;
border: 1px solid #000;
width: 45%;
}
.active{
background: orange;
}
```
```javascript=
$(document).ready(function () {
$(".card").click(function () {
$(this).find("h2").toggleClass("active");
$(this).siblings().find("h2").removeClass("active");
//$(this).find("h2").toggleClass("active").siblings().find("h2").removeClass("active");寫在同一行會無效??
//如果真的要寫成一行要加個parent()
//$(this).find("h2").toggleClass("active").parent().siblings().find("h2").removeClass("active");
//但是這樣子this感覺就變成了h2
});
});
```
[jQuery.find()範例](https://codepen.io/efzdamnp-the-lessful/pen/ZEyyOqQ?editors=0110)
#### 這裡遇到了兩個問題
##### 1.把$(this).find("h2").toggleClass("active").siblings().find("h2").removeClass("active");寫在同一行removeClass會無效需要寫成兩行如下
$(this).find("h2").toggleClass("active");
$(this).siblings().find("h2").removeClass("active");
為甚麼寫成一行不行?
#### 2.如果硬要寫成一行也不是不行要再加上.parent()如下
$(this).find("h2").toggleClass("active").parent().siblings().find("h2").removeClass("active");但是這樣子this感覺就不是.card而是h2了
為什麼加上加上parent()就可以?
#### Ans:因為1.內的siblings()是與h2同層的a與p自然不到h2執行所以需要回到父層尋找這也就是2.的答案回到.card的兄弟層找其他的.card
### 5.jQuery-設計 折疊選單
目的：設計一個摺疊式選單點，擊時選單會發亮且展開子選單，在點擊其他選單時，原點擊的選單會熄滅並且收闔
```htmlembedded=
<ul class="menu">
<li class="list"><a href="#" class="list-tide"> 選單1</a>
<ul class="submenu">
<li class="sublist"><a href="#">子選單1</a> </li>
<li class="sublist"><a href="#">子選單2</a> </li>
<li class="sublist"><a href="#">子選單3</a></li>
<li class="sublist"><a href="#">子選單4</a></li>
<li class="sublist"><a href="#">子選單5</a></li>
</ul>
</li>
<li class="list"><a href="#" class="list-tide"> 選單2</a>
<ul class="submenu">
<li class="sublist"><a href="#">子選單1</a> </li>
<li class="sublist"><a href="#">子選單2</a> </li>
<li class="sublist"><a href="#">子選單3</a></li>
<li class="sublist"><a href="#">子選單4</a></li>
<li class="sublist"><a href="#">子選單5</a></li>
</ul>
</li>
<li class="list"><a href="#" class="list-tide"> 選單3</a>
<ul class="submenu">
<li class="sublist"><a href="#">子選單1</a> </li>
<li class="sublist"><a href="#">子選單2</a> </li>
<li class="sublist"><a href="#">子選單3</a></li>
<li class="sublist"><a href="#">子選單4</a></li>
<li class="sublist"><a href="#">子選單5</a></li>
</ul>
</li>
</ul>
```
```css=
.menu{
margin: 50px;
width: 100px;
}
a{
padding: 20px;
text-decoration: none;
color: #000;
display: block;
&:hover,&.active{
background: orange;
color: #fff;
}
}
.list,.sublist{
outline: 1px solid #000;
}
.submenu{
display: none;
}
.list-tide{
padding: 20px;
display: block;
&:hover,&.active{
background: blue;
color: #fff;
}
}
```
```javascript=
$(document).ready(function(){
$('.menu > .list > a').click(function(enent){//其實可以直接寫.list-tide這裡示範選擇器的應用 可以直接選到 .list的子元素 a
//注意要>前後要用空白隔開
event.preventDefault()
//選單變色>父層(praent)>.find(.submenu)>執行.slideToggle()
$(this).toggleClass('active').parent().find('.submenu').slideToggle()
//消除其他以點選選單的樣式
$(this).parent().siblings().find('.list-tide').removeClass('active').parent().find('.submenu').slideUp()
});
//子選單只允許同時間亮起1個
$('.sublist').click(function(event){
event.preventDefault()
$(this).find('a').toggleClass('active')
$(this).siblings().find('a').removeClass('active')
});
});
```
[jQuery-設計 折疊選單](https://codepen.io/efzdamnp-the-lessful/pen/qBjjXZo)
[jQuery.parent()、.siblings()、.find()合併應用](https://codepen.io/efzdamnp-the-lessful/details/WNOOxQY)
### 6.jQuery-.text()與.html()
.html()可以動態載入html標籤與標籤的內容
.text()則是載入純文字
```htmlembedded=
<div class="box"></div>
<h2 class="box1"></h2>
```
```javascript=
$(document).ready(function(){
$('.box').html('<h1>我是用.html()加入的文字</h1>')
$('.box1').text('我是用.text()加入的文字')
});
```
[jQuery.text() and .html()範例](jQuery.text() and .html())
### 7.jQuery-.click()與.on()
```htmlembedded=
<div class="box"></div>
<div class="box1">
<h1></h1>
</div>
<h1 class="box1">我是直接寫在html上的文字</h1>
```
```javascript=
$(document).ready(function () {
$("h1").click(function () {
alert("click有觸發");
});
$("body").on("click", "h1", function () {
alert("on有觸發");
});
$(".box").html("<h1>我是用.html()加入的文字</h1>");
$(".box1").find("h1").text("我是用.text()加入的文字");
});
```
.click()與.on()的差別在於.on()有監控所選擇的元素
在範例種點擊.html產生的alert只有on()觸發，是因為點擊click時.html還沒每h1載入，
而on()監控是會先載入在執行動作，ps.如果把click放到html之下，click就會有作用
[jQuery.click()與.on()](https://codepen.io/efzdamnp-the-lessful/pen/QWgMVmb)
## jQuery 常用小技巧
### 1.jQuery-.attr()
attr()用來增加或是覆寫所選元素的屬性。
.attr('屬性','值')
```htmlembedded=
<h1>tittle</h1>
<div class="group"><a href="#" traget="_blank">linker</a></div>
<img src="https://upload.cc/i1/2021/07/10/sGAoHI.png
" alt="picture">
```
```javascript=
$(document).ready(function(){
$('h1').attr('title','123') ;//增加title屬性滑鼠移到h1時出現123
$('a').attr('href','https://www.google.com.tw');//更改a標籤連結的位置
$('img').attr('width','150');//寬度150px
});
```
[jQuery.attr()範例](https://codepen.io/efzdamnp-the-lessful/pen/MWoEYyw)
### 2.jQuery-remove() - 移除網頁標籤小工具
.remove()移除所選擇的html標籤與內容物
```htmlembedded=
<table>
<tr>
<td>content</td>
<td><button class="click">刪除</button></td>
</tr>
<tr>
<td>content</td>
<td><button class="click">刪除</button></td>
</tr>
<tr>
<td>content</td>
<td><button class="click">刪除</button></td>
</tr>
<tr>
<td>content</td>
<td><button class="click">刪除</button></td>
</tr>
<tr>
<td>content</td>
<td><button class="click">刪除</button></td>
</tr>
</table>
```
```css=
table{
border-collapse: collapse;
}
td{
border: 1px solid #000;
}
```
```javascript=
$(document).ready(function(){
$('.click').click(function(){
$(this).parent().parent().remove()
});
});
```
[jQuery.reomve()-範例](https://codepen.io/efzdamnp-the-lessful/pen/yLXzRyV?editors=1111)
### 2.jQuery-scrollTop - 將畫面視窗以動畫效果滑到原點
```htmlembedded=
<div class="back"><a href="#">home</a></div>
<ul>
<li>
<1></1>
</li>
<li>
<2></2>
</li>
<li>
<3></3>
</li>
</ul>
.
.
.
</div>
```
```css=
.back{
position: fixed;
top:50%;
right: 0;
}
a{
display: block;
background: #000;
color: #fff;
padding: 20px 50px;
text-decoration: none;
&:hover{
color: red;
background: gray;
}
}
```
```javascript=
$(document).ready(function(){
$('.back').click(function(event){
event.preventDefault()
$('html,body').animate({//指梗個網頁
scrollTop:0//滾輪到0
},800)//動畫秒數
})
});
```
[jQuery-top滑動效果-範例](https://codepen.io/efzdamnp-the-lessful/pen/wverYjW)
### 3.jQuery-動態載入fontawson icon
jQuery可以動態載入class 透過這一點就可以在入fontawson 因為fontawson icon 是用class表現的<i class="far fa-smile"></i>
```htmlembedded=
<ul>
<li><a href=".hospital-user">hospital-user</a></li>
<li><a href=".couch">couch</a></li>
<li><a href=".bell">bell</a></li>
<li><a href=".door-closed">door-close</a></li>
</ul>
<h2>
<div class="title">title1</div>
</h2>
<h2>
<div class="title">title2</div>
</h2>
<h2>
<div class="title">title3</div>
</h2>
<input type="text" class="test" placeholder="test">
<span class="test">span</span>
<div class="test">123</div>
```
```css=
a:before{
margin-right: 10px;
}
.test{
color: green;
}
.title{
color: red;
}
```
```javascript=
$(document).ready(function(){
$("a[href*='.hospital-user']").addClass('fas fa-hospital-user')
$('a[href$=".bell"]').addClass('fas fa-bell')
$('a[href^=".couch"]').addClass('fas fa-couch')
$('a[href*=".door-closed"]').addClass('fas fa-door-closed')
$('.title[class="title"]').addClass('far fa-smile')
$('.test[class|="test"]').addClass('far fa-smile')
});
```
$('a[href*=".hospital-user"]')
選擇html的a標籤，找到屬性href中有.hospital-user執行.addClass('...')
其中* 可以換成的種類請參考[jQuery Quick API Reference中的attribute](https://oscarotero.com/jquery/)
[jQuery-動態載入fontawson icon](https://codepen.io/efzdamnp-the-lessful/pen/dyRVQpo)
Sign in with Wallet
Connect another wallet