js学习笔记——（15）jQuery选择器、样式操作、效果
1.jQuery选择器
1.1jQuery基础选择器
原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
$(‘选择器’) //里面选择器直接写css选择器即可，但是要加引号
1.2jQuery层级选择器
1.3隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
1.4jQuery筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.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>
$(function() {
$("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>
1.5jQuery筛选方法
1.6jQuery中的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
//1.隐式迭代 给所有按钮都绑定了点击事件
$("button").click(function() {
//2.当前元素变化颜色
$(this).css("background", "pink");
//3.其余兄弟元素清除样式
$(this).siblings("button").css("background", "");
});
})
</script>
</body>
</html>
2.jQuery样式操作
2.1操作css方法
jQuery可以使用css方式来修改简单元素样式，也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值
$(this).css(“color”);
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
$(this).css(“color”, “red”);
3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({“color”:“white”, “font-size”:“20px”});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
//操作样式之css方法
$(function() {
// console.log($("div").css("width"));
// $("div").css("width", "300px");
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
//如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
})
</script>
</body>
</html>
2.2设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
1.添加类
$(“div”).addClass(“current”);
2.移出类
$(“div”).removeClass(“current”);
3.切换类
$(“div”).toggleClass(“current”);
2.3类操作与className区别
原生js中className会覆盖元素原来的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先类名
3.jQuery效果
jQuery给我们封装了很多动画，最常见如下：
3.1显示隐藏效果
1.显示语法规范
show([speed, [easing], [fn]])
2.显示参数
(1)参数可以都省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.隐藏语法规范
hide([speed, [easing], [fn]]);
2.隐藏参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.切换语法
toggle([speed, [easing], [fn]])
2.切换参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("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>
3.2滑动效果
1.下滑效果语法规范
sliderDown([speed, [easing], [fn]]);
2.下滑效果参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.上滑效果语法规范
sliderUp([speed, [easing], [fn]]);
2.上滑效果参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.显示隐藏切换语法规范
sliderToggle([speed, [easing], [fn]]);
2.切换参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
//下滑动sliderDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
//上滑动sliderUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
//滑动切换sliderToggle()
$("div").slideToggle(100);
})
})
</script>
</body>
</html>
3.3事件切换
hover([over,] out);
(1)over鼠标移到元素上要触发的函数（相当于mouseenter）
(2)out鼠标移出元素要触发的函数（相当于mouseleave
3.4动画队列及其停止排队排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
2.停止排队
stop()
(1)stop()方法用于停止动画或效果
(2)注意：stop()写到动画或者效果的前面，相当于停止结束上一次动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.mini.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).children("ul").slideDown();
// });
//鼠标离开隐藏
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp();
// });
//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();
});
})
</script>
</body>
</html>
3.5淡入淡出效果
1.淡入效果语法规范
fadeIn([speed, [easing], [fn]]);
2.淡入效果参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.谈出效果语法规范
fadeOut([speed, [easing], [fn]]);
2.淡出效果参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.淡入淡出切换效果语法规范
fadeToggle([speed, [easing], [fn]]);
2.淡入淡出切换效果参数
(1)参数都可以省略，无动画直接显示
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000);
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
1.渐进方式调整到指定的不透明度
fadeTo([speed,opacity, [easing], [fn]]);
2.效果参数
(1)opacity透明度必须写，取值0~1之间;
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000),必须写;
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: black;
}
.wrap {
width: 640px;
height: 402px;
margin: 100px auto;
border: 1px solid white;
}
.wrap li {
float: left;
/* opacity: 0.5; */
}
.wrap img {
display: block;
padding: 10px 0 0 10px;
}
</style>
<script>
$(function() {
//鼠标进入的时候，其他li标签透明度：0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(100, 0.5);
},
function() {
//鼠标离开的时候，其他透明度改为1
$(this).siblings().stop().fadeTo(100, 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.参数
(1)params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法，其余参数都可以省略；
(2)speed:三种预定速度之一的字符串(“slow”, “normal”, “or”, “fast”)或表示动画时长的毫秒数值（如：1000),必须写;
(3)easing：(Optional)用来指定切换效果，默认是"swing",可用参数"linear"；
(4)fn:回调函数，在动画完成时执行函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 300
}, 500)
})
})
</script>
</body>
</html>