开发者资讯: JavaScript+JQuery教程。简单入门

作者：kaotik于 2009/8/25 13:40:00 阅读次数：16445
在这篇教程中，我将教授您使用jQuery的JavaScript基础知识。这篇教程专为那些犹豫不前进入JavaScript领域的PHP开发者量身定制。
最常出现的问题通常是：我已经有了PHP，为什么还要使用JavaScript？答：因为PHP是一种服务器端语言，而JavaScript则位于客户端。在PHP中做起来繁琐的操作，例如表格排序，在JavaScript上则变得轻而易举。请注意，我并不是在建议您放弃PHP，恰恰相反！如果您将PHP和JavaScript结合起来，可以使代码提升到一个全新的层次。让我们开始吧。
在我们开始之前，本教程有一些基本要求：
- 访问jquery.com并下载jquery-1.3.2.min.js，这是jQuery的压缩版本。用作学习是不错的选择。当您对JavaScript熟练时，您可能会想获取完整版本以进行自己的修改。
- 访问getfirebug.com并下载firebug.js，这是一款优秀的开发工具，可让您通过firefox直接调试JavaScript（我计划写一篇专门的教程来介绍这个）。
- 拥有一个文本编辑器或IDE用于更改php/html等文件。
- 本地PHP服务器。如果您没有运行，请检查XAMPP或类似软件。

首先创建一个名为：test.php的空文件。在文件中放置以下代码
<script language="javascript">
alert ("hello world");
script>

这将弹出一个显示“hello world！”的警告框！现在，既然我们已经理解了PHP，让我们将两种语言结合起来。将所有之前的代码替换为以下代码：
$tst = "my name is wally";
?>

alert ("echo $tst; ?>");

我们有一个名为$tst的PHP变量，它被传递到警告框中。现在，让我们引入jQuery并开始使事物更有趣。替换文件test.php中所有之前的代码为以下代码：
<style type="text/css">
  #box { background-color:#FFFF99; border:thin solid #FF0000; width:70%; height:50px;}
  style>
<script type="text/javascript" src="firebug.js">script>
  <script language="javascript" src="jquery-1.3.2.min.js">script>
  <script language="javascript">
  $(document).ready(function() { //在处理任何javascript之前完成整个页面的加载
  $("#subBut").click(function(event) {
  var formContent = $("#form1").serialize();
  $("#box").load('myserv.php',formContent);
  });
  });
  script>
<form name="form1" id="form1" method="post" action="">
  <label>名称
  <input type="text" name="textfield" id="textfield">
  label>
  <input type="button" name="subBut" id="subBut" value="提交">
  form>
  <br />
  <div id="box">Ajax 调用的内容div>

现在创建另一个名为myserv.php的文件，并将以下代码放入其中
echo "hello world! 我的名字是 " $_GET['textfield'];
?>

现在来测试一下！我们在这里做的是生成对初始的test.php文件的ajax响应。它将表单数据通过$_GET传递给myserv.php。使用jquery $.serialize（在第6行）的好处是它会抓取表单中所有的元素。因此，即使后来添加更多，它仍然会抓取它们。
下面是对JavaScript代码的逐行解释
第4和5行加载了jQuery和Firebug
第7行：在这个函数内部的所有代码仅在整个页面加载完毕后才会被处理。这对我们这些PHP开发者来说尤其重要，因为我们的PHP代码有时候会散布在页面的很多地方。
第8行是一个事件函数。这意味着，当发生一个事件时，就会运行该函数内部的代码。在这种情况下，事件是“点击”，并且它被绑定到了选择器“subBut”，这是我们的表单中的提交按钮。因此，当有人点击提交按钮时，函数内部的代码会被执行。
第9行是一个强大的jQuery函数：$.serialize。它抓取了表单“form1”中所有的元素，并正确地将它们格式化，以便使用$_GET发送到响应页面。为了实现这个功能，我创建了一个JavaScript变量“formContent”。这个变量用来存储格式化的数据。注意：在JavaScript中使用变量之前必须首先声明。
第10行是jQuery的一大亮点。简单的一行代码却能做很多事情！在这里，选择器是一个id为“box”的div。这就是我们将ajax响应加载进去的地方。load('myserv.php',formContent)会将JavaScript变量“formContent”的内容发送到myserv.php页面，该页面处理信息并返回响应。

这是一个简单的入门教程。我还有更多东西马上就来：