【jQuery】示例1：动态改变文本样式和内容

示范例子见：此处。

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

经过一段时间和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教程中的的第一个例子已经复杂了不少。