当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 初体验(建议学习jquery)

Javascript
js 方法实现返回多个数据的代码
Ext 表单布局实例代码
javascript document.referrer 用法
JavaScript 字符编码规则
JS 动态加载脚本的4种方法
jQuery textarea的长度进行验证
jQuery select的操作实现代码
jQuery 1.2.x 升級 1.3.x 注意事项
关于viewport,Ext.panel和Ext.form.panel的关系
日期 时间js控件
JavaScript的parseInt 进制问题
javascript 有用的脚本函数
javascript 两个字符串比较函数
javascript 代码运行器
js arguments.callee的应用代码
JavaScript Table排序 2.0 (更新)
给Function做的OOP扩展
<script defer> defer 是什么意思
FF和IE之间7个JavaScript的差异
javascript获取当前ip的代码

Javascript 中的 JQuery 初体验(建议学习jquery)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 158 ::
收藏到网摘: n/a

最近从朋友那儿听说,写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,用它来编号,顺便小试下牛刀。

01 $(function() {
02 var indexs= [0, 0, 0];
03 $(":header").each(function() {
04 var content = $(this).html();
05 if ($(this).is("h1")) {
06 indexs[0]++;
07 indexs[1] = 0;
08 content = "" + indexs[0] + ". " + content;
09 } else if ($(this).is("h2")) {
10 indexs[1]++;
11 indexs[2] = 0;
12 content = "" + indexs[0] + "." + indexs[1] + ". " + content;
13 } else if ($(this).is("h3")) {
14 indexs[2]++;
15 content = "" + indexs[0] + "." + indexs[1] + "."
16 + indexs[2] + ". " + content;
17 }
18 $(this).html(content);
19 });
20 });

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

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

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

20
21 $(".path").each(function() {
22 var content = $(this).html();
23 content = content.replace(/(\$\(.*?\))/, "$1")
24 $(this).html(content);
25 });

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

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