jQuery 的运行机制（How jQuery Works）

最新推荐文章于 2022-08-16 20:50:53 发布

张小巍

最新推荐文章于 2022-08-16 20:50:53 发布

阅读量3.1k

点赞数 1

分类专栏： JavaScript 文章标签： javaScript jquery

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原文地址：http://learn.jquery.com/about-jquery/how-jquery-works/

linkjQuery: 基础知识

这是一个基本的教程，旨在帮助您开始使用jQuery，如果你还没有设置一个测试页面，通过创建下面的HTML页面开始：

<!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>

文档就绪后启动代码

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

window.onload = function() {
 
    alert( "welcome" );
 
}

然而，直到所有图像（包括横幅广告）都加载完毕，代码才会运行。为了文件一准备好就开始操作代码，jQuery有一个声明被称为ready事件（Ready Event）：

$( document ).ready(function() {
 
    // Your code here.
 
});

例如在ready事件（Ready Event）中，你可以添加一个单击处理程序的链接：

$( document ).ready(function() {
 
    $( "a" ).click(function( event ) {
 
        alert( "Thanks for visiting!" );
 
    });
 
});

保存你的HTML文件，然后在浏览器中重新加载测试页面。点击链接应该先出现一个警示弹出窗口，然后继续按照默认行为导航到 http://jquery.com。

对于点击和大多数其他事件，您可以通过在事件处理程序中调用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<BODY>。需要注意的是在实践中，通常将你的代码放在单独的JS文件中并且加载到页面上<script>元素的src属性中。

<!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>标签中添加一些样式信息，像这样：

<style>
a.test {
    font-weight: bold;
}
</style>

下一步，在脚本中添加 .addClass()声明：

$( "a" ).addClass( "test" );

现在所有的<a>都是粗体的。

删掉现有的类，用.removeClass():

$( "a" ).removeClass( "test" );

特殊效果

jQuery也提供一些提供方便的效果，以帮助您使您的网站中脱颖而出。例如，如果您创建一个click处理函数：

$( "a" ).click(function( event ) {
 
    event.preventDefault();
 
    $( this ).hide( "slow" );
 
});

当点击的时候这个链接缓慢的消失。

回调函数

与其他编程语言不同，JavaScript能让你的函数顺利通过在之后执行。一个回调是一个函数，它作为一个参数来传递给另一个函数，在它的父函数执行完成后执行该回调函数。

回调函数很特殊因为他们需要耐心等待直到他们的父函数执行完成。与此同时，浏览器可以执行其他函数或者做其他工作。

使用回调函数，很重要的一点是知道他们怎么传给他们的父函数的。

无参数回调

如果回调没有参数，你可以这样传：

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

当 $.get() 调用myhtmlpage.html,它会执行myCallBack()函数。

注意：这里的第二和参数是一个简单的函数名（但不是作为字符串，没有括号）

有参数回调

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

错误的：

$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

这段函数不会执行。

失败的原因是代码会立即执行myCallBack（参数1，参数2），然后将myCallBack（）的返回值作为第二个参数传给为$.get（）方法。我们实际上想传送函数myCallBack()而不是myCallBack（参数1，参数2）的返回值（这可能是也可能不是一个函数）。因此，如何传送myCallBack（）包括它的参数？

正确的：

推迟执行myCallBack（）与它的参数，你可以使用一个匿名函数来包装。注意，这里使用的function（）{。匿名函数只做了一件事情：调用myCallBack（），用参数1和参数2的值。

$.get( "myhtmlpage.html", function() {
 
    myCallBack( param1, param2 );
 
});

当$.get（）方法完成获取网页myhtmlpage.html，它会执行匿名函数，这个匿名函数会执行myCallBack（参数1，参数2）。

张小巍

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的运行机制（How jQuery Works）

原文地址：http://learn.jquery.com/about-jquery/how-jquery-works/linkjQuery: 基础知识这是一个基本的教程，旨在帮助您开始使用jQuery，如果你还没有设置一个测试页面，通过创建下面的HTML页面开始： Demo jQuery // Your
复制链接

扫一扫

专栏目录