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>

 

posted @ 2013-11-19 19:40  菜菜小三  阅读(197)  评论(0)  编辑  收藏  举报