您的位置：首页 > Web前端 > JQuery

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

2015-06-24 18:57 609 查看

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 )
。

原文地址
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航