jQuery中的事件
页面加载
原生DOM中的事件具有页面加载的内容onload事件，在jQuery中同样提供了对应的内容ready()函数。
ready与onload之间的区别：
| onload | ready |
|---|---|
| 没有简写方式 | 具有简写方式 |
| 当HTML页面所有内容加载完毕后才执行onload | 当DOM节点加载完毕后就执行ready |
| 一个HTML页面只能编写一个onload | 一个HTML页面允许同时编写多个ready |
ready()的编写方式：
- $(document).ready(function(){});
- $().ready(function(){});
- $(function(){});
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>onload事件机制</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 <script> 8 /* 9 window.onload = function(){ 10 var user = document.getElementById("user"); 11 }*/ 12 /*$(document).ready(function(){ 13 console.log($("#user").val()); 14 });*/ 15 /*$().ready(function(){ 16 console.log($("#user").val()); 17 });*/ 18 $(function(){ 19 console.log($("#user").val()); 20 }); 21 </script> 22 </head> 23 <body> 24 <input type="text" id="user" value="张无忌"> 25 </body> 26 </html>
事件绑定
jQuery中提供了事件绑定与解绑机制，类似于原生DOM中的addEventListener()方法。
jQuery的事件绑定：
- 单事件绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>012_实现伸缩二级菜单</title> 6 <script src="js库/jquery-1.11.3.js"></script> 7 <style> 8 li { 9 list-style: none; 10 } 11 12 li span { 13 padding-left: 20px; 14 cursor: pointer; 15 } 16 17 .open { 18 background: url("img/minus.png") no-repeat center left; 19 } 20 21 .closed { 22 background: url("img/add.png") no-repeat center left; 23 } 24 25 .show { 26 display: block; 27 } 28 29 .hide { 30 display: none; 31 } 32 </style> 33 </head> 34 <body> 35 <ul class="tree"> 36 <li> 37 <span class="open">考勤管理</span> 38 <ul class="show"> 39 <li>日常考勤</li> 40 <li>请假申请</li> 41 <li>加班/出差</li> 42 </ul> 43 </li> 44 <li> 45 <span class="closed">信息中心</span> 46 <ul class="hide"> 47 <li>通知公告</li> 48 <li>公司新闻</li> 49 <li>规章制度</li> 50 </ul> 51 </li> 52 <li> 53 <span class="closed">协同办公</span> 54 <ul class="hide"> 55 <li>公文流转</li> 56 <li>文件中心</li> 57 <li>内部邮件</li> 58 <li>即时通信</li> 59 <li>短信提醒</li> 60 </ul> 61 </li> 62 </ul> 63 64 <script> 65 $("span").click(function(){ 66 if($(this).hasClass("open")){ 67 $(this).attr("class", "closed"); 68 $(this).next().attr("class", "hide"); 69 }else{ 70 $(this).attr("class", "open"); 71 $(this).next().attr("class", "show"); 72 } 73 }); 74 </script> 75 </body> 76 </html>
- 多事件绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>015_图片提示</title> 6 <!-- 引入jQuery --> 7 <script src="js库/jquery-1.11.3.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body { 10 margin: 0; 11 padding: 40px; 12 background: #fff; 13 font: 80% Arial, Helvetica, sans-serif; 14 color: #555; 15 line-height: 180%; 16 } 17 18 img { 19 border: none; 20 } 21 22 ul, li { 23 margin: 0; 24 padding: 0; 25 } 26 27 li { 28 list-style: none; 29 float: left; 30 display: inline; 31 margin-right: 10px; 32 border: 1px solid #AAAAAA; 33 } 34 35 /* tooltip */ 36 #tooltip { 37 position: absolute; 38 border: 1px solid #ccc; 39 background: #333; 40 padding: 2px; 41 display: none; 42 color: #fff; 43 } 44 </style> 45 </head> 46 <body> 47 <h3>有效果：</h3> 48 <ul> 49 <li><a href="img/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/apple_1.jpg" alt="苹果 iPod"/></a></li> 50 <li><a href="img/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 51 <li><a href="img/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="img/apple_3.jpg" alt="苹果 iPhone"/></a></li> 52 <li><a href="img/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="img/apple_4.jpg" alt="苹果 Mac"/></a> 53 </li> 54 </ul> 55 <script type="text/javascript"> 56 var x = 10, y = 20, title; 57 $("ul>li>a[class=tooltip]").mouseover(function(event){ 58 title = this.title; 59 this.title = ''; 60 // 获取大图片的文件路径 61 var src = this.href; 62 // 创建用于显示大图片的元素 63 var $div = $("<div id='tooltip'><img src='" + src + "'><br>" + title + "</div>"); 64 // 添加到页面中 65 $("body").append($div); 66 // 调整位置 -- 鼠标坐标值 67 $("#tooltip").css({ 68 "top": event.pageY + y, 69 "left": event.pageX + x 70 }).show(); 71 }).mousemove(function(event){ 72 $("#tooltip").css({ 73 "top": event.pageY + y, 74 "left": event.pageX + x 75 }); 76 }).mouseout(function(){ 77 this.title = title; 78 $("#tooltip").remove(); 79 }); 80 </script> 81 </body> 82 </html>
事件对象
什么是事件对象
事件是一种JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。
事件对象的常用属性
- srcElement/target : 事件源对象
- eventPhase : 事件所处的传播阶段
- clientX/offsetX/pageX/screenX/x：事件发生的X坐标
- clientY/offsetY/pageY/screenY/y：事件发生的Y坐标
- which/keyCode/charCode : 键盘事件中按下的按键
- button：鼠标哪个按键被按下了
- cancelBubble ：是否取消事件冒泡
- returnValue : 是否阻止事件默认行为
阻止默认行为
所谓默认行为，就是指页面中默认具有的一些行为，例如表单提交、连接跳转等效果。
event.preventDefault();return false;
与其他JS库共存
- 第一种方式
1 /* 2 * 先引入其他JS库,后引入jQuery 3 * * "$"符号属于其他JS库 4 * 解决冲突 5 * * jQuery中 - "$"符号指代jQuery 6 * * jQuery中不再使用"$"符号 7 */ 8 jQuery(document).ready(function(){ 9 console.log("this is ready."); 10 });
- 第二种方式
1 jQuery(document).ready(function($){ 2 // 在当前函数中使用"$"符号 - jQuery 3 }); 4 // "$"符号 - 其他JS库
- 第三种方式
1 (function($){ 2 // "$"符号 - jQuery 3 })(jQuery); 4 // "$"符号 - 其他JS库
- 第四种方式
jQuery.noConflict(); jQuery(function($){ console.log($("p").text()); });
- 第五种方式
1 jQuery.noConflict(); 2 (function($){ 3 console.log($("p").text()); 4 })(jQuery);