第1节事件
第3章
1）单个事件,比如单击事件

<span id="text1"> text1</span>

<script>
   $(function () {
   $("#text1").click(function () {
   //假设我单击文本时，文本放大
   $(this).css("font-size","50px")
   });
})

   </script>

2）绑定多个事件,比如鼠标移入移出事件

<span id="text1"> text1</span>

<script>
   $(function () {
   $("#text1").mouseover(function () {
   //鼠标移入
   $(this).css("font-size","50px")
   });
   $("#text1").mouseout(function () {
   //鼠标移出
   $(this).css("font-size","12px")
   });
   })

   </script>

学生练习上述例子

3）键盘事件
<form>
用户名:<input type="text" name="username"/>

密码:<input type="password" name="userpwd"/>

<span id="content"></span>
</form>

$(function () {
//键盘事件
   $("input[type='password']").keyup(function (event) {
$("#content").append("keyup");
alert(event.keyCode);
if(event.keyCode=='13'){//按下回车键
alert("回车键被按下");
}
})
 })

键盘码参考网址：https://www.cnblogs.com/shyy/archive/2012/04/09/2453029.html

65-90 字母 a-z
48-57 主键盘数字0-9
96-105 小键盘上的0-9
13 回车

学生练习上述例子

4)获取和失去焦点事件

<form>
用户名:<input type="text" name="username"/><br>
密码:<input type="password" name="userpwd"/><br>
<span id="content"></span>
</form>

<script>
    $(function () {
        //键盘事件
       $("input[name='username']").blur(function () {
           alert("失去焦点事件");
       })
        $("input[name='username']").focus(function () {
            alert("获取焦点事件");
        })
    })
</script>

第2次课
学生练习
1）用户名输入框获取焦点时，改变文本框背景色
关键代码

    $("input[name='username']").focus(function () {
            $(this).css("background-color","green")
        })

2）制作导航特效
初始状态下，只显示“购物特权”主菜单，点击“购物特权”后显示其下的列表内容，鼠标移动到子菜单上时，子菜单添加背景色

参考代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<title>左导航特效</title>
<style type="text/css">
 *{
    margin: 0px;
    padding: 0px;
    font-size: 12px;
}
#nav .navsBox{
    width: 160px;
}
#nav .navsBox .firstNav{
    height:45px;
    line-height:45px;
    background-color:#EBEBEB;
    border-left:10px solid #FE705C;
    padding-left:20px;
    width:130px;
    font-weight:bold;
    cursor: pointer;
}
#nav .navsBox ul{
    display:none;
    list-style:none; 
}
#nav .navsBox ul li{
    display:block;
    height:45px;
    line-height:45px;
    padding-left:70px;
    width:90px; 
    background-color:#F2F2F2;
    background-position:33px 7px;
    background-repeat:no-repeat;
}

#nav .navsBox ul li.jedh{
    background-image:url("./images/huan.gif");
}
#nav .navsBox ul li.jlbbyk{
    background-image:url("./images/you.gif");
}
#nav .navsBox ul li.jwljb{
    background-image:url("./images/gouwu.gif");
}
#nav .navsBox ul li.mrljb{
    background-image:url("./images/meiri.gif");
}
#nav .navsBox ul li.vipjtj{
    background-image:url("./images/zhe.gif");
}
#nav .navsBox ul li.onbg{
    background-color:#F9DBD1;
}

#nav .navsBox ul li a{
    color:#000;
    text-decoration:none;   
}


</style>

<script type="text/javascript">
$(document).ready(function () {
    $("#nav .navsBox .firstNav").click(function(){
        var $list = $("#nav .navsBox ul");
        if($list.css("display") == "block")
            $list.css("display","none");
        else
            $list.css("display","block");
    });
$("#nav .navsBox ul li").mouseover(function(){
    $(this).addClass("onbg");  //为该元素添加类样式.onbg
}).mouseout(function(){
    $(this).removeClass("onbg");//为该元素移除类样式.onbg
});
});
</script>
</head>
<body>
<div id="nav"> 
     <div class="navsBox">
        <div class="firstNav">购物特权</div> 
        <ul>
            <li class="jedh"><a href="#">全额兑换</a></li>
            <li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
            <li class="jwljb"><a href="#">购物领金币</a></li>
            <li class="mrljb"><a href="#">每日领金币</a></li>
            <li class="vipjtj"><a href="#">VIP阶梯价</a></li>
        </ul>
     </div> 
</div>
</body>
</html>

第三次课

事件绑定解绑
绑定语法
jquery1.7之后新增加的绑定事件方式，其中的event和fn是必选项，其他二项可选

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

从文档中可以看出，.on方法比.bind方法多一个参数'selector'

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
  /* $("#btn1").on("click",function () {
alert("form提交");

$("#btn1").off();
})*/
  /* $("#btn1").bind("click",function () {
alert("form提交");
$("#btn1").unbind();
})*/
  $("#btn1").one("click",function () {
alert("form提交");
})
})
</script>
</head>
<body>
用户注册:<br>
<form id="form1" action="#" method="post">
用户名：<input type="text" name="username"/><br>
密码：<input type="text" name="username"/><br>
<input type="button" value="提交" id="btn1" onclick="javascript:document.form1.submit();"/>
</form>
</body>
</html>

注意：如下代码会导致解绑失效，分析原因是因为submit()会触发页面刷新，将来用ajax可以避免这种问题

    $("#btn1").bind("click",function () {
            alert("form提交");
            $("#form1").submit();
            $("#btn1").unbind();
        })

同时绑定多个事件：json对象写法

   $("#btn1").on({
            mouseover: function () {
                $("ul").css("display", "none");
            },
            mouseout: function () {
                $("ul").css("display", "block");
            }
        });

学生练习：
1）制作团购网主导航
需求说明
鼠标移过导航项时，鼠标所处导航项改变背景图像

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<style>
#nav{
list-style: none;
height: 40px;
line-height: 40px;
color:#fff;
}
#nav li{
display: block;
float: left;
padding:0px 30px;
background-color: green;
}
.on{
background-color: darkgreen;
}
</style>
<script>
/*$(function(){
$("#nav li").on({
mouseover: function () {
$(this).css("background-color", "darkgreen");
},
mouseout: function () {
$(this).css("background-color", "green");
   }
});
});*/

$(function(){
$("#nav li").hover(
function () {
$(this).css("background-color", "darkgreen");
},
function () {
$(this).css("background-color", "green");
   }
 );
});

</script>
</head>
<body>
<ul id="nav">
<li>首页</li>
<li>团购</li>
<li>美食</li>
</ul>
</body>
</html>

第4节课

动画

show([speed,[easing],[fn]])
speed取值("slow","normal", or "fast")或毫秒数
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
显示/隐藏/切换

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
//隐藏
$("#hide").on("click",function () {
$("#p1").hide();
})
//显示
$("#show").on("click",function () {
$("#p1").show();
})
//切换
$("#toggle").on("click",function () {
$("#p1").toggle();
})
})
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button>
</body>
</html>

淡入/淡出/切换
fadeIn([speed],[easing],[fn])

<style>
#p1{
width: 400px;
height: 400px;
background-color: darkgreen;
}
</style>
<script>
$(function () {
//隐藏
$("#fadeOut").on("click",function () {
$("#p1").fadeOut(3000);
})
//显示
$("#fadeIn").on("click",function () {
$("#p1").fadeIn(3000,"linear");
})
//切换
$("#fadeToggle").on("click",function () {
$("#p1").fadeToggle(3000);
})
})
</script>

<body>
<div id="p1">如果点击“隐藏”按钮，我就会消失。</div>
<button id="fadeIn" type="button">淡入</button>
<button id="fadeOut" type="button">淡出</button>
<button id="fadeToggle" type="button">切换</button>
</body>
</html>

展开/收起/切换
slideUp([speed,[easing],[fn]])

<style>
#p1{
width: 400px;
height: 400px;
background-color: darkgreen;
}
</style>
<script>
$(function () {
//收起
$("#slideUp").on("click",function () {
$("#p1").slideUp(3000);
})
// 展开
$("#slideDown").on("click",function () {
$("#p1").slideDown(3000,"linear");
})
//切换
$("#slideToggle").on("click",function () {
$("#p1").slideToggle(3000);
})
})
</script>
</head>
<body>
<div id="p1">如果点击“隐藏”按钮，我就会消失。</div>
<button id="slideUp" type="button">收起</button>
<button id="slideDown" type="button">展开</button>
<button id="slideToggle" type="button">切换</button>
</body>
</html>

第5，6节
学生练习：
1、制作FAQ列表页
需求说明：鼠标移过列表项时，背景变为绿色圆角矩形，单击列表标题时，展开节点，再次单击收缩节点
作业：
课后作业1,2,3

第3章事件与动画（6）

动画

猜你喜欢

第3章 事件与动画（6）

动画

猜你喜欢

第3章事件与动画（6）