First, the content of today
Article Directory
Two, jQuery advanced grammar learning
1. Animated
三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
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]])
* 以上方法的参数一样：
1. speed：动画的速度。
1. 三个预定义的值("slow","normal", "fast")
2. 动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
* swing：动画执行时效果是 先慢，中间快，最后又慢
* linear：动画执行时速度是匀速的
3. fn：回调函数。动画完成时立即执行的函数，每个元素执行一次。
2. traversal
1. js的遍历方式
* for(var 初始化值;循环结束条件;步长){}
2. jQuery的遍历方式
1. jQuery对象.each(callback)
1. 语法：
1. 方法一：（不常用）
jQuery对象.each(function(){});
* 注意：在function函数中，可以调用内置对象this，this代表当前的元素，是jQuery对象
2. 方法二：（常用）
jQuery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* 注意：index和element的名字是任意的，只是顺序问题，第一个代表索引，第二个代表元素对象
2. 回调函数返回值：
* true:如果当前function返回为false，则结束循环(break)。
* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
2. $.each(object, [callback])
* 注意：object是指任意对象，js对象也可以，callback是回调函数
* eg：
$.each(element, function(){}) function和上面的jQuery对象.each()情况一样
3. for..of: jquery 3.0 版本之后提供的方式
* 语法：和java的for-each一样
* for(元素对象 of 容器对象)
for ... of ... Download need to import the package
link: https://pan.baidu.com/s/1_0st01ika2n3Fgp5e_F3Ow
extraction code: wnx3
3. Event binding
1. js对象可以绑定的方法，jQuery对象都可以绑定，具体查jQuery的API
2. jQuery绑定事件的方法：
1. jquery标准的绑定方式
* jq对象.事件方法(回调函数)；
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
2. on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
* 注意：on/off方式绑定事件，传入的事件名是字符串
3. 链式绑定事件：在事件的后面再调用方法。绑定的多个事件都会生效。
* eg：$("#one").mouseover(function{alert("鼠标来了")}).mouseout(function(){alert("鼠标走了")});
4. 事件切换：toggle
* jq对象.toggle(fn1,fn2...)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能（导入该插件就可以了）。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
* 注意：
1. 所有事件绑定的函数种可以使用内置对象this，但是this是js对象，而不是jQuery对象，需要$(this)转换一下
2. 同一个对象前后两次设置同一个点击事件，是前后设置的都生效，而不是后面会覆盖前面。
4. Plug
插件：增强JQuery的功能
* 实现方式：
1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能.用该方法定义函数后，所有的jQuery对象都可以直接用方法
* 举例：
//1. 定义方法
$.fn.extend({
oneMethod: function(){
alert("123");
}
});
//jQuery对象调用定义的方法
$("#id").oneMethod();
2. $.extend(object)
* 增强JQeury对象自身的功能,直接可以用jQuery即$直接调用该方法
* 举例：
//1. 定义方法
$.extend({
oneMethod: function(){
alert("123");
}
});
//jQuery对象调用定义的方法
$.oneMethod();
Third, the case
1. QQ expression package selection
- demand:
- Click qq expression, append it to the floor box
- Click on the floor bar qq expression, the expression will be deleted
- effect:
- html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情选择</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.emoji{margin:50px;}
ul{overflow: hidden;}
li{float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img{ cursor: pointer; }
</style>
<script>
/*需求：
1. 点击qq表情，将其追加到发言框中
2. 点击发言栏的qq表情，该表情会被删除
*/
$(function () {
//1. 添加qq表情
$("li>img").click(function () {
//2. 获取要添加的表情对象的拷贝
var element = $(this).clone(true);
//3. 清除拷贝的表情对象的点击事件
element.off("click");
//4. 在拷贝的表情对象添加到发言栏之前，绑定点击删除事件
element.click(function () {
$(this).remove();
});
//5. 添加拷贝的表情对象
$(".word").append(element); //this是js对象，使用clone()方法需要先转为jQuery对象
});
});
</script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt="" /></li>
<li><img src="img/02.gif" height="22" width="22" alt="" /></li>
<li><img src="img/03.gif" height="22" width="22" alt="" /></li>
<li><img src="img/04.gif" height="22" width="22" alt="" /></li>
<li><img src="img/05.gif" height="22" width="22" alt="" /></li>
<li><img src="img/06.gif" height="22" width="22" alt="" /></li>
<li><img src="img/07.gif" height="22" width="22" alt="" /></li>
<li><img src="img/08.gif" height="22" width="22" alt="" /></li>
<li><img src="img/09.gif" height="22" width="22" alt="" /></li>
<li><img src="img/10.gif" height="22" width="22" alt="" /></li>
<li><img src="img/11.gif" height="22" width="22" alt="" /></li>
<li><img src="img/12.gif" height="22" width="22" alt="" /></li>
</ul>
<p class="word">
<strong>请发言：</strong>
<img src="img/12.gif" height="22" width="22" alt="" />
</p>
</div>
</body>
</html>
2. Draw
- demand
- When initialization interface, "click stop" button is not available, "click start" button can be used
- Click the "Click Start" button to start rolling small frame picture; at this time "Click Start" button is not available, "click stop" button can be used
- Click the "Click Stop" button, a small picture frame stop scrolling, and the current picture is displayed in a large picture frame in an animated fashion.
- effect:
- html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script>
/*
需求：
1. 初始化界面时，“点击停止”按钮不可使用，“点击开始”按钮可以使用
2. 点击“点击开始”按钮，小相框开始滚动图片；此时“点击开始”按钮不可使用，“点击停止”按钮可以使用
3. 点击“点击停止”按钮，小相框停止滚动，并将当前的图片以动画的方式显示在大相框中。
*/
//准备一个一维数组，装用户的像片路径
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; //循环计数器对象
var img; //小相框滚动停止后的图片路径
//入口函数
$(function () {
// 1. 设置“点击停止”按钮不可使用
$("#stopID").prop("disabled", true);
// 2. 为“点击开始”按钮绑定事件
$("#startID").click(function () {
//2.3 设置按钮是否可以点击
$("#startID").prop("disabled", true);
$("#stopID").prop("disabled", false);
//2.1 获取小相框元素
var img1 = $("#img1ID");
//2.2 设置循环计算器来滚动图片
startID = setInterval(function () {
var index = Math.floor(Math.random()*7); //生成图片的序号
img = imgs[index];
img1.prop("src", img); //加载图片
}, 20);
});
// 3. 为“点击结束”按钮绑定事件
$("#stopID").click(function () {
//3.1 清除循环计数器
clearInterval(startID);
//3.2 将小相框中的图片以动画的形式显示在大相框中
$("#img2ID").prop("src", img).hide().show("slow");
//3.3 设置按钮是否可以点击
$("#startID").prop("disabled", false);
$("#stopID").prop("disabled", true);
});
});
</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"
οnclick="imgStart()">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px"
οnclick="imgStop()">
</body>
</html>
3. Auto show and hide advertising
- demand:
- After one second advertisement in the form of animation
- After three seconds the ad disappears
Note: The first should be the one second timer, the second timer is 4 seconds, only to meet the requirements of intermediate stops 3 seconds
- effect:
- html code:
<!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.2.1.min.js"></script>
<script>
/*
需求：
1. 1秒后广告以动画的形式出现
2. 3秒后广告自动消失
*/
$(function () {
//1. 1秒后广告以动画的形式出现
setTimeout(function () {
$("#ad").show("slow");
}, 1000);
//2. 3秒后广告自动消失
setTimeout(function () {
$("#ad").hide("slow");
}, 4000);
});
</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>
