关于jQuery的
入门使用jQuery可以很容易或具有挑战性的，这取决于你如何使用JavaScript，HTML，CSS进行开发和编程。
要知道一件重要的事情是，jQuery是只是一个JavaScript库。jQuery的所有功能特性都是通过JavaScript访问，所以要对javascript足够的理解，并能使其构建和调试代码是必不可少。虽然使用jQuery定期工作可以随着时间的推移，提高使用JavaScript的熟练程度，可能没有JavaScript的内置结构和语法的应用知识写jQuery很难上手。因此，如果你是新来的JavaScript，我们建议您查看的JavaScript基础教程 Mozilla开发者网络（MDN）上。
如何jQuery的工作原理
jQuery的：基础知识
这是一个基本的教程，旨在帮助您使用jQuery上手。如果你没有一个测试页面设置呢，通过创建以下的HTML页面开始：
1
2
3
4
五
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='/images/loading.gif' data-original="jquery.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
|
该src属性中的<script>元素必须指向jQuery的副本。从下载的jQuery的副本下载jQuery的页面和存储jquery.js文件在同一目录作为您的HTML文件。
注意：当您下载的jQuery，文件名可能包含一个版本号，例如
jquery-x.y.z.js。请确保该文件或者重命名
jquery.js或更新
src的属性
<script>相匹配的文件名元素。
文档准备启动代码
为了确保他们的代码运行在浏览器完成加载该文件，许多JavaScript程序员包装自己的代码在后的onload功能：
1
2
3
4
五
| window.onload = function() {
alert( "welcome" );
};
|
不幸的是尽快运行代码的文件已准备好进行操作，代码不运行，直到所有图像都下载完毕，包括横幅广告。jQuery ready事件：
1
2
3
4
五
| $( document ).ready(function() {
// Your code here.
});
|
注：jQuery库通过的两个属性暴露它的方法和属性
window调用的对象
jQuery和
$，
$是一个简单的别名
jQuery，它的经常使用，因为它是更短，更快地写。
例如，在里面ready时，你可以添加一个单击处理程序的链接：
1
2
3
4
五
6
7
8
9
| $( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
});
|
上面的jQuery代码复制到你的HTML文件，它说// Your code goes here。然后，保存您的HTML文件，然后在浏览器中刷新测试页。点击链接现在应该先显示一个警告弹出，然后继续导航到的默认行为http://jquery.com。
对于click大部分其他的事件，您可以通过调用阻止默认行为event.preventDefault()的事件处理程序：
1
2
3
4
五
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();
});
});
|
尝试更换您的jQuery代码，先前复制到您的HTML文件中第一个片段，与上面的之一。再次保存HTML文件并重新加载尝试一下。
链接完整的示例
下面的例子说明点击上面的处理代码的讨论，直接在HTML嵌入<body>。注意，在实践中，它通常是最好将代码在一个单独的JS文件并加载它与在页面上<script>的元素的src属性。
1
2
3
4
五
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='/images/loading.gif' data-original="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>文件，像这样的：
2
3
4
五
| <style>
a.test {
font-weight: bold;
}
</style>
|
接下来，添加.addClass（）调用脚本：
1
| $( "a" ).addClass( "test" );
|
所有的<a>元素现在字体加粗。
要删除现有类中，使用.removeClass（） ：
1
| $( "a" ).removeClass( "test" );
|
链接特效
jQuery的也提供了一些方便的效果，以帮助您使您的网站脱颖而出。例如，如果你创建一个click处理函数：
1
2
3
4
五
6
7
| $( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide( "slow" );
});
|
然后单击时慢慢链接消失。
链接回调和函数
不像许多其他编程语言，JavaScript的，可以自由地绕过功能在稍后的时间执行。一个回调是作为参数传递给另一个函数传递与其父功能完成后执行的函数。回调是特殊的，因为他们耐心地等待执行，直到他们的父母完成。同时，浏览器可以执行其它功能或做其他各种的工作。
要使用回调，要知道如何将它们传递到它们的父功能是非常重要的。
链接回调不争论
如果回调没有参数，你可以将它传递这样的：
1
| $.get( "myhtmlpage.html", myCallBack );
|
当$获得（）完获取的页面myhtmlpage.html，它执行myCallBack()的功能。
- 注：这里的第二个参数是简单的函数名称（而不是作为一个字符串，而没有括号）。
链接回调与参数
带参数执行回调可能会非常棘手。
链接错误
此代码示例将无法正常工作：
1
| $.get( "myhtmlpage.html", myCallBack( param1, param2 ) );
|
失败的原因是，代码执行myCallBack( param1, param2 )立即，然后通过myCallBack()的返回值作为第二个参数$.get()。实际上，我们希望传递给函数myCallBack()，而不是myCallBack( param1, param2 )的返回值（这可能是也可能不是一个函数）。那么，如何传递myCallBack() 和包括它的参数？
链接权
推迟执行myCallBack()其参数，你可以使用匿名函数作为包装。使用注意事项function() {。匿名函数正是一件事：通话myCallBack()，用的价值观param1和param2。
1
2
3
4
五
| $.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});
|
当$.get()完成后获得的页面myhtmlpage.html，它执行的匿名函数，该函数执行myCallBack( param1, param2 )。
原标题：JQuery的开发与使用心得
关键词：jquery
我知道了 