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="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>
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({"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>
(百度的,)