发布在：关于 jQuery

jQuery 工作原理

link 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="https://jqueryjs.cn/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
 
    // Your code goes here.
 
    </script>
</body>
</html>

<script> 元素中的 src 属性必须指向 jQuery 的副本。从 下载 jQuery 页面下载 jQuery 的副本，并将 jquery.js 文件存储在与 HTML 文件相同的目录中。

注意：下载 jQuery 时，文件名可能包含版本号，例如 jquery-x.y.z.js。请务必将此文件重命名为 jquery.js，或更新 <script> 元素的 src 属性以匹配文件名。

link 在文档就绪时启动代码

为了确保他们的代码在浏览器完成加载文档后运行，许多 JavaScript 程序员将他们的代码包装在一个 onload 函数中

1
2
3
4
5
 
window.onload = function() {
 
    alert( "welcome" );
 
};

不幸的是，在所有图像（包括横幅广告）下载完毕之前，代码不会运行。为了在文档准备好操作时立即运行代码，jQuery 有一个称为 ready 事件 的语句

1
2
3
4
5
 
$( document ).ready(function() {
 
    // Your code here.
 
});

注意：jQuery 库通过 window 对象的两个属性（称为 jQuery 和 $）公开其方法和属性。$ 只是 jQuery 的别名，它经常被使用，因为它更短、更易于编写。

例如，在 ready 事件中，你可以向链接添加一个点击处理程序

1
2
3
4
5
6
7
8
9
 
$( document ).ready(function() {
 
    $( "a" ).click(function( event ) {
 
        alert( "Thanks for visiting!" );
 
    });
 
});

将上述 jQuery 代码复制到你的 HTML 文件中，在其中写着 // Your code goes here 的地方。然后，保存你的 HTML 文件并在浏览器中重新加载测试页面。现在，点击链接应首先显示一个警报弹出窗口，然后继续导航到 https://jqueryjs.cn 的默认行为。

对于 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 文件中的第一段 jQuery 代码。再次保存 HTML 文件并重新加载以试用。

链接 完整示例

以下示例说明了上面讨论的点击处理代码，直接嵌入到 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="https://jqueryjs.cn/">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 还提供了一些方便的 效果 来帮助您使网站脱颖而出。例如，如果您创建一个点击处理程序

1
2
3
4
5
6
7
 
$( "a" ).click(function( event ) {
 
    event.preventDefault();
 
    $( this ).hide( "slow" );
 
});

然后，单击时链接会慢慢消失。

链接 回调和函数

与许多其他编程语言不同，JavaScript 使您可以自由地传递函数，以便稍后执行。回调 是作为参数传递给另一个函数的函数，并在其父函数完成后执行。回调很特别，因为它们会耐心等待其父函数完成再执行。与此同时，浏览器可以执行其他函数或进行各种其他工作。

要使用回调，了解如何将它们传递到其父函数中非常重要。

链接 没有 参数的回调

如果回调没有参数，您可以像这样传递它

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() {。匿名函数只做一件事：调用 myCallBack()，使用 param1 和 param2 的值。

1
2
3
4
5
 
$.get( "myhtmlpage.html", function() {
 
    myCallBack( param1, param2 );
 
});

当 $.get() 完成获取页面 myhtmlpage.html 时，它会执行匿名函数，该函数执行 myCallBack( param1, param2 )。