jQuery: 基本概念
这是入门教学，设计来帮你开始使用jQuery，假如你尚未设定测试页面，现在开始建立下面的HTML网页：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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> |
在<script> 元素里的src属性必须指到jQuery的一个副本，下载jQuery的副本可以到下载jQuery页面，然后储存jquery.js档案到你HTML档案的相同目录。
[adsense][/adsense]
文件准备好时启动程式码
为了确保程式码可以在浏览器完成载入文件后执行，很多JavaScripttt程式设计师会将程式码置于onload 函式内：
|
1
2
3
4
5
|
window.onload = function() { alert( "welcome" );} |
不幸的是，会直到所有的图片完成下载，包括横幅广告，才会执行，要在文件一准备好就能执行操作，jQuery需要有ready事件的叙述：
|
1
2
3
4
5
|
$( document ).ready(function() { // Your code here.}); |
例如，在ready事件内，你可以增加一个click处理器到连结：
|
1
2
3
4
5
6
7
8
9
|
$( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Thanks for visiting!" ); });}); |
储存你的HTML档案，然后在浏览器重新载入测试页，点击连结现在会先出现一个警告弹出视窗，接着继续浏览的行为到 http://jquery.com。
对于click 跟很多其他的事件，你可以在事件处理器内呼叫event.preventDefault()来避免预设的行为：
|
1
2
3
4
5
6
7
8
9
10
11
|
$( document ).ready(function() { $( "a" ).click(function( event ) { alert( "As you can see, the link no longer took you to jquery.com" ); event.preventDefault(); });}); |
完整的范例
下面的例子说明上面讨论的点击处理的程式码，直接内嵌在HTML <body>中，注意实际运用中，通常将你的程式码另外放到一个独立的JS档案中，然后使用 <script>元素的src属性在页面上载入程式码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!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类别
重要：你必须接下来jQuery范例在ready事件内，这样你的程式码会在文件准备好的时候执行。
另一个常见的工作就是新增或移除类别。
首先，新增一些样式资讯到文件的<head>内，像这样：
|
1
2
3
4
5
|
<style>a.test { font-weight: bold;}</style> |
接下来，新增.addClass() 呼叫到指令码：
|
1
|
$( "a" ).addClass( "test" ); |
所有的<a>元素现在变成粗体字。
要移除现有的类别，使用.removeClass()：
|
1
|
$( "a" ).removeClass( "test" ); |
特别效果
jQuery也提供一些方便使用的效果来帮你的网站更加突出，例如假如你建构了一个click处理器：
|
1
2
3
4
5
6
7
|
$( "a" ).click(function( event ) { event.preventDefault(); $( this ).hide( "slow" );}); |
接着在点击时连结会慢慢地消失。
回呼函式跟函式
不像很多其他的程式语言，JavaScript允许你在以后的时间自由地传递函式来执行，callback 是一个函式用来传递参数到另一个函式，它在父函式完成时执行，回呼函式很特别因为他们会很有耐心地等待父函式完成才执行。这个时候，浏览器可以执行其他的函式或是做其他种类的工作。
要使用回呼函式，知道如何传递他们到父函式里很重要。
不用参数的回呼
假如回呼没有参数，你可以像这样来传递：
|
1
|
$.get( "myhtmlpage.html", myCallBack ); |
在$.get()完成取得页面 myhtmlpage.html时，它会执行myCallBack()函式。
- 注意： 这里的第二个参数就是函式的名称（这不是字串，也不用括号）。
有参数的回呼
执行有参数的回呼是较难处理的。
错误
这个程式码范例不能执行：
|
1
|
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) ); |
错误的原因就是程式码一执行myCallBack( param1, param2 )后就传递myCallBack()的传回值作为第二个参数到$.get()，我们实际上想传递函式myCallBack()而不是myCallBack( param1, param2 )的传回值（可能是或不可能是一个函式），所以如何在 myCallBack() 内含有参数传递？
正确
要推迟执行有参数的myCallBack()，你可以使用一个匿名函式做为包装，注意function(){的使用，匿名函式就做一件事：呼叫带有param1跟param2值的myCallBack()。
|
1
2
3
4
5
|
$.get( "myhtmlpage.html", function() { myCallBack( param1, param2 );}); |
当$.get()完成取得页面myhtmlpage.html时，它会执行匿名函式，这个函式会执行myCallBack( param1, param2 )。