案例1:广告显示和隐藏
需求:
1.当页面加载完,3秒后自动显示广告
2.广告显示5秒后,自动消失
分析
1.使用定时器完成。setTimeOut(执行一次)
2.分析发现,jquery的显示和隐藏的动画效果其实就是控制display
3.使用show、hide方法来完成广告的显示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//入口函数,在页面加载完成后,定义定时器,调用这两个方法a
$(function () {
//定义定时器,调用adShow方法,3秒后执行
setTimeout(adShow,3000);
//定义定时器,调用adHide方法,8秒后执行
setTimeout(adHide,8000);
})
//显示广告
function adShow() {
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!--整体的div-->
<div>
<!--广告div-->
<div id="ad" style="display: none">
<img style="width: 100%" src="../img/adv.jpg"/>
</div>
<!--下方正文部分-->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
案例2:抽奖演示
需求
点击开始小图片变化,并且不能再点击开始
点击停止,大图片出现停止的图片
分析
1.给开始按钮绑定单击事件
1.1定义循环定时器
1.2切换小相框的src属性
①定义数组,存放图片资源路径
②生成随机数,数组索引
2.给停止按钮绑定单击事件
2.1停止定时器
2.2给大相框设置src属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
var imgs = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
var startId;//开始定时器id
var index;//随机角标
//定义入口函数
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1.给开始按钮绑定单击事件
$("#startID").click(function () {
//1.1定义循环定时器 20ms执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2生成随机角标 范围0-6
index = Math.floor(Math.random()*7);
//1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20)
})
//2.给停止按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//2.1停止定时器
clearInterval(startId);
//2.2给大相框设置src属性
$("#img2ID").prop("src",imgs[index]).hide();
//1s后显示
$("#img2ID").show(1000);
})
})
</script>
</head>
<body>
<!--小相框-->
<div style="border-style:dotted;width: 160px;height: 100px">
<img id = "img1ID" src="../img/man00.jpg" style="width: 160px"height="100px"/>
</div>
<!--大相框-->
<div style="border-style:double;width: 800px;height: 500px;position: absolute;left: 500px;top:10px">
<img id = "img2ID" src="../img/man00.jpg" width="800px"height="500px"/>
</div>
<!--开始按钮-->
<input
id="startID"
type="button"
value="点击开始"
style="width: 150px;height: 150px;font-size: 22px">
>
<!--停止按钮-->
<input
id="stopID"
type="button"
value="点击停止"
style="width: 150px;height: 150px;font-size: 22px">
>
</body>
</html>
插件
增强jquery的功能
实现方式
1.$.fn.extend(object)
增强通过jquery获取的对象的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//使用jquery插件给jq对象添加2个方法 check()选中所有复选框,unchecked取消选中所有复选框
//定义jquery的对象插件
$.fn.extend({
//定义了一个check()方法,所有jq对象都可以调用该方法
check:function () {
//让复选框选中
//this调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
//让复选框不选中
this.prop("checked",false);
}
});
//入口函数
$(function () {
//复选框对象.check
$("#btn-check").click(function () {
//获取复选框对象
$("input[type='checkbox']").check();
})
$("#btn-uncheck").click(function () {
//获取复选框对象
$("input[type='checkbox']").uncheck();
})
});
</script>
</head>
<body>
<input id = "btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id = "btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>
2.$.extend(object)
增强jquery对象的自身的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//对全局方法扩展2个方法,扩展min方法,求2个值的最小值,扩展max方法,求两个值的最大值
$.extend({
max:function (a,b) {
//返回两个数的最大值
return a >= b ? a:b;
},
min:function (a,b) {
//返回两个数的最小值
return a <= b ? a:b;
}
});
//调用全局方法a
var max1 = $.max(2,3);
alert(max1)
var min = $.min(2,1);
alert(min)
</script>
</head>
<body>
</body>
</html>