---
tags: jQuery,第二章
---
# jQuery第二章
## 鏈式編成
```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>
<button>快速</button>
<script>
$('button').click(function () {
$(this).css('color', 'red');
$(this).siblings().css('color', '');
});
</script>
</body>
</html>
```
```javascript=
<script>
$('button').click(function () {
// $(this).css('color', 'red');
// $(this).siblings().css('color', '');
$(this).css('color', 'red').siblings().css('color', '');
});
</script>
```
## 基本修改css屬性
```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>
console.log($('div').css('width')); // 200px
$('div').css('width', '300px');
$('div').css('height', 300); // '300px'改成300是可以的
$('div').css({
width: 400,
height: 400,
backgroundColor: 'red'
});
</script>
</body>
</html>
```
## 修改css的類
```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: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
.current {
background-color: red;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
<script>
$('div').click(function () {
// $(this).addClass('current');
});
$('div').click(function () {
// $(this).removeClass('current');
});
$('div').click(function () {
$(this).toggleClass('current');
});
</script>
</body>
</html>
```
## tab欄切換製作
```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>
<style>
/* 全體樣式 */
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
/* 全體樣式 */
/* 最外框 */
.tab {
position: relative;
margin: 100px auto;
width: 1000px;
height: 1000px;
background-color: pink;
}
/* 最外框 */
/* 標題欄 */
.tab_list {
display: flex;
justify-content: center;
align-items: center;
width: 1000px;
height: 39px;
background-color: lightgreen;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: red;
color: #fff;
}
/* 標題欄 */
/* 內容欄 */
.tab_con {
position: absolute;
left: 25%;
top: 25%;
width: 500px;
height: 500px;
background-color: skyblue;
}
/* 內容欄 */
/* 內容小調整 */
.item {
display: none;
text-align: center;
line-height: 500px;
}
/* 內容小調整 */
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格與包裝</li>
<li>售後保障</li>
<li>商品評價</li>
<li>手機社區</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">商品介紹模塊內容</div>
<div class="item">規格與包裝模塊內容</div>
<div class="item">售後保障模塊內容</div>
<div class="item">商品評價模塊內容</div>
<div class="item">手機社區模塊內容</div>
</div>
</div>
<script>
$('.tab_list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var index = $(this).index();
console.log(index);
$('.tab_con .item').eq(index).show().siblings().hide();
});
</script>
</body>
</html>
```
## 類操作細節
原生JS中className會覆蓋元素原先的類名
jQuery類操作只會對指定類操作，不影響原先類名
```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>
<style>
.one {
width: 100px;
height: 100px;
background-color: pink;
}
.two {
border: 2px solid black;
}
</style>
</head>
<body>
<div class="one two"></div>
<script>
// var one = document.querySelector('.one');
// one.className = 'two';
// $('.one').addClass('two');
// $('.one').removeClass('two');
</script>
</body>
</html>
```
## 顯示隱藏效果
https://jquery.cuishifeng.cn/
```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>
<style>
div {
width: 100px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$('button')
.eq(0)
.click(function () {
$('div').show(1000, function () {
alert(1);
});
});
$('button')
.eq(1)
.click(function () {
$('div').hide(1000, function () {
alert(1);
});
});
$('button')
.eq(2)
.click(function () {
$('div').toggle(1000);
});
</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>
<style>
div {
width: 100px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$('button')
.eq(0)
.click(function () {
$('div').slideDown();
});
$('button')
.eq(1)
.click(function () {
$('div').slideUp(500);
});
$('button')
.eq(2)
.click(function () {
$('div').slideToggle(100);
});
</script>
</body>
</html>
```
## 事件切換
```css=
<!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>
```
```javascript=
$('.nav>li').hover(
function () {
$(this).children('ul').slideDown(200);
},
function () {
$(this).children('ul').slideUp(200);
}
);
```
```javascript=
$('.nav>li').hover(function () {
$(this).children('ul').slideToggle(200);
});
```
## 停止動畫
承上
stop()寫在動畫前面
```javascript=
$('.nav>li').hover(function () {
$(this).children('ul').stop().slideToggle(200);
});
```
## 淡入淡出
```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>
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script>
$('button')
.eq(0)
.click(function () {
$('div').fadeIn(1000);
});
$('button')
.eq(1)
.click(function () {
$('div').fadeOut(1000);
});
$('button')
.eq(2)
.click(function () {
$('div').fadeToggle(1000);
});
$('button')
.eq(3)
.click(function () {
$('div').fadeTo(1000, 0.5);
});
</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>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.wrap {
width: 908px;
height: 604px;
margin: 100px auto;
border: 2px solid white;
padding: 5px;
}
.wrap li {
vertical-align: middle;
display: inline-block;
}
</style>
<script src="jQuery.min.js"></script>
<script>
$(function () {
$('.wrap li').hover(
function () {
$(this).siblings().stop().fadeTo(400, 0.5);
},
function () {
$(this).siblings().stop().fadeTo(400, 1);
}
);
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="./p025-1images/image01.jpg" alt=""></a></li>
<li><a href="#"><img src="./p025-1images/image02.jpg" alt=""></a></li>
<li><a href="#"><img src="./p025-1images/image03.jpg" alt=""></a></li>
<li><a href="#"><img src="./p025-1images/image04.jpg" alt=""></a></li>
<li><a href="#"><img src="./p025-1images/image05.jpg" alt=""></a></li>
<li><a href="#"><img src="./p025-1images/image06.jpg" alt=""></a></li>
</ul>
</div>
</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>
<style>
div {
position: absolute;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<button>動起來</button>
<div></div>
<script>
$('button').click(function () {
$('div').animate(
{
left: 500,
top: 300,
opacity: 0.4,
width: 500,
height: 500
},
100
);
});
</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>
<style>
/* 全局設定 */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* 全局設定 */
.king {
position: relative;
width: max-content;
height: 69px;
background-color: skyblue;
margin: 300px auto;
overflow: hidden;
}
.king li {
float: left;
position: relative;
display: block;
width: 69px;
height: 69px;
}
.king li a {
position: relative;
display: block;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div class="king">
<ul>
<li class="current"><a href="#"><img src="./p028images/s1.png" alt="" class="small"><img src="./p028images/b1.png" alt="" class="big"></a></li>
<li><a href="#"><img src="./p028images/s2.png" alt="" class="small"><img src="./p028images/b2.png" alt="" class="big"></a></li>
<li><a href="#"><img src="./p028images/s3.png" alt="" class="small"><img src="./p028images/b3.png" alt="" class="big"></a></li>
<li><a href="#"><img src="./p028images/s4.png" alt="" class="small"><img src="./p028images/b4.png" alt="" class="big"></a></li>
<li><a href="#"><img src="./p028images/s5.png" alt="" class="small"><img src="./p028images/b5.png" alt="" class="big"></a></li>
<li><a href="#"><img src="./p028images/s6.png" alt="" class="small"><img src="./p028images/b6.png" alt="" class="big"></a></li>
<li><a href="#"><img src="./p028images/s7.png" alt="" class="small"><img src="./p028images/b7.png" alt="" class="big"></a></li>
</ul>
</div>
<script>
$('.king li').mouseenter(function () {
$(this)
.stop()
.animate({
width: 224
})
.find('.small')
.stop()
.fadeOut()
.siblings('.big')
.stop()
.fadeIn();
$(this)
.siblings('li')
.stop()
.animate({
width: 69
})
.find('.small')
.stop()
.fadeIn()
.siblings('.big')
.stop()
.fadeOut();
});
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet