jQuery的事件和动画
今日日志
最后修改日期：2020-4-27
学习内容
- jQuery的事件
- jQuery的动画效果
练习内容
-
手风琴效果练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} .aq,.nav{ float: left; } .nav{ } .aq{ width: 954px; height: 600px; background-color: #F7FBF1; padding-left: 50px; } div.nav>.nav_title{ width: 200px; height: 40px; padding-top: 16px; background-color: #E3E3E3; color: #333333; font: 15px "microsoft yahei"; font-weight: 600; text-align: center; border-top: 1px solid #E3E3a3; } div.nav>.nav_conts{ display: none; padding: 10px 0px; text-align: center; width: 200px; background-color: #F6F6F6; } div.aq>.aq_answer{ width: 954px; height: 57px; border-bottom: dashed #E3E3E3 1px; font-family: "microsoft yahei"; font-size: 14px; font-weight: 600; color: #333333; } div.aq>.aq_conts{ display: none; width: 954px; font-family: "microsoft yahei"; font-size: 12px; margin: 0px 20px 20px; padding: 0px 0px 0px 20px; } </style> <script src="js/jquery-2.2.4.min.js"></script> <script> var flag = 0; $(function(){ $(".nav_title").click(function(){ $(this).next().slideToggle(function(){ }) .siblings(".nav_conts").slideUp(); }); $(".aq_answer").click(function(){ $(this).next().slideToggle() .siblings(".aq_conts").slideUp(); }); }) </script> </head> <body> <div class="nav"> <div class="nav_title">投保帮助</div> <div class="nav_title">支付指南</div> <div class="nav_conts"> <ul> <li>信用卡快捷</li> <li>储存卡快捷</li> <li>信用卡分期支付</li> </ul> </div> <div class="nav_title">还原常见问题</div> <div class="nav_title">资料下载</div> <div class="nav_title">关于我们</div> <div class="nav_conts"> <ul> <li>公司简介</li> <li>联系我们</li> <li>友情提醒</li> </ul> </div> <div class="nav_title">关于平安好车主</div> </div> <div class="aq"> <div class="aq_answer">1.支付成功后多久能拿到正式保单？</div> <div class="aq_conts"> <p>A、车险网上支付成功后，座席会在24小时内主动联系您核实地址后安排配送。一般1到2个工作日便可收到正式纸质保单。</p> <p>B、其他保险产品在支付成功后</p> </div> <div class="aq_answer">2.没有开通网上银行，如何付款？</div> <div class="aq_conts"> <p>荐您使用信用卡或储蓄卡的快捷支付，无需开通网银</p> <p>如您附近有拉卡拉，也推荐您使用拉卡拉完成付款</p> </div> <div class="aq_answer">3.银行显示已扣除，但没有生成保单？</div> <div class="aq_answer">4.网上银行祝福需要注意什么？</div> <div class="aq_answer">5.为何我们推荐使用信用卡快捷支付？</div> <div class="aq_answer">6.信用卡快捷支付不用输密码就可以支付，安全吗？</div> </div> </body> </html>
易错点和经验
-
在jQuery中，如果“同一个”jQuery对象有N个操作，我们就可以使用像上面这种“链式操作”的方式。
例如
$(function () { $("h3").mouseover(function () { $("p").css("display","block"); }); $("h3").mouseout(function () { $("p").css("display", "none"); }); }) //使用链式操作后的等效代码 $(function () { $("h3").mouseover(function () { $("p").css("display","block"); }).mouseout(function () { $("p").css("display", "none"); }); }) -
margin：0 auto;可以居中 行内元素的行高为line-height
jQuery中的事件
页面载入事件
- 和js中的window.onload相对应的有$(document).ready()方法
window.onload和$(document).ready()的区别
- $(document).ready()可以提高页面的响应速度，仅仅是DOM元素加载完成就可以执行，而window.onload除了DOM元素加载完成外还需要等待所有外部文件加载完成才可以执行。
- window.onload方法只能调用1次，如果多次调用，则执行最后一个window.onload方法中的代码。$(document).ready()可以多次执行。
$(document).ready()的四种写法
$(document).ready(functin(){
//第一种写法
})
jQuery(document).ready(function(){
//第二种写法
})
$(function(){
//第三种写法
})
jQuery(function(){
//第四种写法
})
鼠标事件
| 鼠标事件 | 说明 |
|---|---|
| click | 鼠标单击事件 |
| dbclick | 双击事件 |
| mouseover | 移入事件 |
| mouseout | 移出事件 |
| mousemove | 移动事件 |
| mousedown | 按下事件 |
| mouseup | 松开事件 |
单击事件
$("a").click(function(){
//函数内容
})
- 在jQuery中任何元素都可以添加单击事件
鼠标移入和移出事件
mouseover和mouseout
- 鼠标进入选中元素或者子元素时都会触发。
- 鼠标离开选中元素或者子元素时都会触发。
mouseenter和mouseleave
- 鼠标进入选中元素时才会触发，进入子元素不触发。
- 鼠标离开选中元素时才会触发，离开子元素不触发。
键盘事件
keypress事件
检测按键实例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function () {
$(window).keypress(function (event) {
document.write("你输入的字符是：" + String.fromCharCode(event.which));
});
})
</script>
</head>
<body>
</body>
</html>
- 其中event.which检测按下哪个键返回该键的ASCII码
- fromCharCode将ASCII吗转换为字符
keydown事件
- 和keypress的区别是keydown是键盘按下的一瞬间触发，两个事件都会触发但keydown的触发优先级高于keypress
- keydowm能够检测a~z的字符和fn等功能按键，keypress只能触发字符按键
keyup事件
-
键盘在松开后触发的事件
-
常用于密码强度检测，在字符输入后进行密码长度和强度的判断。
字符串长度判断
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txt").keyup(function () {
var str = $(this).val().toString();
$("#num").text(str.length);
})
})
</script>
</head>
<body>
<input id="txt" type="text"/>
<div>输入字符长度为：<span id="num">0</span></div>
</body>
</html>
表单事件
focus()和blur()
对表单的聚焦和失焦事件
适用的表单类型：
- 单行文本框text；
- 多行文本框textarea；
- 下拉列表select；
onchange()
表单文本字符串变化事件
适用的表单类型
- 单行文本框text；
- 多行文本框textarea；
- 下拉列表select；
select()
select事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。
使用的表单类型
- 单行文本框text；
- 多行文本框textarea；
滚动事件
$(window).scroll(fn)//用法
scrollTop();//取得垂直滚动条距离顶部的位置
scrollTop(value);//设置垂直滚动条距离顶部的位置
scrollLeft();//取得水平滚动条距离左侧的位置
scrollLeft(value);//设置水平滚动条距离左侧的位置
固定栏目
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{height:1800px;}
#box1,#box2
{
display:inline-block;
width:100px;
height:100px;
}
#box1
{
background-color:Red;
}
#box2
{
background-color:Orange;
position:fixed;
}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function () {
//获取box2距离顶部的距离
var top = $("#box2").offset().top;
//根据滚动距离判断定位
$(window).scroll(function () {
//当滚动条距离大于box2距离顶部的距离时，设置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//当滚动条距离小于于box2距离顶部的距离时，设置相对定位
else {
$("#box2").css({ "position": "relative" });
}
});
})
</script>
</head>
<body>
<div id="box1"></div><br />
<div id="box2"></div>
</body>
</html>
回顶部特效
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
height:1800px;
}
#back-to-top
{
position:fixed;
right:50px;
bottom:50px;
display:none; /*设置默认情况下元素为隐藏状态*/
width:40px;
height:40px;
color:white;
background-color:#45B823;
font-family:微软雅黑;
font-size:15px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function () {
/*根据滚动距离判断按钮是否显示或隐藏*/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#back-to-top").css("display","inline-block");
}
else {
$("#back-to-top").css("display","none");
}
});
/*实现点击滚动回顶部*/
$("#back-to-top").click(function () {
$("html,body").scrollTop(0);
});
})
</script>
</head>
<body>
<div id="back-to-top">回到顶部</div>
</body>
</html>
绑定/解绑事件
$().on("事件类型" , "事件函数")；//使用on方法绑定事件和用给元素添加基本事件等效
//但是on方法可以给还未创建的元素进行事件绑定，因为可能会在某些函数内创建本不存在元素。
$().off("事件类型")//将元素的事件解绑，可以解绑绑定的事件也可以解绑使用基本事件添加的事件
合成事件
语法
$().hover(fn1,fn2)
//用hover代替鼠标移入移出两个方法，其中fn1为移入的方法，fn2为移出的方法
- 其中在CSS的伪类选择器中的:hover只能更换CSS的样式
一次事件
$().one("事件类型", fn)//给选定的元素绑定只执行一次的事件
jQuery动画
显示与隐藏
$().hide(speed,callback)//隐藏
$(),show(speed,callback)//显示
$().toggle()//切换
$().toggle(speed , callback);
淡入与淡出
$().fadeIn(speed , callback)//淡出
$().fadeOut(speed , callback)
$().fadeToggle()//切换
$().fadeTo(speed , opacity , callback)//切换透明度
滑入与滑出
$().slideDown(speed , callback)
$().slideUp(speed , callback)//一般需要一个标志变量判断元素当前的状态来确定是滑入还是滑出
slideToggle(speed , callback)
自定义动画
$().animate(params , speed , callback)
//其中params是{"属性1":"属性值1","属性2":"属性值2",……, "属性n":"属性值n"}
//当parms的属性值前加+=时动画的属性值变化是累加值而不是最终值
//当需要改变颜色时需要加入jquery.color.js包否则jQuery不能识别颜色属性
//其中的回调函数在动画变化之后执行，可以用来给变化后的元素添加样式
队列动画
$().animate().animte()…….animte()//其中的anime()可以使用以上任意的动画效果，动画效果按照顺序显示。
动画的停止
语法
$().stop(clearQueue,gotoEnd)//连个参数类型都为布尔值，分别为是否清空队列，是否跳转到最后一个动画
| 参数取值 | 说明 |
|---|---|
| stop() | 等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行 |
| stop(true) | 等价于stop(true,false)，停止所有动画，包括当前执行的动画 |
| stop(true,true) | 停止所有动画，但是允许执行当前动画 |
| stop(false,true) | 停止“当前执行”这段动画，然后调到最后一个动画，并且执行最后一个动画 |
- 其中stop(true,true)将队列切断后跳转到最后的动画执行，但当前动画就是最后的动画所以将当前动画执行完毕。
动画延迟
$().delay(speed)//放在队列动画中延迟
76
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
