1.jquery位置信息
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box{ 12 width: 100px; 13 height: 100px; 14 background-color: red; 15 padding: 10px; 16 border: 1px solid yellow; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="box"></div> 22 <script src="jquery.js"></script> 23 <script> 24 $(function () { 25 1.获取内容的宽高 26 console.log($(".box").width()); 27 28 $(".box").delay(2000).hide(3000); 29 2.两秒过后宽度变为400 30 setTimeout(function (argument) { 31 $(".box").width(400) 32 },2000); 33 3.innerWidth() 内部的宽高 包含padding部分 34 console.log($(".box").innerWidth()) 35 4.同样方法可以改变宽度 36 $(".box").innerWidth(500) 37 5.outerWidth()方法外部的宽高 padding+border 38 console.log($(".box").outerWidth()) 39 6.offset().top 方法检查的到顶部的距离 40 console.log($('.box').offset().top); 41 scroll()方法检查得是页面滚动的距离 42 $(docunmet).scroll(function () { 43 console.log($(this).scrollTop()) 44 }) 45 }) 46 </script> 47 </body> 48 </html>
2.回到顶部方法
利用scrollTop 设置属性 0
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .fixTop{ 12 position: fixed; 13 bottom: 20px; 14 right: 30px; 15 width: 100px; 16 height: 100px; 17 line-height: 100px; 18 text-align: center; 19 color: #fff; 20 background-color: #000; 21 cursor: pointer; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>1</li> 28 <li>1</li> 29 <li>1</li> 30 <li>1</li> 31 <li>1</li> 32 <li>1</li> 33 <li>1</li> 34 <li>1</li> 35 <li>1</li> 36 <li>1</li> 37 <li>1</li> 38 <li>1</li> 39 <li>1</li> 40 <li>1</li> 41 <li>1</li> 42 <li>1</li> 43 <li>1</li> 44 <li>1</li> 45 <li>1</li> 46 <li>1</li> 47 <li>1</li> 48 <li>1</li> 49 <li>1</li> 50 <li>1</li> 51 <li>1</li> 52 <li>1</li> 53 <li>1</li> 54 <li>1</li> 55 <li>1</li> 56 <li>1</li> 57 <li>1</li> 58 <li>1</li> 59 <li>1</li> 60 <li>1</li> 61 <li>1</li> 62 <li>1</li> 63 <li>1</li> 64 <li>1</li> 65 <li>1</li> 66 <li>1</li> 67 <li>1</li> 68 <li>1</li> 69 <li>1</li> 70 <li>1</li> 71 <li>1</li> 72 <li>1</li> 73 <li>1</li> 74 <li>1</li> 75 <li>1</li> 76 <li>1</li> 77 <li>1</li> 78 79 </ul> 80 <div class="fixTop">回到顶部</div> 81 <script src="jquery.js"></script> 82 <script> 83 84 $(function () { 85 $('.fixTop').click(function(event) { 86 //自定义动画效果animate是scrollTop设置为0 87 $('html,body').animate({ 88 'scrollTop':0 89 90 },1000) 91 92 93 }); 94 95 }); 96 </script> 97 </body> 98 </html>
3.事件流
所谓事件流类似于鼠标单击的时候有三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn">按钮</button> 9 <script> 10 11 12 13 // document.getElementById('btn').addEventListener('click', function () { 14 // alert(1); 15 // },false); 16 17 18 window.onload = function(){ 19 20 var oBtn = document.getElementById('btn'); 21 22 //1. 23 document.addEventListener('click',function(){ 24 console.log('document处于事件捕获阶段'); 25 }, true); 26 27 //2. 28 document.documentElement.addEventListener('click',function(){ 29 console.log('html处于事件捕获阶段'); 30 }, true); 31 //3 32 document.body.addEventListener('click',function(){ 33 console.log('body处于事件捕获阶段'); 34 }, true); 35 //4. 36 oBtn.addEventListener('click',function(){ 37 console.log('btn处于事件捕获阶段'); 38 }, true); 39 // 40 oBtn.addEventListener('click',function(){ 41 console.log('btn处于事件冒泡阶段'); 42 }, false); 43 //5 44 document.body.addEventListener('click',function(){ 45 console.log('body处于事件冒泡阶段'); 46 }, false); 47 //6 48 document.documentElement.addEventListener('click',function(){ 49 console.log('html处于事件冒泡阶段'); 50 }, false); 51 //7. 52 document.addEventListener('click',function(){ 53 console.log('document处于事件冒泡阶段'); 54 }, false); 55 56 57 58 59 60 61 62 }; 63 64 65 66 67 </script> 68 </body> 69 </html>
3.1关于事件冒泡的问题
由于存在冒泡事件 会使得单击事件由于冒泡问题传递的顺序性发生不受控制的事情,面对这种方法可以使用阻止冒泡来解决更准确的问题
event.preventDefault()阻止默认事件
event.stopPropagation() 阻止冒泡
event.target 事件对象 同 this
这里
event.target 如果没有事件冒泡，指的点击的目标对象
可以显示点击的目标对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .father{ 8 width: 300px; 9 height: 300px; 10 background-color:red; 11 } 12 </style> 13 </head> 14 <body> 15 16 <div class="father"> 17 <button class="child">按钮</button> 18 </div> 19 <script src="jquery.js"></script> 20 <script> 21 22 $(function () { 23 //默认传过来 一个event 24 $('.child').click(function(event) { 25 console.log('按钮被点击了'); 26 console.log(this); 27 // console.log(event.currentTarget); 28 console.log(event.target); 29 //阻止事件冒泡 30 // event.stopPropagation() 31 32 33 }); 34 35 $('.father').mouseenter(function(event) { 36 console.log(event.type) 37 console.log('父盒子被点击了'); 38 console.log(this); 39 // console.log(event.currentTarget); 40 console.log(event.target); 41 // event.stopPropagation() 42 }); 43 44 $('body').click(function(event) { 45 console.log(this); 46 // console.log(event.currentTarget); 47 48 // event.target 如果没有事件冒泡，指的点击的目标对象 49 console.log(event.target); 50 console.log('body被点击了') 51 }); 52 }) 53 </script> 54 </body> 55 </html>
4.换肤
利用return false 来解决
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .fu{ 12 position: fixed; 13 top:0; 14 left: 0; 15 width: 100%; 16 height: 320px; 17 background-color: red; 18 display: none; 19 } 20 .up{ 21 cursor: pointer; 22 } 23 </style> 24 </head> 25 <body style="height: 2000px"> 26 <!-- <form action=""></form> --> 27 <a href='http://www.baidu.com' id="changeFu">换肤</a> 28 <div class="fu"> 29 <ul> 30 <li> 31 <a href="javascript:void(0)">女神降临</a> 32 </li> 33 <li> 34 <a href="javascript:void(0)">明星</a> 35 </li> 36 37 38 <span class="up">收起</span> 39 40 </ul> 41 </div> 42 <script src="jquery.js"></script> 43 <script> 44 $(function () { 45 $('#changeFu').click(function(e) { 46 //阻止当前默认的事件 47 // e.preventDefault(); 48 // //阻止冒泡 49 // e.stopPropagation(); 50 console.log(111); 51 $('.fu').slideDown(1000); 52 // 相当于即阻止了默认事件 又阻止冒泡 53 return false; 54 }); 55 56 $('body,.up').click(function(event) { 57 $('.fu').slideUp(1000); 58 }); 59 60 61 $('.fu ul li a').click(function(event) { 62 event.stopPropagation(); 63 $(this).css('color','green').parent('li').siblings('li').find('a').css('color','blue'); 64 }); 65 66 $('.fu').click(function(event) { 67 return false; 68 }); 69 }); 70 </script> 71 </body> 72 </html>
5.事件代理 on
比如在以后项目中新添加一个a 标签在原有ul基础上,可是原来的功能并不适用于这里,所以用到事件代理on()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item1"> 10 <a href="javascript:void(0);" id="a">alex</a> 11 </li> 12 <!-- <li>武sir</li> --> 13 </ul> 14 <script src="jquery.js"></script> 15 <script> 16 $(function () { 17 18 19 // 绑定事件 如果使用事件委托的方式 以后的页面不会出现问题 20 21 // 第二个参数 表示的是后代的选择器 22 23 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 24 25 // 26 // $('ul').on('click','a',function () { 27 // alert(this.innerText); 28 // }); 29 $('ul li').click(function () { 30 alert(this.innerText); 31 }); 32 33 34 35 $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>'); 36 37 }) 38 </script> 39 </body> 40 </html>
6.合成事件
作用:减少代码量
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <button>按钮</button> 9 <script src="jquery.js"></script> 10 <script> 11 $(function () { 12 13 14 /* 15 $('button').mouseenter(function(event) { 16 17 }); 18 19 $('button').mouseleave(function(event) { 20 21 }); 22 */ 23 24 $('button').hover(function() { 25 /* Stuff to do when the mouse enters the element */ 26 console.log('进入'); 27 }, function() { 28 /* Stuff to do when the mouse leaves the element */ 29 console.log('离开'); 30 }); 31 }) 32 </script> 33 </body> 34 </html>
7.单双击事件 需要控制器来分离单双击
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <button>按钮</button> 9 <script src="jquery.js"></script> 10 <script> 11 $(function () { 12 var time = null; 13 // 单双击 的时间 间隔 是300ms 14 // 如果解决 单双击冲突 当做作业 15 $('button').click(function(event) { 16 //由于定时器响应时间300 只需要加上一次性控制器就可以啦 17 clearTimeout(time); 18 time = setTimeout(function () { 19 console.log('单机了'); 20 },300); 21 // 定时器 300ms 一次性定时器 22 }); 23 24 $('button').dblclick(function(event) { 25 //这里需要清空上一次的延迟 26 clearTimeout(time); 27 console.log('双机了'); 28 }); 29 }) 30 </script> 31 </body> 32 </html>
8.聚焦和失焦
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="text"> 9 <script src="jquery.js"></script> 10 <script> 11 12 //加载页面的时候 获取到焦点 13 $('input[type=text]').focus(); 14 15 16 $('input[type=text]').focus(function () { 17 console.log(1); 18 }); 19 20 21 $('input[type=text]').keydown(function(event) { 22 console.log(1); 23 24 /* 25 console.log(event.keyCode); 26 switch (expression) { 27 case label_1: 28 // statements_1 29 break; 30 case label_1: 31 // statements_1 32 break; 33 case label_1: 34 // statements_1 35 break; 36 case label_1: 37 // statements_1 38 break; 39 default: 40 // statements_def 41 break; 42 } 43 */ 44 45 46 }); 47 48 49 50 $('input[type=text]').change(function(event) { 51 console.log(1111); 52 }); 53 54 $('input[type=text]').select(function(event) { 55 console.log(1111); 56 }); 57 58 59 60 </script> 61 </body> 62 </html>