---
tags: jQuery,第一章
---
# jQuery第一章
## JavaScript庫
這些庫都是對原生JavaScript進行封裝
即library，是一個封裝好的特定的集合(方法和函數)
比如jQuery，就是為了快速方便的操作DOM，裡面基本都是函數(方法)
### 常見的JavaScript庫
jQuery
Prototype
YUI
Dojo
Ext JS
移動端的zepto
### jQuery優點
1.輕量級，核心文件才幾10KB
2.跨瀏覽器兼容
3.鏈式編程、隱式疊代
4.對事件、樣式、動畫支持
5.支持插件擴展開發
6.免費開源
### $
$是jQuery的別稱
$也是jQuery的頂級對象
## 使用jQuery
https://jquery.com/
生產環節用，有壓縮
Download the compressed, production jQuery 3.6.3
開發者版本
Download the uncompressed, development jQuery 3.6.3
```javascript=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$("div").hide();
</script>
</body>
</html>
```
## onload效果
又稱入口函數
相當於DOMContentLoaded
```javascript=
<script>
$(document).ready(function () {
// 寫內容
});
</script>
```
```javascript=
<script>
$(function () {
// 寫內容
});
</script>
```
## 2種對象
```javascript=
<div></div>
<script>
// DOM對象
var myDiv = document.querySelector('div');
console.dir(myDiv);
// jQuery對象，偽數組
$('div');
console.dir($('div'));
// 報錯寫法
myDiv.style.display = 'none';
// myDiv.hide();
// $('div').style.display = 'none';
$('div').hide();
</script>
```
## 2種對象互換
```javascript=
<video src="480p.mp4" muted controls></video>
<script>
// DOM轉jQuery
var myVideo = document.querySelector('video');
// $(myVideo).play();
// jQuery轉DOM
$('video')[0].play();
$('video').get(0).play();
</script>
```
## 基礎選擇器
```html=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
</head>
<body>
<div>我是div</div>
<div class="nav">我是nav</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
console.log($('.nav'));
console.log($('ul li'));
</script>
</body>
</html>
```
## 隱式疊代
遍歷內部DOM元素(偽數組形式存儲)的過程叫做隱式疊代
```html=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
</head>
<body>
<div>驚不驚喜</div>
<div>驚不驚喜</div>
<div>驚不驚喜</div>
<div>驚不驚喜</div>
<ul>
<li>相同</li>
<li>相同</li>
<li>相同</li>
</ul>
<script>
console.log($('div'));
// 隱式疊代
$('div').css('background', 'pink');
$('ul li').css('color', 'red');
</script>
</body>
</html>
```
## 篩選選擇器
```html=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
</head>
<body>
<ul>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
</ul>
<ol>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
<li>篩選</li>
</ol>
<script>
$('ul li:first').css('color', 'red');
$('ul li:eq(2)').css('color', 'blue');
$('ol li:odd').css('color', 'skyblue');
$('ol li:even').css('color', 'pink');
</script>
</body>
</html>
```
## 篩選方法
```html=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son">兒子</div>
</div>
</div>
<div class="nav">
<p>我是屁</p>
<div>
<p>我是p</p>
</div>
</div>
<script>
// 返回最近一級的父級元素
console.log($('.son').parent());
// 只選親兒子
$('.nav').children('p').css('color', 'red');
// 選所有的孩子，包含兒子和孫子
$('.nav').find('p').css('color', 'blue');
</script>
</body>
</html>
```
## 新浪下拉菜單
```html=
<!DOCTYPE html>
<html lang="en">
<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>
<style>
/* 全體樣式 */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* 全體樣式 */
/* 最外框 */
.nav {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
/* width: 1000px; */
height: 2000px;
background-color: pink;
}
/* 最外框 */
/* 標題格子 */
.nav > li {
float: left;
border: 2px solid black;
border-right: none;
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
line-height: 200px;
}
.nav > li:nth-last-child(1) {
border-right: 2px solid black;
}
.nav > li > a {
display: inline-block;
width: 200px;
height: 200px;
font-size: 100px;
}
.nav > li > a:hover {
background-color: #eee;
}
/* 標題格子 */
/* 下拉菜單母體 */
.menu {
display: none;
position: relative;
top: -28px;
left: -42px;
width: 200px;
height: 200px;
}
/* 下拉菜單母體 */
/* 下拉菜單小格子 */
.menu li {
border: 2px solid black;
border-bottom: none;
width: 200px;
height: 200px;
background-color: green;
}
.menu li:nth-last-child(1) {
border-bottom: 2px solid black;
}
.menu li a {
display: inline-block;
width: 200px;
height: 200px;
font-size: 100px;
}
.menu li a:hover {
background-color: #fff;
}
/* 下拉菜單小格子 */
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul class="menu">
<li><a href="">私信</a></li>
<li><a href="">評論</a></li>
<li><a href="">我的</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="menu">
<li><a href="">私信</a></li>
<li><a href="">評論</a></li>
<li><a href="">我的</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="menu">
<li><a href="">私信</a></li>
<li><a href="">評論</a></li>
<li><a href="">我的</a></li>
</ul>
</li>
</ul>
</body>
<script>
$('.nav>li').mouseover(function () {
$(this).children('ul').show();
});
$('.nav>li').mouseout(function () {
$(this).children('ul').hide();
});
</script>
</html>
```
## 更多篩選方法
```html=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
</head>
<body>
<ol>
<li>我是ol的li</li>
<li>我是ol的li</li>
<li class="item">我是ol的li</li>
<li>我是ol的li</li>
<li>我是ol的li</li>
<li>我是ol的li</li>
</ol>
<ul>
<li>我是ul的li</li>
<li>我是ul的li</li>
<li>我是ul的li</li>
<li>我是ul的li</li>
<li>我是ul的li</li>
<li>我是ul的li</li>
</ul>
<div class="current">我有current</div>
<div>沒東東</div>
<script>
// 兄弟元素，自身之外所有元素
$('ol .item').siblings('li').css('color', 'red');
// 第n個元素寫法一
$('ul li:eq(2)').css('color', 'blue');
// 第n個元素寫法二，也可代入變量
$('ul li').eq(3).css('color', 'green');
// 判斷有沒有類名
console.log($('div:first').hasClass('current')); //true
console.log($('div:last').hasClass('current')); //false
</script>
</body>
</html>
```
## 排他思想
```javascript=
<!DOCTYPE html>
<html lang="en">
<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="jQuery.min.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
// 1.隱式疊代
$('button').click(function () {
// 2.當前元素換背景
$(this).css('background', 'pink');
// 3.其餘兄弟去顏色
$(this).siblings('button').css('background', '');
});
</script>
</body>
</html>
```
## 案例:JQuery側邊導航欄
[demo網站](https://hackmd.io/a-KWROXGTimx5KrbsjAlUQ)
[JQuery側邊導航欄](https://github.com/bahigabu/JQuery_sideNavBar)
Sign in with Wallet
Connect another wallet