1.事件流:
(1)事件捕获
(2)处于目标阶段
(3)事件冒泡
2.事件对象
对每一个事件都会回调函数,会有一个默认的事件对象,就是this
event.target 触发的目标对象
event.type 事件类型
event.keyCode 键码
3.事件冒泡
event.stopPropagation() 阻止冒泡
event.preventDefault() 阻止默认事件
return false 以上两者包括
4.事件代理
自己做不了的事件,交给别人去做 原理 :运行冒泡的机制
现有的 p 以及 未来后添加的p 都能做事件操作
$("div").on("click","p",fn) 后边第一个 执行的事件,第二个需要可以实现的对象 最后就是函数啦
5.事件
click 单击事件
dblclick 双击事件
mouseenter 经过父元素
mouseleave 离开父元素
mouseout 经过父元素和子元素
mouseover 离开父元素和子元素
mousedown
mouseup
change()
select()
6.位置信息
width()
height()
innerWidth() 不包含border
outerWidth() 包含border
offset().top 对象
top: 获取的是到页面顶部的距离 这里可以用到百度的下滑鼠标显示固定搜索 对象是decument
scrollTop() 动态监听鼠标的滚动
jQueryUI的例子
引用网址 :http://www.jqueryui.org.cn/
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery UI 排序（Sortable） - 默认功能</title> 6 <link rel="stylesheet" href="./css/jquery-ui.css"> 7 <script src="./js/jquery-1.9.1.js"></script> 8 <script src="./js/jquery-ui.js"></script> 9 <link rel="stylesheet" href="./css/style.css"> 10 <style> 11 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 12 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 13 #sortable li span { position: absolute; margin-left: -1.3em; } 14 </style> 15 <script> 16 $(function() { 17 $( "#sortable" ).sortable(); 18 $( "#sortable" ).disableSelection(); 19 }); 20 </script> 21 </head> 22 <body> 23 24 <ul id="sortable"> 25 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 26 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 27 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 28 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 29 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 30 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 31 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 32 </ul> 33 34 35 </body> 36 </html>
animate的例子
引用网址:https://github.com/daneden/animate.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!--1.这部是必须添加的引用源文件--> 7 <link rel="stylesheet" 8 href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> 9 <style> 10 #box{ 11 width:200px; 12 height: 200px; 13 line-height: 200px; 14 text-align: center; 15 background-color: green; 16 color: #fff; 17 position: absolute; 18 top: 1000px; 19 } 20 </style> 21 </head> 22 <body style="height: 2000px;"> 23 <!--2.这里是通过定义好的方法直接调用--> 24 <div id="box" class="animate bounceOutLeft">wusir</div> 25 <script src="jquery.js"></script> 26 27 <!-- <h2 class="animated fadeOutRight delay-2s">alex</h2> --> 28 <script> 29 30 $(function () { 31 // $('#box').addClass('animated bounceOutLeft'); 32 33 $(document).scroll(function () { 34 35 console.log($(this).scrollTop()); 36 37 var scrollTopHeight = $(this).scrollTop(); 38 39 if (scrollTopHeight >= 1000) { 40 $('#box').addClass('animated slideInDown'); 41 42 } 43 }) 44 }); 45 </script> 46 </body> 47 </html>
响应式页面@media
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <!--@这两步数是准备条件--> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 7 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> 8 9 <title></title> 10 <!-- [if lt IE 9]> 11 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 12 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 13 [endif] --> 14 <style> 15 <!--这里min-width是在宽度不超过1200px的情况下不改变,一旦超过变成红色 16 max-width是指在宽度不超过1200px下,发生改变,超过不改变--> 17 @media screen and (min- 1200px){ 18 body{ 19 background-color: red; 20 } 21 } 22 23 @media screen and (min- 800px) and (max- 1200px){ 24 body{ 25 background-color: green; 26 } 27 } 28 29 @media screen and (max- 800px) { 30 body{ 31 background-color: yellow; 32 } 33 } 34 </style> 35 </head> 36 <body> 37 38 </body> 39 </html>
移动端的单位介绍 rem r root 是相对定位的 随着宽高改变而改变 需要引入 文件名为resize.js 的文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <!--这里是固定的 需要引入通过rem来设置相对定位--> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> 7 <title>移动端布局</title> 8 <style type="text/css"> 9 10 /*rem root*/ 11 *{ 12 padding: 0; 13 margin: 0; 14 } 15 ul{ 16 list-style: none; 17 } 18 .clearfix:after{ 19 content: ''; 20 display: block; 21 clear: both; 22 } 23 html{ 24 width: 100%; 25 height: 100%; 26 /*font-size: 100px;*/ 27 /*1rem = 10px*/ 28 overflow: hidden; 29 } 30 body{ 31 width: 100%; 32 height: 100%; 33 overflow: auto; 34 } 35 .head-box{ 36 width: 100%; 37 height: 0.4rem; 38 background-color: red; 39 position: absolute; 40 top: 0; 41 left: 0; 42 } 43 .list{ 44 margin-top: 0.4rem; 45 font-size: 16px; 46 } 47 48 .list .item{ 49 float: left; 50 width: 1rem; 51 height: 1rem; 52 border: 1px solid black; 53 margin: 0.1rem; 54 55 } 56 57 58 59 </style> 60 </head> 61 <body> 62 63 <header class="head-box"> 64 <div class="head-top"></div> 65 <div class="head-bottom"></div> 66 </header> 67 68 <ul class="list clearfix"> 69 <li class="item">1111111</li> 70 <li class="item"></li> 71 <li class="item"></li> 72 <li class="item"></li> 73 <li class="item"></li> 74 <li class="item"></li> 75 <li class="item"></li> 76 <li class="item"></li> 77 <li class="item"></li> 78 <li class="item"></li> 79 <li class="item"></li> 80 <li class="item"></li> 81 <li class="item"></li> 82 <li class="item"></li> 83 <li class="item"></li> 84 <li class="item"></li> 85 </ul> 86 87 </body> 88 <script src="./js/resize.js"></script> 89 </html>
1 /*获得页面宽度后动态修改html上的fontsize 2 * 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html 3 * 的font-size会变为20px，即 1rem = 100px 1px=0.05rem 4 * 所以设置元素尺寸的时候，如果测量设计稿 15px 则需设置尺寸为 (0.05*15)rem = 0.75rem 5 */ 6 7 8 !(function(doc, win) { 9 var docEle = doc.documentElement, 10 evt = "onorientationchange" in window ? "orientationchange" : "resize", 11 fn = function() { 12 var width = docEle.clientWidth; 13 console.log(width) 14 width && (docEle.style.fontSize = 20 * (width / 320) + "px"); 15 }; 16 17 win.addEventListener(evt, fn, false); 18 doc.addEventListener("DOMContentLoaded", fn, false); 19 20 }(document, window));
bootstrap的例子
将屏幕分为12块
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> 12 13 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> 14 <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> 15 <!--[if lt IE 9]> 16 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 17 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <div class="container"> 22 <div class="row"> 23 <!--col-lg-3大 col-md-4中 col-sm-6小--> 24 <!--后面的数字是屏幕总共分为12个竖线 一个div占3个--> 25 <div class="col-lg-3 col-md-4 col-sm-6"> 26 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 27 </div> 28 <div class="col-lg-3 col-md-4 col-sm-6"> 29 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 30 </div> 31 <div class="col-lg-3 col-md-4 col-sm-6"> 32 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 33 </div> 34 <div class="col-lg-3 col-md-4 col-sm-6"> 35 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 36 </div> 37 </div> 38 </div> 39 40 <!-- <div class="container-fluid"> 41 <h1>你好，世界！</h1> 42 </div> --> 43 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 44 <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> --> 45 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 46 <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> --> 47 </body> 48 </html>