day21 --> (JQuery高级)
1、动画：
1.三种方式显示和隐藏元素：
1、show([speed],[easing],[fn])
参数：
1.speed : 动画的速度。三个预定义的值 （"slow","normal","fast"）或表示动画时长的毫秒数值(如1秒表示：1000)
2.easing ：用来指定切换效果，默认是"swing",可用参数"linear"
swing : 表示动画执行是 —— 先慢，中间快，最后又慢
linear : 动画执行时他的速度是匀速的
3.fn : 在动画完成时执行的函数，每个元素执行一次
2、hide([speed],[easing],[fn])
3、toggle([speed],[easing],[fn])
2.滑动显示和隐藏方式：
1、slideDown([speed],[esing],[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])
<script>
//隐藏div
function hideFn(){
//$("#showDiv").hide(5000,"linear");
//滑动方式
//$("#showDiv").slideUp("slow");
//淡出
$("#showDiv").fadeOut("slow");
}
//显示div
function showFn(){
//$("#showDiv").show("slow","swing");
//滑动方式
//$("#showDiv").slideDown("slow");
//淡入
$("#showDiv").fadeIn("slow");
}
//切换div
function toggleFn(){
//$("#showDiv").toggle(5000,"swing");
//滑动方式
//$("#showDiv").slideToggle("slow");
//淡出淡入切换
$("#showDiv").fadeToggle("slow");
}
</script>
2.遍历
1、js的遍历方式
for(初始化值; 循环结束条件; 步长)
2、jq的遍历方式
1.jq对象.each(callback)
2.返回值 : ObjectjQuery.each(object,[callback]) --> $.each(object,[callback])
3.for...of :
<script type="text/javascript">
// jq的遍历方式
//
// 1.jq对象.each(callback)
//
// 2.返回值 : ObjectjQuery.each(object,[callback]) --> $.each(object,[callback])
// 3.for...of :
$(function () {
//1、获取所有ul下的li
var citys = $("#city li");
//2.1、js遍历li
/* for (let i = 0; i < citys.length; i++) {
//获取内容
if (citys[i].innerHTML == "上海"){
//break;结束循环
continue; //跳过本次循环
}
alert(i + citys[i].innerHTML);
}*/
//2.2、jq对象.each(callback)
/* citys.each(function (index,element) {
//获取li对象
//1、this
//alert(this.innerHTML);
//alert($(this).html());
//2、获取Li对象的第二种方式 : 在回调函数中定义参数 index（索引） element（元素对象）
//alert(index + "-->" + element.innerHTML);
//alert(index + "-->" + $(element).html());
//判断是上海结束循环
if ("上海" == $(this).html()){
//如果当前function返回为false,则结束循环【相当于break】，如果返回为true，则跳过本次循环【continue】
return false;
}
alert($(this).html());
});*/
//2.3 $.each(object,[callback])
/*$.each(citys,function (){
alert($(this).html());
});*/
//2.4 for...of... : jquery 3.0 版本之后提供的方式
for(li of citys){
alert($(li).html());
}
});
</script>
3.JQuery事件绑定
1、jQuery标准的绑定方式
jq对象.事件方法(回调函数) ；
<script type="text/javascript">
$(function (){
//1、获取name对象，绑定click事件
/* $("#name").click(function (){
alert("我被点击了");
});*/
//给name绑定鼠标移动上事件，绑定鼠标移出事件
/* $("#name").mouseover(function (){
alert("鼠标来了");
});
$("#name").mouseout(function (){
alert("鼠标走了");
});*/
//简化操作，链式编程
/*$("#name").mouseover(function (){
alert("鼠标来了...");
}).mouseout(function (){
alert("鼠标走了...");
});*/
/*alert("。。");
$("#name").focus(); //让文本输入框获得焦点*/
});
</script>
2、on绑定事件 / off 解除绑定
jq对象.on（"事件名称",回调函数）
jq对象.off ("事件名称")
<script type="text/javascript">
$(function (){
//1、使用on给按钮绑定单击事件 click
$("#btn").on("click",function (){
alert("我被点击了");
})
//使用off解除btn按钮的单击事件
$("#btn2").click(function (){
//$("#btn").off("click"); //解除click事件
$("#btn").off(); //将组件上的所有事件都解除
})
})
</script>
3、事件切换 : toggle
jq对象.toggle(fn1,fn2,...) 【第一次执行fn1,下次执行fn2,...依此类推，执行到最后一个在从第一个开始】
注意：1.9版本之后，.toggle() 方法被删除了，jQuery Migrate(迁移)插件可以恢复此功能
案例一、广告的显示与隐藏：
<script>
$(function (){
setTimeout(adShow,3000);
setTimeout(adHide,8000);
})
//显示广告函数
function adShow() {
$("#ad").fadeIn("slow");
}
//隐藏广告函数
function adHide() {
$("#ad").fadeOut("slow");
}
</script>
案例二、抽奖演示
<script 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"
];
//给开始按钮绑定单击事件
var index; //随机索引
var changeImg; //定时器名
$("#startID").click(function (){
$("#startID").prop("disabled",true); //开始按钮不可用
$("#stopID").prop("disabled",false); //结束按钮可用
changeImg = setInterval(function (){
index = Math.floor(Math.random() * 7);
$("#img1ID").prop("src",imgs[index]);
},100);
});
$("#stopID").click(function () {
$("#stopID").prop("disabled",true);
$("#startID").prop("disabled",false);
clearInterval(changeImg);
$("#img2ID").prop("src",imgs[index]).hide();
$("#img2ID").fadeIn(2500);
})
</script>
2.插件：增强JQuery功能
1、实现方式：
1.jQuery.fn.extend(object) --> $.fn.extend(object) 【对象级别的插件】
通过增强JQuery获取的对象的功能 $("#id)
2.jQuery.extend(object) 【全局级别的插件】
增强JQuery对象自身的功能， $/jQuery
<script type="text/javascript">
$.fn.extend({
check:function () {
//让复选款都选中
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>
全局插件：
<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;
}
})
//调用： $.方法名
// let max = $.max(31,5);
// alert(max);
let min = $.min(31,5);
alert(min);
</script>
