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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
Vue性能优化的方法
Jul 30 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
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 Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php 文章采集正则代码
2009/12/28 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
this和执行上下文实现代码
2010/07/01 Javascript
Jquery判断$("#id")获取的对象是否存在的方法
2013/09/25 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
JavaScript知识点整理
2015/12/09 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python进程和线程用法知识点总结
2019/05/28 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
无故旷工检讨书
2014/01/26 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
化工厂员工工作总结
2015/10/15 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
python周期任务调度工具Schedule使用详解
2021/11/23 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers