jQuery 的运行机制（How jQuery Works）

原文地址：http://learn.jquery.com/about-jquery/how-jquery-works/

 

linkjQuery: 基础知识

这是一个基本的教程，旨在帮助您开始使用jQuery，如果你还没有设置一个测试页面，通过创建下面的HTML页面开始： 
  1. <!doctype html>  
  2. <html>  
  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"></script>  
  10.     <script>  
  11.    
  12.     // Your code goes here.  
  13.    
  14.     </script>  
  15. </body>  
  16. </html>  
<script>元素的src属性必须指向jQuery的副本。从jQuery的下载页面下载jQuery的副本然后将jquery.js文件和你的HTML文件存储在同一目录下。
 

文档就绪后启动代码

为了确保他们的代码在浏览器加载文档完成后运行，许多JavaScript程序员将他们的代码放在onload函数中： 
  1. window.onload = function() {  
  2.    
  3.     alert( "welcome" );  
  4.    
  5. }  
然而，直到所有图像（包括横幅广告）都加载完毕，代码才会运行。为了文件一准备好就开始操作代码，jQuery有一个声明被称为ready事件（Ready Event）： 
  1. $( document ).ready(function() {  
  2.    
  3.     // Your code here.  
  4.    
  5. });  
例如在ready事件（Ready Event）中，你可以添加一个单击处理程序的链接： 
  1. $( document ).ready(function() {  
  2.    
  3.     $( "a" ).click(function( event ) {  
  4.    
  5.         alert( "Thanks for visiting!" );  
  6.    
  7.     });  
  8.    
  9. });  

保存你的HTML文件，然后在浏览器中重新加载测试页面。点击链接应该先出现一个警示弹出窗口，然后继续按照默认行为导航到 http://jquery.com。
对于点击和大多数其他事件，您可以通过在事件处理程序中调用event.preventDefault()来阻止默认行为： 
  1. $( document ).ready(function() {  
  2.    
  3.     $( "a" ).click(function( event ) {  
  4.    
  5.         alert( "As you can see, the link no longer took you to jquery.com" );  
  6.    
  7.         event.preventDefault();  
  8.    
  9.     });  
  10.    
  11. });  

完整例子

下面的例子说明了上面讨论的点击处理的代码，直接嵌入在HTML<BODY>。需要注意的是在实践中，通常将你的代码放在单独的JS文件中并且加载到页面上<script>元素的src属性中。
 
  1. <!doctype html>  
  2. <html>  
  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"></script>  
  10.     <script>  
  11.    
  12.     $( document ).ready(function() {  
  13.         $( "a" ).click(function( event ) {  
  14.             alert( "The link will no longer take you to jquery.com" );  
  15.             event.preventDefault();  
  16.         });  
  17.     });  
  18.    
  19.     </script>  
  20. </body>  
  21. </html>  

添加和删除一个HTML类

重要提示：您必须将剩下的jQuery的例子放在ready事件里面，这样当文档准备工作时你的代码会执行。
另一个常见任务是添加和删除一个类。
首先，在文档的<head>标签中添加一些样式信息，像这样：
 
  1. <style>  
  2. a.test {  
  3.     font-weight: bold;  
  4. }  
  5. </style>  
下一步，在脚本中添加 .addClass()声明： 
  1. <span style="font-size:10px;">$( "a" ).addClass( "test" );</span>  
现在所有的<a>都是粗体的。
删掉现有的类，用.removeClass(): 
  1. <span style="font-size:10px;">$( "a" ).removeClass( "test" );</span>  

特殊效果

jQuery也提供一些提供方便的效果，以帮助您使您的网站中脱颖而出。例如，如果您创建一个click处理函数： 
  1. <span style="font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"></span><pre code_snippet_id="220643" snippet_file_name="blog_20140306_10_1835179" name="code" class="javascript" style="color: rgb(51, 51, 51); line-height: 22.5px;">$( "a" ).click(function( event ) {  
  2.    
  3.     event.preventDefault();  
  4.    
  5.     $( this ).hide( "slow" );  
  6.    
  7. });</pre>  
  8. <pre></pre>  
  9. <pre></pre>  
  10. <pre></pre>  
当点击的时候这个链接缓慢的消失。

回调函数

与其他编程语言不同，JavaScript能让你的函数顺利通过在之后执行。一个回调是一个函数，它作为一个参数来传递给另一个函数，在它的父函数执行完成后执行该回调函数。
回调函数很特殊因为他们需要耐心等待直到他们的父函数执行完成。与此同时，浏览器可以执行其他函数或者做其他工作。
使用回调函数，很重要的一点是知道他们怎么传给他们的父函数的。
 

无参数回调

如果回调没有参数，你可以这样传： 
  1. $.get( "myhtmlpage.html", myCallBack );  

当 $.get() 调用myhtmlpage.html,它会执行myCallBack()函数。
   注意：这里的第二和参数是一个简单的函数名（但不是作为字符串，没有括号）

有参数回调

执行带参数的回调函数可能会很棘手。
错误的： 
  1. $.get( "myhtmlpage.html", myCallBack( param1, param2 ) );  

这段函数不会执行。
失败的原因是代码会立即执行myCallBack（参数1，参数2），然后将myCallBack（）的返回值作为第二个参数传给为$.get（）方法。我们实际上想传送函数myCallBack()而不是myCallBack（参数1，参数2）的返回值（这可能是也可能不是一个函数）。因此，如何传送myCallBack（）包括它的参数？

正确的：
推迟执行myCallBack（）与它的参数，你可以使用一个匿名函数来包装。注意，这里使用的function（）{。匿名函数只做了一件事情：调用myCallBack（），用参数1和参数2的值。 
  1. $.get( "myhtmlpage.html", function() {  
  2.    
  3.     myCallBack( param1, param2 );  
  4.    
  5. });  

当$.get（）方法完成获取网页myhtmlpage.html，它会执行匿名函数，这个匿名函数会执行myCallBack（参数1，参数2）。
posted @ 2014-03-07 12:04  web8  阅读(491)  评论(0)  编辑  收藏  举报