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编辑  收藏  举报