事件的简单学习
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
- 如何绑定事件
-
直接在html标签上,指定事件的属性(操作),属性值就是js代码
- 事件:onclick— 单击事件
-
通过js获取元素对象,指定事件属性,设置一个函数
-
事件监听机制
- 概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
- 常见的事件:
-
点击事件:
- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
- onblur:失去焦点
- onfocus:元素获得焦点。
-
加载事件:
- onload:一张页面或一幅图像完成加载。
-
鼠标事件:
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
-
键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。 -
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
-
表单事件:
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
-
JQuery
-
动画
- 三种方式显示和隐藏元素
-
默认显示和隐藏方式
- show([speed,[easing],[fn]])
speed:动画的速度,三个与选项"slow" “normal” "fast"或者放毫秒值
easing:指定切换效果,swing:先慢,再快,再慢 linear 匀速
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]])
-
- 三种方式显示和隐藏元素
-
遍历
1.js的遍历方法
for(初始化值;循环条件;步长(i++))
break 跳出for循环 continue 跳出本次循环
2.jq的遍历方式
1.jq.each(callback)
返回值
true 相当于结束本次循环
flase 相当于跳出循环
2.for…of():jquery3.0 以上可以用 -
事件绑定
1.jquery标准绑定方式
js onclick click() onblur blur()
jq对象.事件方法(回调函数)
2.on/off 绑定事件/接触绑定事件
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
*off()不写参数会怎样 解除该事件源上所有事件
3.toogle 切换事件 -
插件:增强JQuery的功能
- 实现方式:
- $.fn.extend(object)
- 增强通过Jquery获取的对象的功能 $("#id")
- $.extend(object)
- 增强JQeury对象自身的功能 $/jQuery
- $.fn.extend(object)
- 实现方式:
案例(广告的显示与隐藏)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#content{width:100%;height:300px;background:#999}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/*需求:1.页面加载完成,2秒后显示广告
3秒之后,广告隐藏
分析:分析:
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
$(function(){
//定义定时器,调用adShow方法,2秒后执行一次
setTimeout(adShow,2000);
//定义定时器,调用adHide方法,5秒后执行一次
setTimeout(adHide,5000);
})
//显示广告
function adShow(){
//获取广告div,调用显示方法
$("#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/7.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>