javaweb-JQuery高级-40
文章目录
-
- 今日内容：
- JQuery 高级
- 广告的出现与消失案例
- 抽奖案例
- 插件自定义
今日内容：
1. JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
源代码已经上传到github,地址为：
https://github.com/Jonekaka/learn_web_20817
JQuery 高级
1. 动画
1. 三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. 参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
* swing：动画执行时效果是 先慢，中间快，最后又慢
* linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
-
滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])参数可选，速度可以使用毫秒计时
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])3. 淡入淡出显示和隐藏方式 1. fadeIn([speed],[easing],[fn]) 2. fadeOut([speed],[easing],[fn]) 3. fadeToggle([speed,[easing],[fn]])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
// 为什么不能加载完成后使用？，索引无法定位到按钮功能函数
// 如果先看视频，再做，做不出来又要回去看，浪费时间，细节不到位，不清楚
// 如果先做，又不懂道理，只会照葫芦画瓢而已，没有印象，都不可取
// $(function () {
function hideFn() {
/* $("#showDiv").hide("slow","swing",function () {
alert("隐藏");
});*/
/* // 默认方式
$("#showDiv").hide(5000,"swing");*/
/* // 滑动方式
$("#showDiv").slideUp("slow");*/
// 淡入淡出方式
$("#showDiv").fadeOut("slow");
};
function showFn() {
/* $("#showDiv").show("slow","swing",function () {
alert("展示");
});*/
/* // 默认方式
$("#showDiv").show(5000,"swing");*/
/* // 滑动方式
$("#showDiv").slideDown("slow");*/
// 淡入淡出方式
$("#showDiv").fadeIn("slow");
}
function toggleFn() {
/* // 默认方式
$("#showDiv").toggle("slow");*/
/* // 滑动方式
$("#showDiv").slideToggle("slow");*/
// 淡入淡出方式
$("#showDiv").fadeToggle("slow");
}
// });
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
-
遍历
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
2. jq的遍历方式
1. jq对象.each(callback)
1. 语法：
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象* this：集合中的每一个元素对象 2. 回调函数返回值： * true:如果当前function返回为false，则结束循环(break)。 * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue) 5. $.each(object, [callback]) 6. for..of: jquery 3.0 版本之后提供的方式 for(元素对象 of 容器对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 获得ul下的所有li
var citys=$("#city li");
/* // 遍历对象
for(var i=0;i
// 使用jq遍历。
citys.each(function (index,element) {
/* // 获得li对象，第一种方式this
// alert(this.innerHTML);
alert($(this).html());*/
/*// 获得li对象第二种方式，在回调函数中定义参数 index(索引) element(元素对象)
alert(index+element.innerHTML);*/
});
// // jq遍历对象，$.each(object,[callback])全局遍历
// $.each(citys,function () {
// alert($(this).html());
// });
// 使用for 。。。of Jqery 3.0版本后才提供的方式
for(li of citys){
alert($(li).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
- 事件绑定
1. jquery标准的绑定方式
* jq对象.事件方法(回调函数)；事件出发之后会发生什么，调用
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为，比如获得焦点等等。
* 表单对象.submit();//让表单提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 标准的绑定方式
// 使用click方法
/* $("#name").click(function () {
alert("点击");
});*/
/* $("#name").mouseover(function () {
alert("鼠标移入");
});*/
/* $("#name").mouseout(function () {
alert("鼠标移出");
});*/
// 链式编程，简化书写，但是集成度高，不容易读，适宜为之
$("#name").mouseover(function () {
alert("鼠标移入");
}).mouseout(function () {
alert("鼠标移出");
});
// 让文本获得焦点
$("#name").focus();
// 提交表单
// 表单对象.submit();
});
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
- on绑定事件/off解除绑定
* jq对象.on(“事件名称”,回调函数)
* jq对象.off(“事件名称”)
* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 用on给按钮添加click事件
$("#btn").on("click",function () {
alert("绑定了点击事件");
});
// 使用off取消绑定
$("#btn2").click(function () {
// 注意解绑的id
$("#btn").off("click");
// $("#btn").off();解除全部绑定
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
-
事件切换：toggle
* jq对象.toggle(fn1,fn2…)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。其他类似
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 使用toggle方法
$("#btn").toggle(function () {
$("#myDiv").css("backgroundColor","green");
},function () {
$("#myDiv").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>
</body>
</html>
广告的出现与消失案例
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)，完成定时触发函数
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display，调用show,hide方法就可以控制，函数实现
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{
width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 定时器,方法如果写（）会立刻执行，不要写
setTimeout(adShow,3000);
// 想要5秒后消失，就需要加上之前显示的时间，计时是相互干扰的，从页面加载完毕统一算起
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>
抽奖案例
/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器，触发函数随机切换图片
1.2 函数获得src属性，随机切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
* 点击停止禁用开始按钮，开启停止按钮
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性
停止按钮禁用，开始按钮开启
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></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"
onclick="imgStart()">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px"
onclick="imgStop()">
<script language='javascript' type='text/javascript'>
//准备一个一维数组，装用户的像片路径
var imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"
];
// 开启定时器的id
var startId;
// 随机坐标变量
var index;
$(function () {
// 初始化按钮
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 给开始按钮绑定单击事件
$("#startID").click(function () {
// 定时器定期触发函数，循环定时器，而非一次性的
startId=setInterval(function () {
// 禁用开始按钮，释放停止按钮
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// 生成索引范围内随机数,向下取整,0.000-0.999
index=Math.floor(Math.random()*7);
// 设置图片
$("#img1ID").prop("src",imgs[index]);
},20)
});
// 结束按钮绑定事件
$("#stopID").click(function () {
// 禁用关闭按钮，释放开始按钮
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 停止定时器
clearInterval(startId);
// 设置大相框图片,但是先隐藏，实现动画效果
$("#img2ID").prop("src",imgs[index]).hide();
// 显示1s以后
$("#img2ID").show(1000);
});
});
</script>
</body>
</html>
.
插件自定义
：增强JQuery的功能
1. 实现方式：
1. $.fn.extend(object) 对象级插件
* 增加更多的功能，这些功能可以是自定义的，都可以调用，增强通过Jquery获取的对象的功能 $("#id")，
* this调用该方法的jq对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 定义Jquery的对象新插件
// $.fn.extend(object) 对象级插件
$.fn.extend({
// 定义一个check方法，所有的jq对象都可以调用该方法
check:function () {
// 让复选框选中
// 调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
// 让复选框不选中
this.prop("checked",false);
}
});
// 调用插件
$(function () {
// 获得按钮
$("#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)全局性插件，
* 增强JQeury对象自身的功能 $/jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
max:function(a,b){
return a>=b ?a:b;
},
min:function(a,b){
return a>=b ?a:b;
}
});
// 调用全局方法
var max=$.max(1,2);
alert(max);
</script>
</head>
<body>
</body>
</html>