一、函数方法
1、静态函数的使用
1、jQuery中的each静态方法和mao静态方法的区别
1.1 返回值的不同：
- each 静态方法默认的返回值就是所遍历的变量
遍历数组则返回的是数组，遍历对象则返回的是对象 - map 静态方法默认的返回值就是一个空数组
1.2 回调函数中对值处理方式不同：
- each 静态方法不支持在回调函数中对遍历的数组进行处理
- map 静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新数组返回
示例：
<script>
var arr = [0, 1, 2, 3];
console.log("each");
var $arr = $(arr).each(function (index, value) {
console.log(index, value);
return index + value;
});
console.log($arr);
console.log("map");
var $map = $(arr).map(function (index, value) {
console.log(index, value);
return index + value;
});
console.log($map);
</script>
打印结果
2、scrollTop()方法：
1、使用
1.1 获取：
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
//编写jQuery相关方法
//获取滚动的偏移量
$(".scroll").scrollTop();
//获取网页滚动的偏移量
$("body").scrollTop() + $("html").scrollTop();
//设置滚动的偏移量
$(".scroll").scrollTop(300); //300px
//获取网页滚动的偏移量
$("html, body").scrollTop(300); //300px
});
</script>
注意：
- 为了保证浏览器的兼容，获取网页滚动的偏移量需要将body和html的两个偏移量相加起来
- 为了保证浏览器的兼容，同样在设置网页滚动的偏移量时，需要同时设置body和html两个偏移量
二、动画：
1、执行动画的注意点：
1.1 同一动画执行前需要先停止当前动画：
在jQuery中，如果需要执行动画，建议在执行某一动画之前先调用stop方法，然后再执行动画
因为在jQuery中有一个动画队列，每次执行的动画都会被加入到这个动画队列中，先进入的先执行，后进入的要等前一个执行完毕才能继续执行。这就导致在快速重复执行某一动画的时候，造成动画等待的效果，因此，需要在重复执行下一个动画之前，要先停止掉当前的动画。
注意：是同一个动画
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画-下拉菜单</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 300px;
height: 40px;
background-color: red;
margin: 100px auto;
text-align: center;
}
.nav>li {
width: 100px;
height: 40px;
line-height: 40px;
float: left;
}
.sub {
background-color: deepskyblue;
display: none;
}
.sub>li {
border-bottom: 1px solid #fff;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
//鼠标进入
$(".nav>li").mouseenter(function () {
//获取当前li的子元素（class为.sub的）
var $sub = $(this).children(".sub");
//停止当前li子元素的动画
$sub.stop();
$sub.slideDown(1000);
});
//鼠标移出
$(".nav>li").mouseleave(function () {
//获取当前li的子元素（class为.sub的）
var $sub = $(this).children(".sub");
//停止当前li子元素的动画
$sub.stop();
$sub.slideUp(1000);
});
});
</script>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
下拉菜单动画.gif
1.2 同一动画（多个动画组合）的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画-淡入淡出广告</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.ad {
width: 348px;
height: 244px;
position: fixed;
right: 0;
bottom: 0;
margin: 10px;
display: none;
}
.ad>img {
width: 348px;
height: 244px;
}
.close {
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
//编写jQuery相关方法
$(".close").click(function () {
$(".ad").slideUp(1000);
});
//注意：
$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
});
</script>
</head>
<body>
<div class="ad">
<img src="../imgs/ad.png"/>
<span id="close" class="close"></span>
</div>
</body>
</html>
淡入淡出广告动画.gif
2、动画停止方法stop()的使用：
注意：不同参数的效果不同
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn").click(function () {
$("ul").append("<li>我是新增的一个li</li>");
});
$("ul").delegate("li", "click", function () {
console.log(this);
console.log($(this).html());
});
$("#btn1").click(function () { //开始动画按钮
//链式动画
$("div") //需要执行动画的元素
.animate({ //动画1
width: 500 //修改宽度为500
}, 1000, //动画时长1000毫秒
"linear") //匀速动画
.delay(2000) //延时2000毫秒
.animate({ //动画2
height: 500 //修改高度为500
}, 1000, //动画时长1000毫秒
"swing" //缓动动画
);
});
$("#btn2").click(function () { //停止动画按钮
//立即停止当前动画，继续执行后续的动画
$("#btn").stop();
$("#btn").stop(false);
$("#btn").stop(false, false);
//立即停止当前和后续所有的动画
$("#btn").stop(true);
$("#btn").stop(true, false);
//立即完成当前的动画，继续执行后续动画
$("#btn").stop(false, true);
//立即完成当前的，并且停止后续所有的
$("#btn").stop(true, true);
});
});
</script>
网友评论