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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
js实现二级联动简单实例
Jan 11 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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
php检查页面是否被百度收录
2015/10/28 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
深入分析PHP设计模式
2020/06/15 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
python 控制语句
2011/11/03 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python 的类、继承和多态详解
2017/07/16 Python
python 全局变量的import机制介绍
2017/09/07 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python 切分数组实例解析
2019/11/07 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python 画图 图例自由定义方式
2020/04/17 Python
django中cookiecutter的使用教程
2020/12/03 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
留学顾问岗位职责
2014/04/14 职场文书
青年志愿者活动总结
2014/04/26 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
经理聘任证明
2015/03/02 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python