2. jQuery样式操作
2.1 操作css方法
jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值，带有单位
$(this).css("color");<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
// 操作样式之css方法
$(function () {
console.log($("div").css("width"));
})
</script>
</body> 
2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red");<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
// 操作样式之css方法
$(function () {
$("div").css("width", "300px");
// 也可以$("div").css("width", 300);
})
</script>
</body>
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({"color":"white","font-size":"20px"}); <style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
// 操作样式之css方法
$(function () {
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果有复合属性则必须采取驼峰命名法，如果属性值不是数字，就必须加引号
});
})
</script>
</body>
2.2 设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点
1.添加类
$("div").addClass("current"); <style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
}
.current {
background-color: red;
}
</style>
<body>
<div></div>
<script>
$(function () {
// 1. 添加类 addClass()
$("div").click(function () {
$(this).addClass("current");
});
})
</script>
</body>
2. 移除类
$("div").removeClass("current"); <style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
}
.current {
background-color: red;
}
</style>
<script src="jquery.min.js"></script>
<body>
<div class="current"></div>
<script>
$(function () {
// 2. 删除类 removeClass()
$("div").click(function () {
$(this).removeClass("current");
});
})
</script>
</body>
3.切换类：如果有这个类就去掉，没有这个类就加上
$("div").toggleClass("current");<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
}
.current {
background-color: red;
transform: rotate(360deg);
}
</style>
<script src="jquery.min.js"></script>
<body>
<div class="current"></div>
<script>
$(function () {
// 3. 切换类 toggleClass()
$("div").click(function () {
$(this).toggleClass("current");
});
})
</script>
</body> 
案例：tab栏切换
步骤：
- 利用隐式迭代给上方所有li绑定点击事件
- 得到当前点击的li，给它添加类名current，删除其兄弟的current类名
- 获取到当前点击的li的索引号index，并通过索引号显示下方相应的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
<script src="../jquery.min.js"></script>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</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">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
$(function () {
$(".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> 
2.3 类操作与className区别
原生JS中className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作，不影响原先的类名
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
transition: all .3s;
}
.two {
transform: rotate(720deg);
}
</style>
<script src="jquery.min.js"></script>
<body>
<div class="one"></div>
<script>
var one = document.querySelector('.one');
one.className = 'two';
</script>
</body> 
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
transition: all .3s;
}
.two {
transform: rotate(720deg);
}
</style>
<script src="jquery.min.js"></script>
<body>
<div class="one"></div>
<script>
//相当于追加类名
$(".one").addClass("two");
</script>
</body>
3. jQuery效果
jQuery给我们封装了很多动画效果，最为常见的如下：
3.1 显示隐藏效果
1.显示语法规范
show([speed],[easing],[fn])2.显示参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1.隐藏语法规范
hide([speed],[easing],[fn])2.隐藏参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1.切换语法规范
hide([speed],[easing],[fn])2.切换参数:切换函数的可见状态
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
}
</style>
<script src="jquery.min.js"></script>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(1000, function () {
alert("显示");
});
});
$("button").eq(1).click(function () {
$("div").hide(1000, function () {
alert("隐藏");
});
});
$("button").eq(2).click(function () {
$("div").toggle(1000);
});
})
</script>
</body> 
3.2 滑动效果
1.下滑效果语法规范
slideDown([speed],[easing],[fn])2.下滑效果参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1.上滑效果语法规范
slideUp([speed],[easing],[fn])2.上滑效果参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1.切换效果语法规范
slideToggle([speed],[easing],[fn])2.滑动切换效果参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="jquery.min.js"></script>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
// 下滑动 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function () {
// 上滑动 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function () {
// 滑动切换 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
3.3 事件切换
hover([over,]out)- over：鼠标移到元素上时要触发的函数（相当于mouseenter）
- out：鼠标移出元素时要触发的函数(相当于mouseleave)
案例：简洁版下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="../jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
// 鼠标经过
// $(".nav>li").mouseover(function () {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function () {
// $(this).children("ul").slideUp(200);
// });
// 1.事件切换 hover 鼠标经过和离开的复合写法
// $(".nav>li").hover(function () {
// // 找到所有的ul都设置
// $(this).children("ul").slideDown(200);
// }, function () {
// $(this).children("ul").slideUp(200);
// });
// 2.事件切换 hover如果只写一个函数，那么鼠标离开和经过的时候都会触发
$(".nav>li").hover(function () {
$(this).children("ul").slideToggle(200);
})
})
</script>
</body>
</html>
3.4 动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
比如说上面的下拉菜单，如果快速在上面移动：
2. 停止排队
stop()- stop()方法用于停止动画或效果
- 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画，谁做动画就写在谁的前面
$(".nav>li").hover(function () {
$(this).children("ul").stop().slideToggle();
})3.5 淡入淡出效果
1. 淡入效果语法规范
fadeIn([speed],[easing],[fn])2. 淡入效果参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1.淡出效果语法规范
fadeOut([speed],[easing],[fn])2.淡出效果参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1. 淡入淡出切换效果语法规范
fadeToggle([speed],[easing],[fn])2.淡入淡出切换效果参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
1. 渐进方式调整到指定的不透明度
fadeTo(speed,opacity,[easing],[fn]);2.效果参数
- opacity透明度必须写，取值0~1之间
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如1000）
- easing：(Optional)用来指定切换效果，默认是“swing”，可用参数是linear
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="jquery.min.js"></script>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function () {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function () {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function () {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, .5);
});
});
</script>
</body> 
案例：突出显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
$(".wrap li").hover(function () {
//鼠标进入的时候,其他的li标签透明度：0.5
$(this).siblings().stop().fadeTo(400, .5);
}, function () {
// 鼠标离开，其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
3.6 自定义动画animate
1.语法
animate(params,[speed],[easing],[fn])2. 参数
- params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性，则采取驼峰命名法如borderLeft。其余参数都可以省略
- speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
- easing：（Optical）用来指定切换效果，默认是"swing(慢-快-慢)"，可用参数"linear(匀速)"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
<script src="jquery.min.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<button>动起来</button>
<div></div>
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: 200,
top: 400,
opacity: .4,
width: 300
}, 500)
})
})
</script>
</body> 
案例：王者荣耀手风琴效果
注意：每个li都是这样的结构，包含一张大图片和一张小图片，小图片定位到大图片的上面
注意：一开始鼠标没有放上去的li，是显示小图片，隐藏大图片，鼠标放上的li是隐藏小图片，显示大图片，最初的状态如图
步骤：
- 先给鼠标经过的li添加动画，让经过的li的宽度变为224px，其余li的宽度变为69，并且经过的li的大图片淡入，小图片淡出
- 因为大图片和小图片不是外层li的亲儿子，所以用find()选择
$(this).stop().animate({
width: 224,
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();链式：当前鼠标经过的li，给它添加动画，使宽度变成224px，然后找到它的子代中的small盒子，设置其淡出，然后找到small盒子的兄弟big盒子，设置其淡入，其余同理
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.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>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".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>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html> 
扫一扫
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
