第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)
<ul>
<li></li>
<li></li>
<li></li>
<ul>
从文档中可以看出,.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