jQuery样式操作
操作css方法
1.参数只写属性名,则会返回属性值
$(this).css("color");
2.参数是属性名,属性,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
3.参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({
width: 400,
backgroundColor: "red" // 如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号
})
设置类样式方法
1.添加类
$(this).addClass("类名") // 注意:类名前 没有.
2.移除类
$(this).removeClass("类名")
3.切换类
$(this).toggleClass("类名") //可实现 添加类名-移除类名-添加类名.. 的反复循环
案例:Tab栏切换案例
<!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 {
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>
</body>
<script>
$(function () {
// 当鼠标点击 tab_list 里面的 li 时候 背景样式改变 新增 current 类 并且移除其他li的 current 类
$(".tab_list li").click(function () {
$(this).addClass("current").siblings().removeClass("current");
// 底下tab_con对应的 div 显示 所以想要获取到 tab_list 里面 li的index
var index = $(this).index();
// 可以通过修改css让div显示 也可以调用show()方法;隐藏同理 hide()方法
$(".tab_con .item").eq(index).css("display", "block").siblings(".item").css("display", "none");
})
})
</script>
</html>
jQuery类操作和className区别
原生JS中className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作,不影响原先的类名
jQuery效果
jQuery给我们封装了很多动画效果,最为常见的如下:
显示隐藏
show([speed,[easing],[fn]]) // 一般情况下,我们都不加参数直接显示隐藏就可以了
显示隐藏的匹配元素。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:回调函数在动画完成时执行的函数,每个元素执行一次。
hide([speed,[easing],[fn]])
隐藏显示的元素。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
滑动
slideUp([speed,[easing],[fn]])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
相当于,滑动上去的效果。
slideDown([speed],[easing],[fn])
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
相当于,滑动下来的效果。
slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
相当于,上/下滑动来回切换的效果
事件切换
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>
// hover([over,]out)
// over:鼠标移动到元素上要触发的函数(相当于mouseenter)
// out:鼠标移出要触发的函数(相当于mouseleave)
$(function () {
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function () {
// $(this).children("ul").slideDown(200);
// },function () {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function () {
// 在动画钱添加 stop方法 鼠标移动 动画多次执行
$(this).children("ul").stop().slideToggle(200);
});
})
</script>
</body>
</html>
动画队列及其停止排队方法
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
停止排队
stop()
- stop()方法用于停止排队
- 注意stop()方法写到动画或者效果的前面,相当于停止结束上一次动画,只执行这一次动画
淡入淡出
fadeIn([speed],[easing],[fn]) // 淡入
fadeOut([speed],[easing],[fn]) // 淡出
fadeToggle([speed,[easing],[fn]]) // 淡入淡出切换
fadeTo([[speed],opacity,[easing],[fn]]) // 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
speed和opacity要保留
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:在动画完成时执行的函数,每个元素执行一次。
案列:跟随鼠标移动,某个盒子亮度突出显示(其余盒子变暗)
<!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() {
// 鼠标进入 某个 li 它的兄弟 li 盒子变暗
$(".wrap li").hover(function () {
$(this).siblings().stop().fadeTo(200,0.5);
},function () {
// 鼠标离开 兄弟盒子变回原来的亮度
$(this).siblings().stop().fadeTo(200,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>
自定义动画animate
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合(以对象的形式传入)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>