主要内容
- JQuery高级
- 动画
- 遍历
- 事件绑定
- 案例
- 插件
JQuery高级
- 动画
- 有三种方式显示和隐藏元素
- 默认方式
- show([speed,[easing],[fn]])
参数
1. speed :动画的速度；三个预定义的值(“slow”,“normal”, or “fast”)，或者是表示动画时常的毫秒数值(如，1000)
2. easing :用来指定切换效果，默认是"swing"，可用参数"linear"
* swing ：动画执行的效果是 先慢，中间快，最后再慢
* linear ：动画执行时，速度是匀速的
3. fn :在动画完成时执行的函数，每个元素执行一次。 - hide([speed,[easing],[fn]])
- toggle([speed,[easing],[fn]])
- show([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]])
- 默认方式
- 有三种方式显示和隐藏元素
<!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>
// 显示与隐藏动画
// <input type="button" value="点击按钮隐藏div" οnclick="hideFn()">
function hideFn() {
// 默认方式
/* $("#showDiv").hide("normal","swing",function () {
alert("隐藏了...");
});*/
// $("#showDiv").hide("fast","swing");
// 滑动方式
// $("#showDiv").slideUp("slow");
// 淡入淡出方式
$("#showDiv").fadeOut("slow");
}
// <input type="button" value="点击按钮显示div" οnclick="showFn()">
function showFn() {
// 默认方式
/*$("#showDiv").show("normal","swing",function () {
alert("显示了...");
});*/
// $("#showDiv").show("slow","linear");
// 滑动方式
// $("#showDiv").slideDown("slow");
// 淡入淡出方式
$("#showDiv").fadeIn("slow");
}
// <input type="button" value="点击按钮切换div显示和隐藏" οnclick="toggleFn()">
function toggleFn() {
// 默认方式
// $("#showDiv").toggle(3000);
// 滑动方式
// $("#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>
- 遍历
- js的遍历方式
- for(初始化值;循环结束条件;步长)
- JQuery的遍历方式
- jq对象.each(callback)
- $.each(object,[callback])
- for…of: JQuery3.0版本之后提供的方式
- js的遍历方式
<!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");
/*// 1.js遍历文本内容
for (var i=0; i<citys.length; i++){
// 此方法中可以使用break,continue方法
if ("上海" == citys[i].innerHTML){
// break;
continue;
}
// 获取内容
alert(i + citys[i].innerHTML);
}*/
/*// 2.JQuery 遍历文本内容 jq对象.each(callback)
citys.each(function (index,element) {
// 2.1 直接用this，函数不传参
// alert(this.innerHTML);
// 2.2 给函数传参，index(索引),element(元素对象)
// alert(index + element.innerHTML);
// element是js对象，可以转为jq对象
// alert(index + $(element).html());
// function中不能使用break,continue方法；但是可以返回false或true
// 若当前function返回false，则结束循环，相当于break
// 若当前function返回true，则结束本次循环，继续下次循环，相当于continue
if ("上海" == $(element).html()){
return true;
}
alert(index + $(element).html());
});*/
/*// 3.JQuery 遍历文本内容 $.each(object,[callback])
// 此方法的其余均与方法2相同，只不过调用方式有所区别
$.each(citys,function (index,element) {
// alert($(this).html());
alert(index+$(element).html());
})*/
// 4.JQuery遍历文本内容 for..of: 此方法只能在JQuery3.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>
- 事件绑定
- JQuery标准的绑定方式
- jq对象.事件方法(回调函数)；
- JQuery标准的绑定方式
<!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">
// JQuery标准的绑定方式
$(function () {
/*$("#name").click(function () {
alert("我被点击了...")
});
$("#name").mousemove(function () {
alert("鼠标来了...")
});
$("#name").mouseout(function () {
alert("鼠标走了...")
});*/
// 链式编程
$("#name").mousemove(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(“事件名称”)
<!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">
// 使用on/off进行绑定/解绑事件
$(function () {
// 为按钮1绑定事件
$("#btn").on("click",function () {
alert("我被点击了....")
});
// 点击按钮2时，为按钮1解除绑定
$("#btn2").click(function () {
$("#btn").off("click");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
- 事件切换：toggle
- jq对象.toggle(fn1,fn2…)
**注意：**1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
- jq对象.toggle(fn1,fn2…)
<!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">
// 使用toggle进行事件的切换
$(function () {
$("#btn").toggle(function () {
//设置myDiv的背景色为绿色
$("#myDiv").css("backgroundColor","green");
},function () {
//设置myDiv的背景色为红色
$("#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>
- 案例
广告的显示与隐藏- 需求：页面加载完成后，3秒打开广告页面；页面停留5秒消失
- 分析
- 对于时间的控制，可以使用定时器setTimeout(执行一次定时器)
- 观察广告DIV的属性可知，是由display属性控制的，而JQuery同样也是通过控制display属性来控制显示与隐藏的
- 对于广告的显示与隐藏，可以使用JQuery中的动画的显示与隐藏方法
<!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>
// 需求：页面加载完成后，3秒打开广告页面；页面停留5秒消失
// 分析
// 对于时间的控制，可以使用定时器setTimeout(执行一次定时器)
// 观察广告DIV的属性可知，是由display属性控制的，而JQuery同样也是通过控制display属性来控制显示与隐藏的
// 对于广告的显示与隐藏，可以使用JQuery中的动画的显示与隐藏方法
$(function () {
// 3秒打开广告页面
setTimeout(adShow,3000);
// 8秒隐藏广告页面
setTimeout(adHide,8000);
});
// 显示广告DIV的方法
function adShow() {
$("#ad").show("slow");
}
// 隐藏广告DIV的方法
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>
抽奖
- 需求
- 在开始之前先编写一个页面，包含两个div，用作图片展示的相框，还有两个按钮
- 在开始时刻，只能点击开始按钮，之后两个按钮只能交替点击一个
- 点击开始按钮后，小相框会随机展示不同的图片；点击结束按钮后，小相框停止随机，固定展示图片，而大相框中也展示小相框中选中的图片
- 分析
- 首先需要为两个按钮添加点击事件
- 为开始按钮添加点击事件
- 小相框中图片的随机展示，可以用一个循环定时器，每隔一段时间切换一下小相框中图片的src地址
- 用一个数组将所给的几张图片的src地址先保存到一个数组中，通过生成随机角标来获取不同图片的src
- 为停止按钮添加点击事件
- 需要将循环定时器停止，更改大相框中图片的地址
- 通过input标签中的disabled属性禁用按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
// 需求
// 在开始之前先编写一个页面，包含两个div，用作图片展示的相框，还有两个按钮
// 在开始时刻，只能点击开始按钮，之后两个按钮只能交替点击一个
// 点击开始按钮后，小相框会随机展示不同的图片
// 点击结束按钮后，小相框停止随机，固定展示图片，而大相框中也展示小相框中选中的图片
// 分析
// 首先需要为两个按钮添加点击事件
// 为开始按钮添加点击事件
// 小相框中图片的随机展示，可以用一个循环定时器，每隔一段时间切换一下小相框中图片的src地址
// 用一个数组将所给的几张图片的src地址先保存到一个数组中，通过生成随机角标来获取不同图片的src
// 为停止按钮添加点击事件
// 需要将循环定时器停止，更改大相框中图片的地址
// 通过input标签中的disabled属性禁用按钮
// 将所有图片的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 index; //定义数组角标
var TimeOut; //定义循环定时器
// 入口函数
$(function () {
// 初始时禁用停止按钮
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 给开始按钮添加单击事件
$("#startID").click(function () {
// 点击开始按钮后禁用开始按钮
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// 启动循环定时器，30毫秒执行一次
TimeOut = setInterval(function () {
// 生成随机角标
//0.000-0.999的随机数*7得到0.00-6.999的随机数，向下取整得到0-6的随机整数
index = Math.floor(Math.random()*7);
// 更改小相框的src属性（是固有属性，故用prop）
$("#img1ID").prop("src",imgs[index]);
},30);
});
// 给停止按钮添加单击事件
$("#stopID").click(function () {
// 点击停止按钮后禁用停止按钮
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//停止定时
clearInterval(TimeOut);
//设置大相框的src为选中的图片地址
$("#img2ID").prop("src",imgs[index]);
});
});
</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"
];
</script>
</body>
</html>
- 插件
- 用来增强JQuery的功能的，实现插件的方式有两种
1. $.fn.extend(object) -- 对象级别的插件
是用来增强通过JQuery获取的对象的功能 如：$("#id")
- 用来增强JQuery的功能的，实现插件的方式有两种
<script type="text/javascript">
//使用JQuery插件 给jq对象添加两个方法 check()选中所有复选框 uncheck()取消选中所有复选框
// 1.定义JQuery的对象插件
$.fn.extend({
check:function () {
// alert("添加的check方法")
//让复选框全部选中
$(this).prop("checked",true);
},
uncheck:function () {
// alert("添加的uncheck方法")
// 让复选框全部不选中
$(this).prop("checked",false);
}
});
function checkFn() {
//添加所有复选框，并调用check方法
$("input[type='checkbox']").check();
}
function uncheckFn() {
//添加所有复选框，并调用uncheck方法
$("input[type='checkbox']").uncheck();
}
</script>
2. $.extend(object) -- 全局级别的插件
*是用来增强JQuery自身的功能 $/JQuery*
<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;
}
});
// alert($.max(2,3));
alert($.min(2,1));
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
