发布于: 关于 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://jquery.org.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 有一个被称为就绪事件的语句

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://jquery.org.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 文件并重新加载以试用它。

link 完整示例

以下示例说明了上面讨论的点击处理代码，它直接嵌入在 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://jquery.org.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>

link 添加和删除 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" );

link 特殊效果

jQuery 还提供了一些方便的效果来帮助您的网站脱颖而出。例如，如果您创建了一个点击处理程序

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

那么点击链接时它会慢慢消失。

link 回调和函数

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

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

link 不带参数的回调

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

1
 
$.get( "myhtmlpage.html", myCallBack );

当 $.get() 完成获取页面 myhtmlpage.html 后，它会执行 myCallBack() 函数。

  • 注意：这里的第二个参数只是函数名（但不是字符串，也没有括号）。

link 带参数的回调

执行带参数的回调可能很棘手。

link 错误

此代码示例将不起作用

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 )。