jQuery 怎样工作？

使用jQuery.js的基础

在开始阅读本文之前，请先下载jQuery[选择最小版本或者未压缩的版本都是可以的]。本文只是一个jQuery最底层的基础教程，只是让你在开始使用jQuery来为你的网站提供动力之前对jQuery有一个大概的了解与认识，如果你现在还没有一个用来学习本文将要介绍的内容的测试页面，你只需要使用任何文本编辑工具（Notepad etc.）创建一个新的HTML页面即可，在此HTML文件中加入如下代码：

  <html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // Your code goes here
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

下面这一行中，请为你的jquery.js指定一个正确的路径，在本文中，将把juqery.js与example.html文件保存在同一个目录下，所以，你看到的jquery.js文件的路径都为下面这样的：

 <script type="text/javascript" src="jquery.js"></script>

当然，你也可以使用你自己的目录，比如将其保存在/js/目录下，最后你也可以使用下面这样的代码来引用它：

 <script type="text/javascript" src="js/jquery.js"></script>

在HTML文档加载完毕时运行代码

使用Javascript的程序员一般要做的第一件事情就是在其网页文档（HTML,PHP etc.）加入如下代码：

 window.onload = function(){ alert("abc") }

它包含的了当文档在加载完毕之后将运行的代码，但是，Javascript代码将不会在整个文档完整的下载完毕之前运行，如果你的网页包含大量图片，那么有可能就需要很长的时间才能等到Javascript代码的运行。对于这两个问题，jQuery有一个很清楚的声明，你可以在Ready Event了解更多。

$(document).ready(function(){});

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

现在你开始使用jQuery.js了，所以，以后所有的示例代码都将被放在Ready Event之中，这使得这些被加入的代码在文档加载完毕之后就开始运行，接着你可以添加你自己的代码，比如下面这样的：

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

现在保存你的HTML文件，在浏览器中访问此文件（如果还没有访问过的话）或者重新加载此文件（刷新即可），点击一次网页中指向jQuery的链接，浏览器就会打开一个包含“Thanks for visiting!”的提示框，此提示框还包括一个确定按钮，当你点击确定按钮之后，页面才会转向到此链接所指向的网页（示例中为jQuery的主页）。

我们还可以使用其它的Events，比如你可以设置默认的动作—在这里，点击指向jQuery.com的链接时，加载event.preventDefault()函数：

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

为文档添加一个Style

另一个常见的用法就是为HTML添加或者删除一个CSS类名（class），比如：

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

如果你在HTML文件中添加了类似下面这样的CSS代码：

 <style type="text/css">a.test { font-weight: bold; }
 </style>

接着你又使用了 addClass 请求，那么现在你文档中所有的链接（a）使用的字体都将变成粗体，当然，移除此CSS类，你应该使用 removeClass。

（CSS允许多个类被添加到同一个元素中）

特殊应用

jQuery本身已经为你的网页应用提供了很多特殊的应用，使用下面的代码替代你已经添加到example.html文件中的代码：

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

现在你再重新载入一次你的网页，当你点击任何一个链接之后，这个被点击的链接就会缓慢的隐藏掉。

充满想象的jQuery

jQuery在被创建的过程中，一直遵守着一个理念，那就是保证代码的短小与简单，对于那些熟悉面向对象编程的人来说，这个理念应该很容易就被接受。

一言以蔽之：在jQuery中的任何方法都将返回其对象本身，允许你是去“Chain（链条）”它，比如：

 $("a").addClass("test").show().html("foo");

任何单个的方法（addClass,show,html）都将返回jQuery的对象本身，允许你继续对同一个元素进行操作。你可以继续让此事件延续下去，添加或者删除某些选择符，修改元素本身或者将其恢复到源始状态，比如：

 $("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();

再在HTML文件中添加如下HTML代码：

<a href="http://google.com/" class="clickme">I give a message when you leave</a>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
<a href="http://microsoft.com">I'm a normal link</a>

以下都是可以通过end()来结束的jQuery方法：

add(),
children(),
eq(),
filter(),
find(),
gt(),
lt(),
next(),
not(),
parent(),
parents() and
siblings().

你可以通过 Traversing API documentation 查看这些方法详细信息。

Callbacks 与 Functions

一个Callback（回调）就是一个函数，它是当某个函数运行完毕之后将某个参数传送给另一个函数，关于CallBack需要特别注意的是，在“Parent”函数之后执行的函数可以在CallBack执行之前之行。另一个相当需要注意的事情就是如何适当的使用CallBack。

没有参数的CallBack

你可以像下面这样的执行一个没有带任何参数的CallBack：

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

注意：这个函数中的第二个参数并不是一个String字段，而是一个函数名称，在JavsScript中，函数能以一个名称的形式被传送。

错误的方法

错误的方法（将不会被执行）

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

上面这一段代码将不会被执行，因为它请求：

myCallBack(param1, param2)

正确的方法

上面的方法的错误之处在于myCallBack(param1, param2)在被作为一个函数传送之前被执行了。

在下面的使用中，一个匿名函数被创建（仅仅只是一个声明）并且被CallBack函数将其注册成为函数，注意function()的使用，这个匿名函数只做一件事情，那就是声明myCallBack函数，并且附带param1与param2这两个值。

$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
});

学习jQuery

jQuery用户已经为jQuery的新用户创建了一个十分实用的指导手册，它会指导你去学习最好的jQuery应用，当然，如果你有任何在指导手册中无法理解的问题，你可以直接联系jQuery。

Tags: javascript, jquery, WordPress, 学习, 编程

This entry was posted on 星期二, 十月 7th, 2008 at 5:46 下午 and is filed under 网络技术. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.