03_18_JavaWeb||day21_JQuery高级||day21_JQuery高级
原创
©著作权归作者所有：来自51CTO博客作者狂野小白兔的原创作品，请联系作者获取转载授权，否则将追究法律责任
今日内容：
1. JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
5. 插件
JQuery 高级
- 动画
- 三种方式显示和隐藏元素
- 默认显示和隐藏方式
- show([speed,[easing],[fn]])
- 参数：
- speed：动画的速度。==三个预定义的值(“slow”,“normal”, “fast”)==或表示动画时长的毫秒数值(如：1000)
- easing：用来指定切换效果，默认是"swing"，可用参数"linear"
- swing：动画执行时效果是 先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
- fn：在动画完成时执行的函数，每个元素执行一次。
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn])
- 滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
- 淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
<script>
//隐藏div
function hideFn() {
/*$("#showDiv").hide("slow", "swing", function () {
alert("隐藏了");
})*/
//默认方式
//$("#showDiv").hide("slow", "swing");
//滑动方式
//$("#showDiv").slideUp("slow");
//淡出方式
$("#showDiv").fadeOut("normal");
}
//显示div
function showFn() {
/*$("#showDiv").show("slow", "swing", function () {
alert("显示了");
})*/
//默认方式
//$("#showDiv").show("slow", "swing");
//滑动方式
//$("#showDiv").slideDown();
//淡入方式
$("#showDiv").fadeIn("normal");
}
//切换div显示和隐藏
function toggleFn() {
//默认方式
//$("#showDiv").toggle("slow");
//滑动方式
//$("#showDiv").slideToggle();
//淡入淡出方式
$("#showDiv").fadeToggle("normal");
}
</script>
- 遍历
- js的遍历方式
<script type="text/javascript">
$(function () {
//js的遍历方式
//1. 获取所有的ul下面的li
var citys = $("#city li");
//2. 遍历li
for (var i = 0; i < citys.length; i++) {
if("上海" == citys[i].innerHTML){
//break;
//continue;
}
//获取内容
alert(i + ":" + citys[i].innerHTML);
}
})
</script>
- jq的遍历方式
- jq对象.each(callback)【前面对象只能是jq对象】
- 语法：
- jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象
- 回调函数返回值：
- false:如果当前function返回为false，则结束循环(break)。
- true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
- 代码演示：
<script type="text/javascript">
$(function () {
//jq对象.each(callback)遍历方式
//1. 获取所有的ul下面的li
var citys = $("#city li");
//2. 遍历li
//3.1 获取li对象的第一种方式(不能获取索引)-->this
/*citys.each(function () {
alert(this.innerHTML);
//下面就将this(js对象)转为jq对象来调用html方法
alert($(this).html);
})*/
//3.2 获取li对象的第二种方式-->在回调函数中定义参数 index 和 element
citys.each(function (index, element) {
//element也是一个js对象，需要调用innerHTML
//alert(index + ":" + element.innerHTML);
//下面就将element(js对象)转为jq对象来调用html方法
//如果是上海，则结束循环
if("上海" == $(element).html()){
//false:如果当前function返回为false，则结束循环(break)。
//true:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
return false;
}
alert(index + ":" + $(element).html());
})
})
</script>
- $.each(object, [callback])【参数可以是js和jq对象–>也称为全局遍历】
<script type="text/javascript">
$(function () {
//$.each(object, [callback])【参数可以是js和jq对象-->也称为全局遍历】
//1. 获取所有的ul下面的li
var citys = $("#city li");
//2. 遍历li
//3.1 获取li对象的第一种方式(不能获取索引)-->this
/*$.each(citys, function () {
//alert(this.innerHTML);
alert($(this).html());
})*/
//3.2 内容和-->jq对象.each(callback)一样了
$.each(citys, function (index, element) {
alert(index + ":" + element.innerHTML);
})
})
</script>
- for…of: jquery 3.0 版本之后提供的方式
<!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 () {
//for..of：JQuery3.0版本之后才可以
//1. 获取所有的ul下面的li
var citys = $("#city li");
//2. 遍历li
for(li of citys){
alert($(li).html());
}
})
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
- 事件绑定
- jquery标准的绑定方式
- jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- jq对象.focus(); //默认不写是让，，文本输入框获得焦点
- 表单对象.submit();//让表单提交
<script type="text/javascript">
$(function () {
//1. 获取name对象，绑定click对象
/*$("#name").click(function () {
alert("我被点击了");
})*/
//2. 给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
/*$("#name").mouseover(function () {
alert("鼠标来了。。。");
})
$("#name").mouseout(function () {
alert("鼠标走了。。。");
})*/
//2.1 简化操作，链式编程(不建议多写)
/*$("#name").mouseover(function () {
alert("鼠标来了。。。");
}).mouseout(function () {
alert("鼠标走了。。。");
})*/
//3. 让文本输入框获得焦点
alert("点击后获得焦点");
$("#name").focus(); //默认不写是让，，文本输入框获得焦点
//4. 一个常用的操作：表单对象.submit(); //让表单提交
})
</script>
- on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
<script type="text/javascript">
$(function () {
//1. 使用on给按钮绑定点击事件 click
$("#btn").on("click", function () {
alert("我被点击了");
})
//2. 使用off解除btn按钮点击事件
$("#btn2").click(function () {
//解除btn按钮的点击事件
//$("#btn").off("click");
$("#btn").off(); //将组件上的所有事件全部解绑
})
})
</script>
- 事件切换：toggle
- 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
- 【注意】：1.9版本 .toggle()方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
- 高本版jq想要使用事件切换，还需要导入上面呢个插件
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
//不仅要引入高本版的jq，使用该功能还需要引入低版本的jq插件
<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 () {
//改变div的背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor", "green");
}, function () {
//改变div的背景色backgroundColor 颜色为 red
$("#myDiv").css("backgroundColor", "red");
})
})
</script>
- 案例一、广告显示和隐藏
- 需求：
- 当页面加载完，3秒后。自动显示广告
- 广告显示5秒后，自动消失。
- 分析：
- 使用定时器来完成。setTimeout (执行一次定时器)
- 分析发现JQuery的显示和隐藏动画效果其实就是控制display
- 使用 show/hide方法来完成广告的显示
- 代码实现：
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(addShow,3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(addHide,8000);
})
//显示广告
function addShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function addHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
</script>
- 案例二、抽奖
- 分析：
- 给开始按钮绑定单击事件
- 定义循环定时器：setInterval
- 切换小相框的src属性
- 给结束按钮绑定单击事件
- 停止定时器
- 给大相框设置src属性
- 代码实现：
<script language='javascript' type='text/javascript'>
/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器：setInterval
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性
*/
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 定义循环定时器 20毫秒执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2生成随机角标 0-6
index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
//1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20);
});
//2. 给结束按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.1 停止定时器
clearInterval(startId);
// 1.2 给大相框设置src属性
$("#img2ID").prop("src",imgs[index]).hide();
//显示1秒之后
$("#img2ID").show(1000);
});
});
</script>
- 插件：增强JQuery的功能
- 实现方式：
- $.fn.extend(object)–>对象级别
- 增强通过Jquery获取的对象的功能 $(“#id”)
<script type="text/javascript">
//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
//1.定义jqeury的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check:function () {
//让复选框选中
//this:调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
//让复选框不选中
this.prop("checked",false);
}
});
$(function () {
// 获取按钮
//$("#btn-check").check();
//复选框对象.check();
$("#btn-check").click(function () {
//获取复选框对象
$("input[type='checkbox']").check();
});
$("#btn-uncheck").click(function () {
//获取复选框对象
$("input[type='checkbox']").uncheck();
});
});
</script>
- $.extend(object)–>全局级别
<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(4,3);
//alert(max);
var min = $.min(1,2);
alert(min);
</script>
