jQuery 学习笔记 How jQuery Works
本学习笔记来自jQuery 官方文档
Launching Code on Document Ready
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 </head> 7 <body> 8 <a href="http://jquery.com/">jQuery</a> 9 <script src="jquery.js" type="text/javascript" charset="utf-8" async defer></script> 10 <script> 11 window.onload = function() 12 { 13 alert("Welcome!"); 14 } 15 </script> 16 </body> 17 </html>
这里使用js自己的window.onload,但有一个缺点就是,只有在该页面所有的元素都导入成功后才能执行代码,而jQuery的ready event 可以避免
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 </head> 7 <body> 8 <a href="http://jquery.com/">jQuery</a> 9 <script src="jquery.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(document).ready(function() 12 { 13 alert("Welcome"); 14 }); 15 </script> 16 </body> 17 </html>
下面给<a>添加click时间处理,使点击完链接后弹出提示框
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 </head> 7 <body> 8 <a href="http://jquery.com/">jQuery</a> 9 <script src="jquery.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(document).ready(function() 12 { 13 $("a").click(function(event) 14 { 15 alert("Welcome!");
event.preventDefault(); 16 }); 17 }); 18 </script> 19 </body> 20 </html>
添加红色的代码会阻止事件的默认行为,在这里就是不打开链接
Adding and Removing an HTML Class
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 <style type="text/css"> 7 a.test 8 { 9 font-weight: bold; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="http://jquery.com/">jQuery</a> 15 <script src="jquery.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 $(document).ready(function() 18 { 19 $("a").click(function(event) 20 { 21 alert("Welcome!"); 22 event.preventDefault(); 23 }); 24 25 $("a").addClass('test'); 26 }); 27 </script> 28 </body> 29 </html>
addClass用来添加CSS 类
removeClass用来移除CSS类
Special Effects
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 <style type="text/css"> 7 a.test 8 { 9 font-weight: bold; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="http://jquery.com/">jQuery</a> 15 <script src="jquery.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 $(document).ready(function() 18 { 19 $("a").click(function(event) 20 { 21 event.preventDefault(); 22 $(this).hide("slow"); 23 }); 24 25 $("a").addClass('test'); 26 27 28 }); 29 </script> 30 </body> 31 </html>
$(this).hide("slow"); 产生慢慢消失的效果
Callbacks and Functions
CallBack 的原理就不用介绍了
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery GetStart Demo</title> 6 <style type="text/css" media="screen"> 7 a.test 8 { 9 font-weight: bold; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="http://jquery.com/">jQuery</a> 15 <script type="text/javascript" src="jquery.js"></script> 16 <script type="text/javascript"> 17 $(document).ready(function() 18 { 19 $("a").click(function(event) 20 { 21 event.preventDefault(); 22 $(this).hide("slow"); 23 }); 24 25 $("a").addClass("test"); 26 27 28 29 var myCallBack = function() 30 { 31 alert("I'm back!"); 32 }; 33 $.get("getStart.html",myCallBack); 34 }); 35 </script> 36 </body> 37 </html>
在这里会在得道getStart.html 后执行 myCallBack 函数,
但是如果myCallBack 函数有参数,则必须使用匿名内部函数,而不能直接使用带参数的函数
如下
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery GetStart Demo</title> 6 <style type="text/css" media="screen"> 7 a.test 8 { 9 font-weight: bold; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="http://jquery.com/">jQuery</a> 15 <script type="text/javascript" src="jquery.js"></script> 16 <script type="text/javascript"> 17 $(document).ready(function() 18 { 19 $("a").click(function(event) 20 { 21 event.preventDefault(); 22 $(this).hide("slow"); 23 }); 24 25 $("a").addClass("test"); 26 27 28 29 var myCallBack = function(name) 30 { 31 alert("I'm back! " + name); 32 }; 33 $.get("getStart.html",function() 34 { 35 myCallBack("lishan"); 36 }); 37 38 }); 39 </script> 40 </body> 41 </html>