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>

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

注意:下载jQuery时,文件名可能包含版本号,例如jquery-x.y.z.js。确保将此文件重命名为jquery.js或更新元素的src属性<script>以匹配文件名。
jQuery如何工作

在文档就绪上启动代码

为确保在浏览器完成加载文档后运行其代码,许多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的默认行为。

对于click大多数其他事件,您可以通过调用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文件中的第一段jQuery代码替换为上面的代码。再次保存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>

接下来,将.addClass()调用添加到脚本中:

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

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

要删除现有类,请使用.removeClass()

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

特效

jQuery还提供了一些方便的效果,可以帮助您使您的网站脱颖而出。例如,如果您创建一个单击处理程序:

$( "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( param1, param2 )立即并然后传递myCallBack()返回值作为第二个参数来$.get()。我们实际上想要传递函数myCallBack(),而不是myCallBack( param1, param2 )返回值(可能是也可能不是函数)。那么,如何传入myCallBack() 包含其参数?

权利

myCallBack()使用其参数延迟执行,可以使用匿名函数作为包装器。注意使用function() {。匿名函数只做一件事:调用myCallBack(),值为param1param2

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

$.get()完成获取页面myhtmlpage.html,它执行的匿名函数,它执行myCallBack( param1, param2 )

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注