本例没有什么特殊的地方。只有一点。投票系统至少需要两个参数：一个是投票项目的id，一个是投票的方向（支持还是反对），所以我这样构造一个a元素：

<a href='#' class='up' id='<?php echo $row['vid']?>'><?php echo $row['up']?></a>

我用class来确定投票方向，而用id来确定投票项目。

最后，我用jQuery中的replaceWith来替代掉被点击的a元素的内容为：

$(this).replaceWith("<strong>"+count+"</strong>");

大功告成！

演示地址：http://www.rsywx.net/jquery/demos/test09.html。

代码都很简单，不再列出。有兴趣的可以直接下载后分析。

特别提出一点：在代码中，我在jQuery中调用JSON函数处理返回值的时候，由于返回值很简单（true或者false的布尔值），所以直接对返回的data进行了判断，实践证明是可行的。

Technorati : JavaScript, demos, jQuery, 例子
Del.icio.us : JavaScript, demos, jQuery, 例子
Zooomr : JavaScript, demos, jQuery, 例子
Flickr : JavaScript, demos, jQuery, 例子

在jQuery中实现手风琴式的控制十分简单：

<script src="../ui/ui.core.js"></script>
<script src="../ui/ui.accordion.js"></script>
<script type="text/javascript">
            $(document).ready(
            function()
            {
                $("#accordion").accordion();
            }
            );
</script>

两个额外的js文件可以从jQuery网站下载，也可以直接远程引用。

html的代码采用ul/li组合写成：

<ul id="accordion">
  <li>
    <a href="#">Section 1</a>
      <div>Line 1.<br/>
      Line 1.<br/>
      Line 1.<br/>
      Line 1.</div>
  </li>
  <li>
    <a href="#">Section 2</a>
     <div>Line 2.<br/>
     Line 2.<br/>
     Line 2.<br/>
   </li>
   ...
</ul>

实在是很简单，而且很干净，彻底分离了html和js代码。

核心代码如下：

var i=0;
$(document).ready(
    function()
    {
        $("div").filter("#clickme").click(
            function()
            {
                i++;
                $("div").filter("#content").toggle();
                if(i%2==0)
                {
                    $(this).text("Click here to expand.");
                }
                else
                {
                    $(this).text("Click here to collapse.");
                }
            }
        );
    }
);

我用了一个变量i来判断要操作的div是处在显示还是隐藏状态，并相应的修改提示文字。通过查看jQuery的源代码，可以知道这也是jQuery中toggle使用的方法。

示例见此处。

当然，为了被前令狐同学再次BS我的算法BT，我首先改写了clearOptions函数：

function clearOptions(selectID)
{
    var sel=document.getElementById(selectID);
    var len=sel.length;
    var i;
 
    for(i=1;i<len;i++)
        sel.remove(1); // I keep on removing the 1st item in the select!
}

说明一下，我这样编程是有一定的道理的。虽然说，更“好”的代码应该似乎是每次都删除最后一个（类似：remove(sel.length)）。但是，由于每次删除后，sel.length都会发生变化，所以在每次删除最后一个的时候，sel.length都会被重新取值，这个对于jQuery来说开销还是很大的，特别是如果select下的option比较多的时候。所以，我还是选择每次删除第一个的做法。这样，remove(1)中的参数是个常量，只需要取值一次从而大大的缩减了运行时间。

同时我将addOption，fillLevel等多次调用的代码段抽出作为独立的函数。在fillLevel函数中，还特意混合了jQuery和标准javascript。

这样一来，jQuery的ready函数写法就更清晰明了了。同时，为了温故知新，我还加入了在第二个例子中实现的“Loading”提示。目前的问题时，在填充level1的时候，不会出现这个提示，而只有在填充level2和level3的时候才出现这个提示。暂时不管这个小小的问题了。

完整的示范在此处。

代码不再贴出，有兴趣的可以在页面自行下载研究。

var opt=document.createElement("option");
opt.value=n;
opt.text=i;
 
$("select").filter("#level1").append(opt);

这样做，在Fx下是可以了，但是在IE下不行：option加入正常，但是没有文本显示。所以，我采用更标准的JavaScript写法：

var opt=new Option("Option "+i, n);
document.getElementById("level2").options.add(opt);

于是，Fx和IE都正常了……世界终于清净了…… 还没有完。每次我点击或者在level1中更改选项时，level1和level2都会不断的增加option，我需要在增加之前将原来的option进行清除。于是我再次借用标准的JavaScript：

function clearOption(selectID)
  {
      var obj;
      obj=document.getElementById(selectID);
      var i;
      for(i=1;i<obj.length;i++)
      {
        obj.remove(i);
        i--;
      }
  }

这里有一些技巧。我故意用一种比较笨的方法：从1（不是0，因为从0开始会把那个—的选项一起删除了）开始循环到options数组的长度。但是由于每次删除一个选项后，长度就会减1，且原来1的项目删除后，原来2的项目变成了1，所以，我必须用i–将i缩小一次。更好的方法是从最后一个元素开始删除，每次也只删除最后一个元素。有兴趣的可以自己完成。 这个代码是我在NetBeans IDE下完成的。它对jQuery支持的很好，有jQuery的代码提示，省去我遍寻API的烦恼。

演示地址：此处。

==============

为了使这个“耗时长久”的操作显得真实一些，我决定让我的jQuery通过ajax去调用一个PHP文件，并从PHP文件那里返回一些东西。当然，这只是一个demo，PHP文件不用太复杂：

$t=rand(3,6);
sleep($t);
$arr=array("t"=>$t, "foo"=>"bar");
$jarr=json_encode($arr);
echo $jarr;

值得注意的有两点：

第一，在返回到jQuery之前，我先用PHP函数json_encode将要返回的东西进行JSON编码。JSON是很通用的编码规范，jQuery、PHP都支持；

第二，返回需要用到的不是return，而是echo。这个很特别。我开始用的是return，然后在jQuery中死活得不到返回的数据流。

核心的jQuery代码是：

	var time_elapsed;
	var action;
$(document).ready(
 
	function()
	{
		$("a").filter("#long").click(
			function(event)
			{
				event.preventDefault();
				$.getJSON("ajaxcall.php", function(json)
					{
						time_elapsed=json.t;
						action=json.foo;
					}
				);
			}
		);
 
		$("div").filter("#div01").ajaxStart(
			function()
			{
				$(this).slideDown("slow");
			}
		).ajaxComplete(
			function()
			{
				alert("本次"+action+"的操作耗时"+time_elapsed+"秒。");
				$(this).fadeOut("slow");
			}
		);
	}
);

这里需要注意三点：

第一，变量的说明要在所有函数体之外，类似全局变量。虽然使用全局变量不好，但是在这样小规模的代码段中，也是可以接受的；

第二，请注意获得json数据流中变量的方法。由于在PHP中我是用JSON编码我的返回值，所以我必须用getJSON去调用PHP文件，从而获得数据。同时，可以注意到，经由getJSON得到的数据已经变成了一个对象数组，我可以用json.t，json.foo这样很直观的方法来获取返回值。

第三，请注意ajax调用和针对ajax调用时状态处理函数的声明。ajax的调用必须用$.getJSON的方式；而ajax调用状态中最重要的就是ajaxStart和ajaxComplete。

So far, so good.

=========================

经过一段时间和XAJAX的较劲，我发现了它的一些限制——当然，它还是一个很好的ajax框架：

1. 在XAJAX的调用中，我不能获得Smarty模板渲染后的内容。因而，想要借助这个方法而动态增加动态内容是不可能了；
2. 诸如onclick()/on????()等事件处理必须和一个HTML元素硬编码在一起，这会使得MVC结构出现了些许松散。

那么，有备用方案吗？有的，我选择了jQuery。

本章中的例子是一个很简单的例子。但是它包含了可能是jQuery中最重要的一个组成部分：选择。我们不光要选择哪些（个）控件要响应我们的行为，也要选择这个行为需要对哪些（个）控件起作用。

首先，我要找到响应我动作的控件。我知道它应该是一个按钮。但问题是，页面中有两个按钮，我该怎么“筛选”呢？

$("input")
	.filter("#click_me")
		.click(
			// More codes here...
		).end()
	.filter("#click_me_not")
		.click(
			// More codes here...
		);

jQuery中，每个选择都是用$(“”)声明的。在这里，我使用的是$(“input”)，其中的”input”参数经过jQuery的解析，会被理解为是一个DOM元素（input），而此时的文档DOM结构中有两个input元素，其id分别为：click_me和click_me_not。（至于input为什么会被解析为DOM元素，可以参考jQuery的js文件中的34-84行，有关jQuery.fn.init的声明。）

jQuery中所有方法还有一个共同的特点是：它们都返回jQuery对象，从而我们可以“串接”起一个一个的“动作”。这个做法是非常面向对象的。因此，接着上段中的选择，我继续使用filter方法来进行过滤。这次我使用的是#click_me参数。这表示，我提供的是一个元素的id。

根据参数的不同，filter方法还可以有更多的筛选类别，例如：根据元素的id值过滤（参数形如：#id）；根据元素名（参数形如：element_name）；根据元素所属的CSS类（参数形如：.class）；或者干脆就是所有元素（参数是*）。

因此，通过.filter(“#click_me”)我就获得了本例中第一个按钮的对象，然后再通过.click()给这个对象加上click的响应函数。

然后，我通过另一个很奇妙的end函数，将当前的对象集（只有一个click_me按钮）回复到上一个“破坏性”操作之前的对象集状态。什么是（对对象集有）“破坏性”的操作？我个人的理解是，会在一个对象集中增加、减少对象的操作。在本例中，显然end()上一个有“破坏性”的操作是filter，所以end()方法将把对象集恢复到filter之前，也就是$(“input”)之后，也就是应该有两个input按钮的时候。注意：在本例中，这个方法的使用不是必要的，因为我们不会为第二个按钮设置有意义的事件响应。但是，我觉得在这里引入这个函数是很有意义的。

接下来我们看第一个按钮的click函数体：

.click(
	function(event)
	{
		event.preventDefault();
		$("div").filter("#div01").removeClass("en-us")
			.addClass("zh-cn").html("本行已经被改变！");
	}
)

首先，我用event.preventDefault()来阻止该元素在单击时的缺省行为（一般而言，一个按钮是用来递交或者重置一个表单的），然后用标准的选择语法找出div中id为div01的div，取消它原来的CSS类en-us（从而取消了所有关联的CSS效果），加上新的CSS类zh-cn，并同时修改它的文本为“本行已经被改变！”

看，我们第一个例子就这么简单——虽然比大部分jQuery教程中的的第一个例子已经复杂了不少。