jQuery入门：jQuery是如何工作的 How jQuery Works

来源：互联网发布：购买国外域名和空间站编辑：程序博客网时间：2024/05/17 03:00

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副本。从“Downloading jQuery ”页面下载jQuery副本并存储为jquery.js文件和你的HTML文件在同一目录下。

注意：当你下载jQuery，文件名可能包含版本数字，比如，jquery-x.y.z.js。确定这个文件改名为jquery.js或者更新<script>元素的src属性来匹配文件名。

文档加载完毕后启动代码

为了确保那些代码是在浏览器加载完文档后执行，很多Javascript程序员把他们的代码封装在onload函数里：

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

但不幸的是，到包括广告条在内的所有图片加载完成以后，这些代码才可以运行。为了让文档一加载后，代码就可运行，jQuery提供了ready event：

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

举个例子，在reday event里，你可以为链接增加a的单击句柄：

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

复制上面的jQuery代码到你的HTML文件中//Your code goes here的位置。然后，保存你的HTML文件，在浏览器中刷新测试页面。单击链接，首先显示一个alert弹窗，然后才是继续默认导航到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文件中的第一片段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的Class属性

重要： 你必须把剩余的jQuery示例放到ready event中，这样，当你的文档已经准备好工作的时候，你的代码才会执行。

另一个常用的任务是添加或者删除一个class属性。

首先，添加一些样式信息到文档的<head>元素中，就像这样：

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

然后，添加 .addClass()请求到脚本中：

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

所有的<a>元素现在都加粗了。

删除当前的class，使用.removeClass()：

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

特殊的效果

jQuery 也提供了一些便利的效果帮助你使网站变得出众。比如，你创建一个点击句柄：

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

然后当点击时链接会慢慢隐藏。

回调函数和函数

不像其他的编程语言，JavaScript可以让你自由的传递函数以便稍后执行。定义回调函数就是被当做一个参数传递到另外一个函数中，并且在他的父级函数执行完成后执行的一种函数。回调函数是特别的，因为他们会耐心的等待直到他们的父级函数结束后才执行。与此同时，浏览器可以执行其他函数或者做其他各种各样的工作。

To use callbacks, it is important to know how to pass them into their parent function.

没有参数的回调函数

如果回调函数没有参数，你可以这样调用他：

$.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() {的用法。匿名函数刚好做了一件事：调用带着param1 和 param2值的myCallBack()函数。

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

当 $.get() 结束调用myhtmlpage.html页面，会执行匿名函数，它会执行 myCallBack( param1, param2 )。

原文地址

4 0