正文
jquery 第四章
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1.回顾
节点.append(内容)
节点.prepend(内容)
节点.remove()
节点.attr("属性","值")
节点.css("样式","值")
节点.html() .text .val()
2.本章目标
掌握jquery 的事件与动画
3.事件
在某个特定的条件下会被执行的一段代码,事件通常用来与用户进行交互
常用的事件:load,click,focus(获取焦点),blur(失去焦点),mousrmove()
4.加载事件
js:window.onload=function(){
//逻辑代码
}
//在jquery1.8+杯废弃
jquery:
$(window).load(function(){
//逻辑代码
})
$(document).ready(function(){
//逻辑代码
})
$().ready(function(){
//逻辑代码
})
$(function(){
//逻辑代码
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
window.onload=function(){
alert(1)
}
$(document).ready(function(){
alert(2) }) $().ready(function(){ alert(3)
}) $(function(){ alert(4)
})
</script>
</head>
<body> </body>
</html>
加载事件
5.绑定事件
绑定单个事件:
对象.bind("事件名",function(){
//逻辑代码
})
绑定多个事件
//第一种写法
对象.bind("事件1",function(){
//逻辑代码
})
.bind("事件2",function(){
//逻辑代码
})
//第二种写法
对象.bind({
"事件1":function(){},
"事件1":function(){}
...........
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//当鼠标光标在input 框内时 获取焦点事件
$("input").bind("focus",function(){
$(this).css("border","1px red solid")
})
//当鼠标光标在div区域时,设置背景颜色
$("div").bind("mousemove",function(){
$(this).css("background-color","midnightblue")
})
.bind("mouseout",function(){
$(this).css("background-color","white")
})
//不使用bind 直接通过事件函数
// $("div").mousemove(function(){
// $(this).css("background-color","midnightblue")
// }).mouseout(function(){
// $(this).css("background-color","white")
// })
}) //卸载事件
// $("div").unbind("mousemove")
</script>
</head>
<body>
<input />
<div style="width:200px; height: 100px; border: 1px solid cadetblue;"> </div>
</body>
</html>
绑定事件
完成:可编辑的表格 (鼠标移动离开变色) 代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 480px;
height: 200px;
border-collapse: collapse;
}
table tr th,td{
border-collapse: collapse;
border: 1px solid darkgoldenrod;
text-align: center;
}
table td{
width:160px;
height: 50px;
} </style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//当焦点在某个td单元格中时有背景颜色
$(function(){
$("table tr td").bind("mousemove",function(){
$(this).css("background-color","darkseagreen")
})
.bind("mouseout",function(){
$(this).css("background-color","white")
})
//单元格的单击事件
.bind("click",function(){
//如果当时td中的内容是input时,不执行后面代码
if($(this).children().is("input")){
return
}
//获取单元格的原始数据
var txt=$(this).text()
//创建输入框对象
var input=$("<input />")
//给输入框添加原始数据
input.val(txt)
//设置输入框,高和单元格一样
input.width($(this).width())
input.height($(this).height())
//清除单元格数据
$(this).text("")
input.appendTo($(this))
//为输入框绑定失去焦点事件
input.bind("blur",function(){
var inputValue=input.val()
input.parent().text(inputValue)
input.remove()
})
}) }) </script>
</head>
<body>
<table border="" >
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>张三</td><td>男</td><td>20</td></tr>
<tr><td>李四</td><td>男</td><td>21</td></tr>
<tr><td>王五</td><td>男</td><td>22</td></tr>
</table>
</body>
</html>
可编辑的表格
6.事件的冒泡
页面元素有嵌套时,若同时绑定了同一事件,触发事件时,会由里到外依次执行
解决方案:
方案一:只需要在事件代码中添加:return false;
方案二:需要在事件函数中添加参数(event),代码末尾中添加:event.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
alert("div")
})
$("span").click(function(event){
alert("span")
event.stopPropagation()
})
$("p").click(function(){
alert("p")
return false
}) }) </script>
</head>
<body>
<div id="">
div内容
<span id="">
span内容
<p>p内容</p>
</span>
</div>
</body>
</html>
事件的冒泡 以及停止事件冒泡
7.模拟触发事件
不需要用户主动触发,就可以执行的事件
比如:按钮通常都需要用户点击时才会执行一段代码,使用模拟触发事件,用户不需要点击按钮,也能执行单击事件代码
语句:
对象.trigger("事件/自定义事件")
8.合成事件
把多个事件合到一起执行
鼠标的移入移出
对象.hover(function(){},function(){})
模拟鼠标的悬停事件,鼠标悬停时触发第一个函数执行,鼠标离开触发第二个函数执行
鼠标的单击合成
对象.toggle(function(){},function(){},...............)
模拟鼠标的单击合成事件,鼠标单击一次执行第一个函数,鼠标点击两次执行第二个函数............
在jquery1.8之后被弃用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("span").hover(function(){
$(this).next("ul").show(3000) },function(){
$(this).next("ul").hide(3000)
})
}) </script>
</head>
<body>
<div id="div1">
<span>操作1</span>
<ul>
<li>添加</li>
<li>修改</li>
<li>删除</li>
</ul>
</div>
<div id="div2">
<span>操作2</span>
<ul>
<li>添加</li>
<li>修改</li>
<li>删除</li>
</ul> </div>
</body>
</html>
合成事件
9.动画
hide([毫秒数]),show([毫秒数]) 显示隐藏动画
slideUp([毫秒数]),slideDown([毫秒数])向上,向下滑动
fadeIn([毫秒数]),fideOut([毫秒数]) 淡入淡出动画
自定义动画
对象.animate({"属性1":"值1","属性2","值2".......},毫秒数,[回调函数])
注意:如果想要使用left,right,top,bottom属性,需要把元素设置为position,absolute或者relative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #B8860B;
position: relative;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("div").fadeIn(1000)
.animate({left:"500px",top:"200px"},3000)
.animate({left:"1000px",top:"0px"},3000)
.fadeOut(1000)
}) </script>
</head>
<body>
<div> </div>
</body>
</html>
完成div的v字型移动
10.停止动画
对象.stop()
判断动画是否处于活动中
if(对象.is(":animated")){
}
案例 实现 正方形放大缩小效果(随时都能停止)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #B8860B;
position: relative; }
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
if(!$("div").is(":animated")){
$("div").animate({width:"200px",height:"200px"},5000)
}
})
$("button:last").click(function(){
if($("div").is(":animated")){
$("div").stop()
}
}) })
</script>
</head>
<body>
<button>开始</button>
<button>停止</button>
<div> </div>
</body>
</html>
正方形放大缩小效果
作业1
使用jquery实现光棒效果
hover()事件
addClass()和removeClass()方法
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>光棒效果</title>
<style type="text/css">
table{
width: 640px;
border-collapse: collapse;
}
table th{
border: solid 1px black;
background-color: gray;
}
table td{
border: solid 1px black;
}
.highlight{
background-color: Highlight;
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//实现光影效果
$("#tbStudent tr:gt(0)").hover(function(){
$(this).addClass("selected"); },function(){
$(this).removeClass("selected") })
//实现全选反选代码如下
$("#chkAll").click(function(){
var checkedVal = $(this).attr("checked",true);
$(".chk").each(function(){
var subchecked = $(this).attr("checked",false)
if(subchecked != checkedVal)
$(this).click(); }) })
})
</script>
</head>
<body>
<table id="tbStudent">
<tr>
<th><input type="checkbox" name="chkAll" id="chkAll" value="" />全选</th>
<th>学号</th><th>姓名</th><th>年龄</th><th>性别</th>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="chk" value="" /></td>
<td>s001</td><td>张三</td><td>22</td><td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox1" value="" /></td>
<td>s002</td><td>李四</td><td>22</td><td>女</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox2" value="" /></td>
<td>s003</td><td>王五</td><td>22</td><td>女</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox3" value="" /></td>
<td>s004</td><td>马六</td><td>22</td><td>男</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" id="Checkbox4" value="" /></td>
<td>s005</td><td>李七</td><td>22</td><td>女</td>
</tr>
</table>
</body>
</html>
光棒效果
总结 全选反选 出了一点问题 改进了!!!!加了true 和false
作业2
使用jquery实现流式导航菜单
主要知识点
.slideDown()方法 和slideUp()方法
代码如下()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#menuBar li").click(function(){
var url=$(this).find("a").attr("href");
document.location.href=url;
})
$("#menuBar li").hover(function(){
$(this).find(".menuInfo").slideDown();
},function(){
$(this).find(".menuInfo").slideUp();
})
})
</script> <style>
#menuBar{
width: 730px;
height: 45px;
background: #000;
color: #fff;
font-family: arial;
font-size: 14px;
margin-top: 20px;
}
#menuBarHolder{
list-style-type: none;
display: block;
}
.firstchild{
border-left: 1px solid #ccc;
}
#container{
margin-top: 10px;
}
#menuBar li{
float: left;
padding: 15px;
height: 16px;
width: 75px;
border-right: 1px solid #ccc;
}
#menuBar li a{
color: #fff;
text-decoration: none;
letter-spacing: -1px;
font-weight: bold;
}
.menuHover{
background-color: #999;
}
.menuInfo{
cursor: hand;
background-color: #000;
color: #fff;
width: 74px;
font-size: 11px;
height: 100px;
padding: 3px;
display: none;
position: absolute;
margin-left: -15px;
margin-top: -10px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-bottomleft:5px; }
h1{
font: 50px normal georgia,"times new roman",times,serif;
color: #111;
margin: 0;
text-align: 5px 0;
}
h1 small{
font: 0.2em normal verdana,arial,helvetica,sans-serif;
text-transform: uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
</style>
</head> <body>
<center>
<div id="container">
<h1>流式导航菜单<br></h1>
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild">
<a href="JavaScript:#">首页</a>
<div class="menuInfo">这是首页的链接</div>
</li>
<li>
<a href="JavaScript:#">公司简介</a>
<div class="menuInfo">公司成立于2005年...</div>
</li>
<li>
<a href="JavaScript:#">公司产品</a>
<div class="menuInfo">为有志进入IT行业的人提供优质服务</div>
</li>
<li>
<a href="JavaScript:#">个性化服务</a>
<div class="menuInfo">提供个性化的，对学习与帮助</div>
</li>
<li>
<a href="JavaScript:#">关于</a>
<div class="menuInfo">版权所有</div>
</li>
<li>
<a href="JavaScript:#">联系我们</a>
<div class="menuInfo">来吧，加入我们吧</div>
</li>
</ul>
</div>
</div>
</center>
</body> </html>
流式导航菜单
全选反选 简洁代码
简洁
作业3
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>广告图片的幻灯片播放效果</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var slideShow = $(".slideShow"), //获取div
ul = slideShow.find("ul"),
nav = slideShow.find(".nav span"), //获取按钮
oneWidth = ul.find("li").eq(0).width(),
timer = null,
iNow = 0;
slideShow.hover(function() {
clearInterval(timer); }, autoPlay); nav.on("click", function() { //添加点击按钮 var me = $(this),
index = me.index();
iNow = index;
ul.animate({
"left": -oneWidth * iNow, });
nav.removeClass("active");
me.addClass("active"); }); autoPlay(); function autoPlay() {
timer = setInterval(function() {
iNow++; if(iNow > nav.length - 1) {
iNow = 0; }
nav.eq(iNow).trigger("click"); }, 2000); } });
</script>
<style>
* {
margin: 0;
padding: 0
} ul,
ol {
list-style: none;
} .slideShow {
position: relative;
margin: 100px auto;
height: 400px;
width: 500px;
overflow: hidden;
} .slideShow ul {
position: relative;
width: 2000px;
} .slideShow ul li {
float: left;
width: 340px
} .slideShow .nav {
text-align: center;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
line-height: 18px;
} .slideShow .nav span {
-webkit-user-select: none;
user-select: none;
float: left;
cursor: pointer;
border-radius: 9px;
display: inline-block;
width: 18px;
height: 18px;
background: rgba(0, 0, 0, 0.7);
margin-left: 2px;
color: #fff;
opacity: 0.5;
} .slideShow .nav span.active {
opacity: 1;
}
</style>
</head> <body>
<div class="slideShow">
<ul>
<li>
<a href="#"><img src="./img/01.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/02.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/03.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/04.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/05.jpg" alt=""></a>
</li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body> </html>
实现广告图片的幻灯片播放效果
(百度的,)
