原文地址：How jQuery Works
JQuery如何工作
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>
// Your code goes here.
</script>
</body>
</html>当文档准备好时启动代码
许多JavaScript攻城狮为了确保他们的代码在浏览器完成页面加载之后才执行，他们将代码包裹在onload函数里：
window.onload = function() {
alert( "welcome" );
};非常遗憾的是，直到所有的图片也完成了下载，包括条幅广告，这段代码将无法执行。为了在文档可以操作之时就运行代码，JQuery提供了一个ready 事件：
$( document ).ready(function() {
// Your code here.
});注意：JQuery将它的方法和属性通过window对象的两个属性：jQuery和 暴露出来。 暴 露 出 来 。 仅仅是jQuery的一个别名，因为它的书写比较方便和快速而被引入；
举个栗子，在ready事件里，你可以给一个链接添加一个点击事件处理者：
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
});复制以上JQuery代码到你创建的HTML文件里“//your code goes here”出现的地方，然后保存页面并使用浏览器重新加载它。点击链接，你应该会先看到一个alert弹出来，紧接着是标签的默认行为：导航到http://jquery.com
对于click和大多数的events，你可以在事件处理者里通过调用event.perventDefault()来阻止它们的默认行为：
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "As you can see, the link no longer took you to jquery.com" );
event.preventDefault();
});
});试着使用上面的代码替换你之前拷贝进HTML文件里的的JQuery代码。保存文件之后在浏览器里重新加载它。
完整的示例
下面的栗子展示了上面讨论的，直接嵌套在HTML标签里的点击事件处理者的代码。注意在实际中，将你的代码单独放在一个JS文件里，然后在页面里通过
<!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>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>添加和移出HTML Class
注意：你必须将剩下的JQuery示例放置在ready事件里，以便你的代码在文档准备好的时候才执行。
另一个常见的任务就是添加和移出一个class属性。首先，在HTML文档的标签里添加一些样式信息，就像这样：
<style>
a.test {
font-weight: bold;
}
</style>然后，在脚本里添加.addClass()：
$( "a" ).addClass( "test" );所有的元素现在都是粗体啦；
移除class属性的话，使用.removeClass()：
$( "a" ).removeClass( "test" );特殊的效果
JQuery也提供了一些常用的效果来帮助你让你的网站更加炫酷，比如，你可以创建一个这样的点击事件处理者：
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide( "slow" );
});然后，当点击这个链接后，这个链接将慢慢消失。
回调函数
不像其他编程语言，JavaScript允许你传递一个之后才被执行的函数。回调函数是作为参数传递给其他函数（该函数即为回调函数的父函数），并且当它的父函数执行完毕后才被执行的函数；回调函数很特别，因为它耐心地等待父函数执行完毕才执行。在等待同时，浏览器可以执行其他的函数或者做其他的任何工作。
为了使用回调函数，知道如何将他们传递给它们的父函数是很重要的。
使用无参回调函数
如果一个回调函数没有参数，你可以这样使用它：
$.get( "myhtmlpage.html", myCallBack );当$.get()获取myhtmlpage.html后，它将执行mycallBack()函数。
注意：第二个参数是一个函数名，并不是一个没有括号的字符串。
使用有参回调函数
使用有参数的回调函数很好玩
错误的做法：（代码将无法工作）
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );这段代码无法工作的原因是，它将立即执行myCallBack(param1,param2)，然后将该函数的返回值作为第二个参数传递给$.get()。我们实际上想传递的参数是myCallBack()函数本身，而不是它的返回值（也许是一个函数，也许不是）。所以，该怎样传递myCallBack并且包含它需要的参数呢？
正确的做法：
为了延迟myCallBack函数的执行，我们可以使用匿名函数作为一个包装。该匿名函数只做一件事件，就是使用恰当的参数调用myCallBack函数：
$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});当$.get()获取完myhtmlpage.html，它将执行匿名函数，而匿名函数则使用参数调用了我们的目标函数。
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
