JQuery开发——轻松入门

本文是关于JQuery的基本介绍和一些相关的基本概念，大部分内容翻译自How_jQuery_Works，有少许改动。

JQuery：基础知识

本人是针对新手入门的基础教程，直接复制以下内容以创建一个新的HTML页面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">　
<title>Demo</title>
　　　　<script src="jquery.js"></script>
　　　　<script>

　　　　</script>
</head>
　　
<body>
　　　　<a href="http://jquery.com/">jQuery</a> 　　
</body>
</html>

编辑script标签内的src属性，将其指向位于你计算机硬盘上或者网络上的jquery.js文件。如果jquery.js文件与你的HTML文件位于计算机中的同一目录，你可以按如下方式指定src属性：

<script src="jquery.js"></script>

在JQuery官网的下载页上可以下载到JQuery的副本文件。

如何启动JQuery/Javascript代码

很多使用Javascript的开发者极其热衷于以下面的方式来启动Javascript代码：

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

方法里面是你想在页面加载完毕后运行的代码。然而这种方式存在一定的问题，如果页面中包含许多图片，那么直到所有图像都下载完毕之后，才会开始执行对应的Javascript代码。除此之外，使用window.onload还有其它的一些缺陷，在此不详细阐述。与之相比，JQuery中的$(document).ready()方法更为方便易用：

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

比如，在ready事件中，为超级连接添加一个click事件句柄：

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

保存好你的HTML文件并在浏览器中浏览该页面，单机页面上的JQuery主页连接，会先弹出一个消息框，然后才会跳转到JQuery主页。使用下面这段代码也会得到与上面相同的结果：

$(document).ready(function() {
　　$("a").bind("click", function(event) { Msg(); });
});

function Msg(){
　　alert("Thanks for visiting");
}

对于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页面示例的完整代码：

<!DOCTYPE html>
<html lang="en">
   <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
   </script>
   </head>
   <body>
	<a href="http://jquery.com/">jQuery</a>
   </body>
</html>

在该示例页面中，是写在同一个文件中的，一种更好的建议方式是将HTML代码与Javascript/JQuery代码分别存储于不同的文件，然后在HTML页面中通过指定script标签的src属性来引用Javascript文件。见如下代码：

HTML页面代码

<!DOCTYPE html>
<html lang="en">
   <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script src="test.js"></script>
   </head>
   <body>
	<a href="http://jquery.com/">jQuery</a>
   </body>
</html>

test.js文件代码

$(document).ready(function () {
    $("a").click(function (event) {
        alert("As you can see, the link no longer took you to jquery.com!");
        event.preventDefault();
    });
});

添加和移除HTML类（Class）

添加和移除HTML类在Web页面开发中是很常见的。在此对上述代码做一点改进，在HTML页面的head标签里加入以下样式代码：

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

在脚本文件中调用JQuery的addClass方法，HTML页面在加载完毕后即会运行该代码，使得a标签成为a.test类，从而应用a.test类的样式。

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

如果要移除类，使用removeClass方法即可，使用方式同addClass。在用户交互的一些事件中，通过addClass与removeClass方法，可实现更适宜的UI效果。

特殊的效果

JQuery中提供很多方便易用的效果，在链接标签a的click事件中天添加如下代码：

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

现在又多了一个动态的效果，在页面中点击链接后，该链接内容便会慢慢消失掉了。

函数与回调

回调是一种特殊的函数，一般将回调函数作为另一个函数（暂且称之为父函数）的参数，在父函数执行完毕之后，才会开始执行回调函数。

无参数的回调

无参数的回调，一般其用法如下：

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

注意第二个参数是一个函数的名称，而不是字符串。

有参数的回调

错误的用法

如下所示是错误的，因为它会调用myCallBack('foo', 'bar')，并将其返回值传递给$.get()作为$.get()的第二个参数。

$.get('myhtmlpage.html', myCallBack('foo', 'bar'));

正确的用法

创建一个无名函数并将其注册为回调函数，如下所示：

$.get('myhtmlpage.html', function(){
　　myCallBack('foo', 'bar');
});

无名函数的作用就是用来正确的调用myCallBack('foo', 'bar')。　

扩展阅读

JQuery文档是关于JQuery最为全面最为详细的说明文档，涵盖JQuery的方方面面，是学习JQuery的最优秀的资料之一。在使用JQuery的过程中有什么问题，可以在JQuery论坛上参与讨论。

posted @ 2012-07-06 14:24  百折不回  阅读(533)  评论(1)  编辑  收藏  举报