jQYERY
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>
