使用jquery框架

在一年多前写过一篇使用ajax技术创建web站点的文章, 那是裸用的XMLHttpRequest对象, 当时在文中说要介绍一些现有的javascript框架, 不过一不小心就拖了一年了. 刚好暑假期间更新了一个web站点, 其中使用了当前流行的一个轻量级框架jQuery.

话说现在各种框架层出不穷, javascript的jQuery, Prototype, Dojo, 按笨重程度排序. python的Django. php的Codeigniter. 再到Cocoa, Carbon 之类的. 有了framework的好处, 可以让你从原来专注于编程细节的开发中解脱出来, 并且可以让你的程序结构紧凑规范.

jQuery 整个库非常的精悍, 只有一个javascript函数, 其中jquery-pack-xxx.js是精简之后的版本, 体积很小, 建议使用. 现有七类函数, 并且支持plugins, 比如著名的lightbox.

Core 基础类, 比如jQuery对象操作函数
DOM DOM操作函数, 比如增删DOM元素, 修改DOM属性等
CSS CSS操作函数, 数量较少, 常用来设置style
Javascript 包含几个功能强大的数组操作函数, 比如 $.each(obj, fn), $.grep(array, fn, inv), $.map(array, fn)
Effects 很常用的动态效果, 淡入淡出, 伸缩等
Events 非常重要的一组函数, 管理浏览器事件. 比如鼠标动作, DOM对象载入完成等
Ajax Ajax rpc系列函数, 良好的封装了XMLHttpRequest对象

一个例子

1) 了解一下jQuery的$(document).ready(fn)事件函数, 当DOM载入完后要做的事情都能放在这里, 理解成注册到window.load事件就行了.

2) 要编写ajax程序, 一定会有rpc请求. jQuery 封装了一系列强大的ajx函数. 我常用的是 $.post(url, params, callback). 比如, 一个最简单的应用是, 你按下一个button, 无刷新的改变一块div的内容.

现有的html页面是这样的:

<div id="result"><input id="mark" type="text"><input type="button" id="submit">

原来的XMLHttpRequest那一坨函数你都可以忘记了, 你要做的只有如下寥寥几行. 你向 rpc.php 请求一个变量 param, 它的值是text filed中输入的, 然后 rpc.php 就给返回结果给callback函数, 该函数再更新 div 中的内容.

$(document).ready(function(){
    $("#submit").click(function(){
        $.post("rpc.php",
        {
            param : ""+$("#mark").val()+""
        },
        function(data){
           $("#result").html(data);
        });
    });
});

而rpc.php中可以直接返回 html 代码.

if($_POST["param"]){
    echo "hello world!";
}

如果你想返回 XML, js端处理则相对麻烦一些. 比如你返回了这样的内容:

<?xml version="1.0" encoding="UTF8"?>
<list>
  <item>1</item>
  <item>2</item>
</list>

jQuery也提供了很方便的XML存取函数, 替换上边的callback即可:

function(xml){
    $("<ol></ol>").appendTo("#result");
    $(xml).find("item").each(function(){
          var v = $(this).text();
          $("<li></li>").html(v).appendTo("ol");
    });

3) 这里就要说到jQuery访问DOM元素的方法了, 异常的简洁, 并且重载得很好. 在jQuery中, 使用 $() 函数访问DOM元素, 比如class, id等等. 比如你想获得 <input id="mark" type="text"> 这个对象, 直接 $("#mark") 就可以了. 如果你想获取所有的 input 对象, 直接 $("input").

4) 熟悉函数式编程的同学一定非常喜欢jQuery的这种调用方式. jQuery直接匿名函数和传递调用. 比如你想div中的内容动态的显示出来, 可以直接 $("#result").html(data).show("slow").

一般用于rpc请求的脚本, 你可以直接保存成 rpc.php. 如果你只是在同一个域下使用, 可以用session变量防止外部的非法访问.

而如果你想在php和javascript之间交换一些变量, 可以把javascript脚本保存成php脚本, 不过记得要告诉服务器该文件MIMIE类型.

header("Content-Type: application/x-javascript");

一些技巧

节点属性

可以在一个节点里里增加任意名字的属性（attribute），然后用attr函数获取，即使这样的名字并不存在于HTML标注中。

比如，增加一个名为foo的属性，并从js里读取出来：

<a foo="test name">Test Link</a>

$("a").attr("abc");

选择器

可以使用find函数，在某子树里进行搜索，jQuery的选择器功能非常强大，需要仔细体会。

例如，在当前节点$(this)里寻找span节点，这里也可以使用 $("span", this) 替代 $(this).find("span")：

<div id="foo"><span>bar</span></div>

$("#foo").hover(function(){ var bar = $("span", this).text(); });

例如，在当前节点里寻找第一个链接，或者寻找class=”bar”的那个链接：

<div><a name="foo">foo</a><a class="bar">bar</a></div>

$(".bar").parent().hover(function(){
    var foo = $(this).find("a:first");
    var bar = $(this).find("a.bar");
});

例如，获取选中的select值：

<select id="foo"> ... </select>

var val = $("select#foo option:selected").val();

同样，可以利用选择器默认选中某个option的值，假设要选择的option值为 bar：

$("select#foo option[value="+bar+"]").attr("selected", "selected");

例如，提交所有选中的checkbox：

<div id="foo">
  <input type="checkbox" />
  <input type="checkbox" />
</div>

var fooes = [];
$("#foo :checked").each(function() { fooes.push($(this).val()); });
$.post("?", { 'fooes[]': fooes },function(data){ /* ... */ });

定位符

获取URL的#符号后的部分，用于定位，例如：

var sharp = document.location.hash.replace('#', '');

一个例子

一些技巧

节点属性

选择器

定位符

参考链接: