本文是关于JQuery的基本介绍和一些相关的基本概念，大部分内容翻译自How_jQuery_Works，有少许改动。
JQuery：基础知识
本人是针对新手入门的基础教程，直接复制以下内容以创建一个新的HTML页面：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script src="jquery.js"></script> <script> </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
编辑script标签内的src属性，将其指向位于你计算机硬盘上或者网络上的jquery.js文件。如果jquery.js文件与你的HTML文件位于计算机中的同一目录，你可以按如下方式指定src属性：
<script src="jquery.js"></script>
在JQuery官网的下载页上可以下载到JQuery的副本文件。
如何启动JQuery/Javascript代码
很多使用Javascript的开发者极其热衷于以下面的方式来启动Javascript代码：
window.onload = function(){ alert("welcome"); }
方法里面是你想在页面加载完毕后运行的代码。然而这种方式存在一定的问题，如果页面中包含许多图片，那么直到所有图像都下载完毕之后，才会开始执行对应的Javascript代码。除此之外，使用window.onload还有其它的一些缺陷，在此不详细阐述。与之相比，JQuery中的$(document).ready()方法更为方便易用：
$(document).ready(function(){
// Your code here
});
比如，在ready事件中，为超级连接添加一个click事件句柄：
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
保存好你的HTML文件并在浏览器中浏览该页面，单机页面上的JQuery主页连接，会先弹出一个消息框，然后才会跳转到JQuery主页。使用下面这段代码也会得到与上面相同的结果：
$(document).ready(function() {
$("a").bind("click", function(event) { Msg(); });
});
function Msg(){
alert("Thanks for visiting");
}
对于click还有其它大部分事件，可以通过调用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();
});
});
完整的示例
下面是上述HTML页面示例的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
<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>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
在该示例页面中，是写在同一个文件中的，一种更好的建议方式是将HTML代码与Javascript/JQuery代码分别存储于不同的文件，然后在HTML页面中通过指定script标签的src属性来引用Javascript文件。见如下代码：
HTML页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="test.js"></script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
test.js文件代码
$(document).ready(function () {
$("a").click(function (event) {
alert("As you can see, the link no longer took you to jquery.com!");
event.preventDefault();
});
});
添加和移除HTML类（Class）
添加和移除HTML类在Web页面开发中是很常见的。在此对上述代码做一点改进，在HTML页面的head标签里加入以下样式代码：
<style>
a.test {font-weight: bold;}
</style>
在脚本文件中调用JQuery的addClass方法，HTML页面在加载完毕后即会运行该代码，使得a标签成为a.test类，从而应用a.test类的样式。
$("a").addClass("test");
如果要移除类，使用removeClass方法即可，使用方式同addClass。在用户交互的一些事件中，通过addClass与removeClass方法，可实现更适宜的UI效果。
特殊的效果
JQuery中提供很多方便易用的效果，在链接标签a的click事件中天添加如下代码：
$(this).hide("slow");
现在又多了一个动态的效果，在页面中点击链接后，该链接内容便会慢慢消失掉了。
函数与回调
回调是一种特殊的函数，一般将回调函数作为另一个函数（暂且称之为父函数）的参数，在父函数执行完毕之后，才会开始执行回调函数。
无参数的回调
无参数的回调，一般其用法如下：
$.get('myhtmlpage.html', myCallBack);
注意第二个参数是一个函数的名称，而不是字符串。
有参数的回调
错误的用法
如下所示是错误的，因为它会调用myCallBack('foo', 'bar')，并将其返回值传递给$.get()作为$.get()的第二个参数。
$.get('myhtmlpage.html', myCallBack('foo', 'bar'));
正确的用法
创建一个无名函数并将其注册为回调函数，如下所示：
$.get('myhtmlpage.html', function(){
myCallBack('foo', 'bar');
});
无名函数的作用就是用来正确的调用myCallBack('foo', 'bar')。
扩展阅读
JQuery文档是关于JQuery最为全面最为详细的说明文档，涵盖JQuery的方方面面，是学习JQuery的最优秀的资料之一。在使用JQuery的过程中有什么问题，可以在JQuery论坛上参与讨论。