jQuery ,animate ,

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>

jQuery的小栗子

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>

animate

响应式页面@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>

@media

移动端的单位介绍 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>

移动端单位rem

 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));

resize.js

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>

css样式