Skip to content

JQuery 初体验 #16

Open
Open
@jamesfancy

Description

@jamesfancy

最近从朋友那儿听说,写 JavaScript,JQuery 是个不错的东东,市场份额达到 70%之巨。所以去下载了一份体验了一下。

在 JQuery 的网站上发现,这个东东提供两种版本下载。一种是原版,接近 120K,另一种是把水分压缩掉的,近 60K。太久没做应用技术了,没想到居然出来了这么多新鲜玩意儿,JavaScript 还可以压缩水分,所以顺便又去了解了一下 JavaScript 的 Packer(这是在线链接),如果有兴趣,这里可以下载它的 .NET、Perl、Wsh 和 PHP 等几个版本。

不扯远了,说回正题。压缩版的 JQuery 的确合适网络传输提速,但压缩后的 JQuery 只有一行,不怎么适合 VCS (版本控制系统)管理。所以还是先用非压缩版的,以后发布产品的时候再压缩就好。

在 SVN 上创建好项目之后,写了个 Readme 上去,因为涉及到配置之类的东西,用纯文本写的不方便阅读,所以用 HTML 写。之所以不用 WPS (或 Word )写,同样是因为 VCS 的原因,还是非二进制的文本好控制些。不过 HTML 里面的 Header 没得 Word 的自动编号功能,如果哪天在一堆 Header 中间插入一个,就要把后面的编号全部打乱,改起来痛苦。所以就想起了 JQuery,用它来编号,顺便小试下牛刀。

$(function() {
    var indexs= [0, 0, 0];
    $(":header").each(function() {
        var content = $(this).html();
        if ($(this).is("h1")) {
            indexs[0]++;
            indexs[1] = 0;
            content = "" + indexs[0] + ". " + content;
        } else if ($(this).is("h2")) {
            indexs[1]++;
            indexs[2] = 0;
            content = "" + indexs[0] + "." + indexs[1] + ". " + content;
        } else if ($(this).is("h3")) {
            indexs[2]++;
            content = "" + indexs[0] + "." + indexs[1] + "."
                + indexs[2] + ". " + content;
        }
        $(this).html(content);
    });
}); 

哈哈,效果还不错。但其实这个代码是第二版了,最开始的时候是按 h1h2h3 来搜索的,处理起来还要麻烦些。特别是 h3 还放在一个 classcontentdiv 里面,用 JQuery 选项的时候还用到了 :first 过滤器,像这样:

var h3 = $(this).nextAll(".content:first").children("h3");

后来想到,说明里很多路径都是用变量代替的,比如 $(PHP_HOME) 这样的,不如加个颜色标识,所以又添加了这样一段代码在 $(function() {...}) 中。

$(".path").each(function() {
    var content = $(this).html();
    content = content.replace(/(/$/(.*?/))/, "<span class='var'>$1</span>")
    $(this).html(content);
});

还好我所有路径都是用 <span class="path"></span> 包起来的,只需要把所有 .path 对象找出来,用正则表达式把 $(...) 替换成 <span class="var"></span> 就好。

总的来说,熟悉 CSS 的人写 JQuery 还是很快的。看一个简单的教程,再浏览一下 JQuery 的文档,个把小时,就能把 JQuery 学会了,而且还很好用。难怪这么多人喜欢!

顺便感谢一下发芽网的在线代码高亮工具,写 Blog 中的代码高亮挺方便的。

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions