JQuery 初体验(建议学习jquery)


Posted in Javascript onApril 25, 2009

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学会了,而且还很好用。难怪这么多人喜欢!

Javascript 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
jQuery 注意事项 与原因分析
Apr 24 #Javascript
javascript Excel操作知识点
Apr 24 #Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 #Javascript
在线编辑器中换行与内容自动提取
Apr 24 #Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 #Javascript
jQuery对象和DOM对象相互转化
Apr 24 #Javascript
JavaScript 学习点滴记录
Apr 24 #Javascript
You might like
西德产收音机
2021/03/01 无线电
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
python多线程方式执行多个bat代码
2016/06/07 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python+flask实现API的方法
2018/11/21 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python hough变换检测直线的实现方法
2019/07/12 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
火车的故事教学反思
2014/02/11 职场文书
合作协议书
2014/04/23 职场文书
小学课外阅读总结
2014/07/09 职场文书
师德师风剖析材料
2014/09/30 职场文书
户外拓展训练感想
2015/08/07 职场文书
Python实现简繁体转换
2021/06/07 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫