jQuery学习
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习相关的知识，希望对你有一定的参考价值。
事件
on方法可以将一个事件绑定在jQuery对象上，当你的操作触发了这些事件时，便会调用你所绑定的函数。
例如，给某个超链接绑定点击事件。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <script src="./js/jquery-1.12.0.js"></script> 4 <script> 5 $(document).ready(function(){ 6 var a = $(‘a‘); 7 a.on(‘click‘, function(){ 8 alert(‘Hello Word‘); 9 }); 10 }); 11 </script> 12 <title>Event</title> 13 </head> 14 <body> 15 <a href="#0">Click</a> 16 </body>
除了用on()以外，还可以直接用click来绑定点击事件。
<script> $(document).ready(function(){ var a = $(‘a‘); a.click(function(){ alert(‘Hello‘); }); }); </script>
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
其中，ready仅作用于document对象上，在页面DOM树构建完成后触发。
正如上述代码所示，除了能够用on绑定ready事件外，ready事件也可以像click一样被简写。甚至能被更简单的写为：
1 <script> 2 $(function(){ 3 var a = $(‘a‘); 4 a.click(function(){ 5 alert(‘Hello‘); 6 }); 7 }); 8 </script>
而且这种写法更为常见。
如果想获得事件的其他内容，可以在function传入变量e来获取。
取消绑定：
和on()相反的是，off()可以帮我们取消jQuery对象上的事件绑定，
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <script src="./js/jquery-1.12.0.js"></script> 4 <script> 5 $(function(){ 6 var a = $(‘a‘); 7 a.click(function(){ 8 alert(‘Hello‘); 9 }); 10 var bt = $(‘button‘); 11 bt.click(function(){ 12 a.off(‘click‘); 13 alert(‘event_off‘); 14 }); 15 }); 16 </script> 17 <title>Event</title> 18 </head> 19 <body> 20 <a href="#0">Click</a> 21 <button>event_off</button> 22 </body>
点击Button时取消了链接的点击事件，再点击链接不会出现提示框。
实际上，这里我们将a链接上的点击事件绑定函数全部取消了，如果只想取消某一个函数，那么我们在绑定时，就不能够采用匿名函数。并且在取消时，将函数对象也作为参数传入。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <script src="./js/jquery-1.12.0.js"></script> 4 <script> 5 $(function(){ 6 var click_f2 = function(){ 7 alert(‘hello 2‘); 8 }; 9 var a = $(‘a‘); 10 a.click(function(){ 11 alert(‘Hello‘); 12 }); 13 a.click(click_f2); 14 15 var bt = $(‘button‘); 16 bt.click(function(){ 17 a.off(‘click‘,click_f2); 18 alert(‘click_f2 off‘); 19 }); 20 }); 21 </script> 22 <title>Event</title> 23 </head> 24 <body> 25 <a href="#0">Click</a> 26 <button>event_off</button> 27 </body>
这段代码中，我们只取消绑定了click_f2，而Hello仍然正常提示。同时我们可以发现绑定事件响应的先后顺序是根据绑定的先后来的。
事件通常是由用户操作触发，如果我们希望代码可以直接触发事件，则可用trigger()，这样能够避免我们写很多重复的代码。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <script src="./js/jquery-1.12.0.js"></script> 4 <script> 5 $(function(){ 6 var a = $(‘a‘); 7 a.click(function(){ 8 alert(‘Hello‘); 9 }); 10 11 var bt = $(‘button‘); 12 bt.click(function(){ 13 a.trigger(‘click‘); 14 }); 15 }); 16 </script> 17 <title>Event</title> 18 </head> 19 <body> 20 <a href="#0">Click</a> 21 <button>event_off</button> 22 </body>
当我们点击按钮时，我们在代码内部触发了a的点击事件，因此也能弹出Hello。
动画：
我们已经知道了通过show()和hide()方法，可以让一个jQuery对象消失或者隐藏。但是当我们给方法传入一个参数时，页面就能呈现渐变的效果，一般传入的参数是毫秒数，但是‘slow‘和‘fast‘也能作为参数传入。
show()和hide()是对象由左上角逐渐收起或是展开，而slideUp()和slideDown()则是垂直方向的收起和展开。
fadeIn()和fadeOut()表示渐入渐出的效果。
同时，jQuery还通过animate()支持自定义动画效果。给animate传入最终的CSS样式和变化的时间，则可以在指定时间内渐变成最后的样式。同时，animate还能够传入回调函数，在动画结束后被调用。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <title>Animate</title> 4 <script src=‘./js/jquery-1.12.0.js‘></script> 5 <script> 6 $(function(){ 7 var bt = $(‘button‘); 8 var div = $(‘#test-animate‘); 9 bt.click(function(){ 10 div.animate({ 11 width: ‘256px‘, 12 height: ‘256px‘ 13 },3000,function(){ 14 alert(‘animate done‘); 15 }); 16 }); 17 }); 18 </script> 19 </head> 20 <body> 21 <div id=‘test-animate‘></div> 22 <button>change CSS</button> 23 </body>
以上是关于jQuery学习的主要内容，如果未能解决你的问题，请参考以下文章