jQuery 的运行机制（How jQuery Works）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文地址：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()声明：

<span style="font-size:10px;">$( "a" ).addClass( "test" );</span>

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

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

<span style="font-size:10px;">$( "a" ).removeClass( "test" );</span>

特殊效果

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

<span style="font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"></span><pre code_snippet_id="220643" snippet_file_name="blog_20140306_10_1835179" name="code" class="javascript" style="color: rgb(51, 51, 51); line-height: 22.5px;">$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide( "slow" );
});</pre>
<pre></pre>
<pre></pre>
<pre></pre>

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

回调函数

与其他编程语言不同，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的值。