【jQuery教程】农民的jQuery之旅（二）jQuery是怎么工作的

一个基本的jQuery介绍和你使用它所需要了解的一些概念
原出处：http://docs.jquery.com/Tutorials:How_jQuery_Works
作者：John Resig
翻译：ItFarmer

基本的

这是一个基本的指南，被设计用来帮助你开始使用jQuery。如果你还没有建立一个测试的页面，那么请建立一个包含以下内容的新的HTML页：

CODE:

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

编辑标签中的src属性指向你的jquery.js副本。例如，如果jquery.js同你的HTML文件在同一个目录中，那么你可以写成：

CODE:

你可以从Downloading jQuery这个页下载属于你自己的jQuery。

在文档准备好的时候开始代码

大多数Javascript开发者首先需要完成的就是添加下边这个代码到他们的程序中：

CODE:

window.onload = function(){ ... }

这其中的代码使你想要在页面被载入时执行的处理。问题是，这些Javascript代码只有在页面上的全部图片加载完成（包括头部的banner广告）的时候才会执行。将window.onload放在最上边的原因是当你第一次运行你的代码的时候，HTML'document'还没有加载完成。
为了解决这个问题，你可以使用jQuery一个简单的程序（跟老宋确认了一下，statement是程序体的意思），被叫做ready事件

CODE:

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

这段代码检查文档，并且在文档确定能够被使用前，不进行任何操作-这个正是我们所需要的。所以将上边这一小段代码粘贴到你的测试页里吧。

当点击的时候让一些事情发生

我们要做的第一件事就是当一个链接被点击的时候是一些事情发生。在ready的function中，添加下边的代码：

CODE:

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

保存你的HTML页并且在浏览器中重新加载一下。点击页面上的链接，在离开这个主jQuery页前，将会出现一个弹出的alert。
对于click和其他的事件，你都可以避免它们默认的行为-这里，在jquery.com链接的下边，从事件句柄中返回false：

CODE:

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

添加一个类
另一个常见的工作就是从对象中添加（或移除）类，例如：

CODE:

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

如果你想在你的代码头部添加一些个样式信息的话，向下边这样：

CODE:

然后添加对上边的addClass的调用-你的所有A标签将会全部变成粗体了。如果想移除这个类，你应该使用removeClass。

特殊的效果（effect）

在jQuery中，提供了两个非常容易得到的效果，这可以使你的网站更加出众。将这个加到你的test页中，链接就会变样了：

CODE:

$("a").click(function(){
$(this).hide("slow");
return false;
});

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

Chainability（jQuery魔术）

jQuery使用一个有趣的概念来使它的代码短小精悍。同面向对象的编程思想类似，这个概念很容易被人们理解。
在一个nutshell中：在jQuery中每一个方法都返回请求对象本身，允许你绑上它（'chain' upon it），例如：

CODE:

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

这些独立的方法（addClass，show，和html）中的每一个返回的是jQuery对象，允许你继续对现在的元素使用方法。
你可以更深一步的使用这个方法，通过从选定中添加或移除元素，修改这些元素然后回复原来的选定，例如：

CODE:

$("a").filter(".clickme").click(function() {
alert("click!");
}).end().filter(".hideme").click(function() {
$(this).hide();
});

可以修改jQuery选定并且以end()结束的方法有：
add()
children()
eq()
filter()
find()
gt()
lt()
next()
not()
parent()
parents()
siblings()
更具体的请察看API文档

回调，方法和“this”

回调是一个方法，它作为一个变量传递给另一个方法，并且在他的父方法被执行后才执行。回调的一个很大的特点就是出现在父方法后边的方法能够在回调执行之前执行。
另一个需要了解的就是，如何正确的通过回调。这个是我经常会忘记的属性句法。

没有参数的回调

你可以像下边这样传递一个没有参数的回调：

CODE:

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

注意第二个参数只是一个简单的方法名（而不是一个字符串并且没有花括号）。

有参数的回调

“如果你有参数要传递，你该怎么做？”你可能会问自己。

错误
错误的方法（不会起作用）

CODE:

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

这个将不会起作用因为它调用myCallBack(param1, param2)然后将返回的结果作为$.get()的第二个参数。

正确
正确的方法

CODE:

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

所以通过传递一个无名的方法(the part with…

CODE:

function() {
/* function calls inside*/
});

其本身就会调用你的带参数的方法，所以你成功了。
这个方法起作用了，是因为它将无名的方法作为第二个参数传递给了$.get()，而没有首先执行它。

单词学习：
concept  n.观念, 概念
tutorial  n.指南
circumvent  vt.围绕, 包围, 智取
statement  n.声明, 陈述, 综述
manipulate  vt.(熟练地)操作, 使用(机器等), 操纵(人或市价、市场), 利用, 应付, 假造
snippet  n.小片, 片断, 摘录, <口>不足道的人, 不知天高地厚的年轻人
stick  v.粘住, 粘贴
prevent  v.防止, 预防
handy  adj.手边的, 就近的, 唾手可得的, 便利的, 敏捷的, 容易取得的
straight-forward  直接的, 顺向的, 简单的
chain  vt.用链条拴住
revert  v.回复
syntax  n.[语]语法, 有秩序的排列, 句子构造, 句法
parentheses  n.圆括号, 插入语, 插曲

补充：网页制作,jquery