jQuery是如何工作的？

对jQuery以及如果你想要使用jQuery需要知道的一些概念的简单介绍。

原文链接： http://docs.jquery.com/Tutorials:How_jQuery_Works

作者：John Resig

jQuery:基础

这是一个基础性的介绍，目的是为了帮助你开始使用jQuery。如果你没有创建一个页面的话，创建一个包含如下内容的一个HTML页面：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
      
    </script>
  </body>
</html>

编辑src属性，你可以指向自己的那一份jquery的拷贝。如果jquery.js文件和你的html文件在同一个目录下，那么你可以使用：

<script src="jquery.js"></script>

你可以从jQuery官网上下载一份jQuery的拷贝。

在HTML文档Ready的时候执行代码

大多数Javascript程序员做的第一件事应该何下面的代码类似：

window.onload = function(){ alert("welcome"); }

这段代码是在页面加载时执行的。但是存在一个问题，如果页面的图片没有下载完成的话，这段js代码是不会执行的。使用window.onload的原因是当你第一次尝试运行你的代码时，HTML“文档”还没有完成加载呢。

为了避免这两个问题，jQuery有一个简单的语句来检测文档并且等待直到文档准备好，被称之为 ready event:

 $(document).ready(function(){
   // Your code here
 });

在ready event里面，增加一个针对链接的点击响应者：

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

保存你的HTML文件并且重新加载来测试你的页面。点击链接，在浏览器前往jQuery的官网之前会弹出一个对话框。

对于点击以及其他的事件，你可以阻止他们的默认行为-这里，继续上面的代码-在时间handler里调用event.preventDefault():

 $(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });

完整的例子

下面是完整的例子。注意这里的jQuery链接到的Google的CDN来加载jQuery文件。同样，在head节点中包含的js代码也比较适合放在一个单独的文件中，然后使用src属性进行引用。

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
   </script>
 </body>
 </html>

增加和删除一个HTML类

重要：下面的代码需要放在ready event中，这样他们才能在页面准备好的时候被调用。可以查看上面的小节来回顾一下细节。

另一个比较常见的任务就是增加或者删除一个类。

首先，在你的head节点中添加一些样式信息，像这样：

 <style>
    a.test { font-weight: bold; }
 </style>

接下来，添加一个addClass调用到你的脚本中：

 $("a").addClass("test");

你的所有a元素现在都是粗体的。

移除这个类，使用removeClass

 $("a").removeClass("test");

(HTML允许给同一个元素赋多个类)

特殊效果

jQuery提供了一些很好上手的效果，目的是为了使网页更加的出众。下面就可以测试一下，把click事件handler代码改成如下：

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

现在，如果你点击任何的链接，这个链接会慢慢的消失。

回调和函数

一个函数被当作参数传递给另一个函数（这里称作主函数），当该函数执行结束时这个函数被执行，那么这个函数就是一个回调函数。回调函数的一个比较特殊的地方在于，任何主函数之后执行的函数可以在主函数的回调函数执行之前执行。另外一件重要的事情是如何适当的传递回调。这里我经常忘记合适的语法。

没有参数的回调

没有参数的回调函数你可以像这样传递：

$.get('myhtmlpage.html', myCallBack);

注意：第二个参数是函数名（不是一个字符串）。Functions in Javascript are "First class citizens" and so can be passed around like variable references and executed at a later time.

有参数的回调函数

你可能会这样问你自己“如果你想要传递参数怎么办？”。

错误：

下面是错误的方法（不会有效）

$.get('myhtmlpage.html', myCallBack('foo', 'bar'));

这不会工作，是因为它调用了：

myCallBack('foo', 'bar')

然后把返回值作为参数传递给了$.get()

正确的调用方法

上面的例子问题在于myCallBack('foo', 'bar')在传递之前被求值了。JavaScript并且扩展起来说jQuery这里希望能有一个函数的指针，也就是说setTimeout函数。

在下面的用法中，创建了一个匿名的函数并且注册为一个回调函数。这个匿名函数调用了参数“foo”和“bar”。

$.get('myhtmlpage.html', function(){
  myCallBack('foo', 'bar');
});

myCallBack是在$.get完成获取页面之后被调用。

更多的阅读材料

从这里开始，你可以查看剩下的一些文档了-非常容易理解并且涵盖了jQuery的所有方面。如果你有问题，可以发送给jQuery论坛。

posted on 2012-05-31 16:55 涅槃火凤阅读(265) 评论(0) 编辑收藏举报

刷新页面返回顶部