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 相关文章推荐
Javascript 命名空间模式
Nov 01 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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自动更新新闻DIY
2006/10/09 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php使用PDO方法详解
2014/12/27 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Python线程threading模块用法详解
2020/02/26 Python
Python 字符串池化的前提
2020/07/03 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript