How JQuery Works

最新推荐文章于 2022-10-11 16:01:48 发布

shenlongshi

最新推荐文章于 2022-10-11 16:01:48 发布

阅读量321

点赞数

分类专栏：前台开发文章标签： jQuery tutorial 使用手册

前台开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

How JQuery Works

本文翻译自jquery官方文档，原文地址为：https://learn.jquery.com/about-jquery/how-jquery-works/

jQuery:基础

这是一个基础的操作手册，是为了帮助你开始使用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>

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

注意： 当你下载jQuery时，文件名可能包含一个版本信息，例如：jquery-x.y.z.js 请确保或者重命名这个文件为jquery.js或者更新<script>元素的<src>属性，使其匹配文件名。

在Document Ready上运行代码

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

window.onload = function() {

    alert( "welcome" );

};

不幸的是，直到所有的图片（包含横幅广告）都下载完成前代码是不会执行的。为了当文档一准备好被操作时就尽快运行代码，jQuery有一个声明，被叫做ready事件：

$( document ).ready(function() {

    // Your code here.

});

注意： jQuery库通过window对象的两个叫做jQuery和$的属性公开它的方法和属性。$仅仅是jQuery的一个简单的别名，因其更短，更快的书写特点而被广泛使用。

例如，在ready事件中，你可以为链接加上一个点击的处理程序：

$( document ).ready(function() {

    $( "a" ).click(function( event ) {

        alert( "Thanks for visiting!" );

    });

});

将上述jQuery代码拷贝至你的HTML文件的//Your code goes here的部分。然后，保存你的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();

    });

});

试着替换你的第一个jQuery代码片段，即你之前拷贝到你的HTML文件中的，上一段代码。重新保存HTML文件，重新加载试一试。

完整示例

下面的代码说明了上面讨论的点击处理程序，直接包含在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>

然后，在脚本程序中增加.addXClass()程序。

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

现在，所有<a>元素都是粗体了。

移除一个已有的类，使用.removeClass():

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

特殊效果

jQuery也提供了一些方便的效果使你的网站脱颖而出。例如，你可以创建如下的一个点击处理程序：

$( "a" ).click(function( event ) {

    event.preventDefault();

    $( this ).hide( "slow" );

});

这样，当点击时链接就会慢慢的消失。

回调与函数

与其他编程语言不同，JavaScript允许你自由的传递在稍后时间才执行的函数。一个callback 是一个被当做参数传递给其他函数的函数，并且只有在其父函数完成后才会被执行。回调之所以特殊是因为直到它们的父函数完成前，它们一直处于等待执行的状态。同时，浏览器可以执行其他函数或者做各种各样的其他工作。
要使用回调，最重要的是要知道如何将它们传递其父函数中。

不带参数的回调

如果一个回调没有参数，你可以像这样传递它：

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

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

注意： 这里的第二个参数仅仅是函数名（不是作为字符串，也不名括括号）。

带参数的回调

执行带有参数的回调是复杂的。

错误
这个示例代码是不工作的：

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

这个失败的原因是代码直接执行myCallBack(param1,param2),然后传递myCallBack()的返回值作为$.get()的第二个参数。实际上，我们是希望传递函数myCallBack()，而不是myCallBack(param1,param2)的返回值（其或许是一个函数或许不是）。所以，怎么传入myCallBack()并且包括它的参数呢？

正确
推迟执行带有参数的myCallBack(),你可以使用一个匿名函数作为封装器。注意使用function(){}匿名函数只是做一件事情：调用myCallBack()，带着param1和param2的值。

$.get( "myhtmlpage.html", function() {

    myCallBack( param1, param2 );

});

当$.get()完成获取myhtmlpage.html页面时，它就执行匿名函数，也就是执行myCallback(param1,param2).

shenlongshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
How JQuery Works

How JQuery Works本文翻译自jquery官方文档，原文地址为：https://learn.jquery.com/about-jquery/how-jquery-works/jQuery:基础这是一个基础的操作手册，是为了帮助你开始使用jQuery而设计的。如果你没有建立一个测试页面的话，请从建立如下所示的HTML页面开始：<!doctype html><html><head>
复制链接

扫一扫

专栏目录