JQuery 初体验(建议学习jquery)

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

赞 (0)

相关推荐

  • JQuery 初体验(建议学习jquery)

    在JQuery的网站上发现,这个东东提供两种版本下载.一种是原版,接近120K,另一种是把水分压缩掉的,近60K.太久没做应用技术了,没想到居然出来了这么多新鲜玩意儿,JavaScript还可以压缩水分,所以顺便又去了解了一下JavaScript的Packer(这是在线链接),如果有兴趣,这里可以下载它的.NET.Perl.Wsh和PHP等几个版本. 不扯远了,说回正题.压缩版的JQuery的确合适网络传输提速,但压缩后的JQuery只有一行,不怎么适合VCS(版本控制系统)管理.所以还是先用非

  • web开发人员学习jQuery的6大理由及jQuery的优势介绍

    jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS.许多网站建设公司已经加入了jQuery的阵营,你的公司也该加入了. 下面就来看看jQuery为何对公司有如此大的影响吧. 1.jQuery简化了工作 学习jQuery非常容易--毕竟这个函数库由更简短.更简洁的代码创建.jQuery具有语句简洁.编码标准开放的特点,这些特点帮助开发者缩短了配置网站和应用所需的时间. 另外,使用jQuery创建web页面时,不要

  • 8个超棒的学习 jQuery 的网站 推荐收藏

    8个超棒的学习 jQuery 的网站 推荐收藏

    对于初学者来说,有的时候很难找到一个好的学习jQuery的网站,所以本文收集了8个很棒的 jQuery 学习网站推荐给大家. 1. Learning jQuery 最好的 jQuery 资源博客之一,从 jQuery 高手那里获得宝贵的经验. 2. jQuery Mix 一个内容非常丰富的网站,有关 jQuery 的各种各样的信息. 3.jQuery for Designers 非常棒的一个 jQuery 资源和教程网站,帮助你成长为 jQuery 高手. 4. 15 Days of jQuer

  • 2012年开发人员的16款新鲜的jquery插件体验分享

    2012年开发人员的16款新鲜的jquery插件体验分享

    jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序. 保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天,我们似乎可以发现一些新的东西,尖端的东西,有时我们发现的东西,是真正的创新和必要的对于我们的工作来说.下面是从2012年开始的新的和令人兴奋的

  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    使用jQuery还可以让我们从各大浏览器不兼容的噩梦中解脱出来,最新版的jQuery还增强的对HTML5的支持,使得我们更加应该使用它.但是jQuery的源码很长,有些地方的实现还很巧妙,使得我们仅仅会javascript也未必能很好的理解每个函数是怎么运行的.下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题. 这个jquery源代码查看器,还不是很强大,只是能够简单的查看函数引用,但是不能返回. 我上这个网上下载下来了,准备改进一下,你们可以先下载来用一用,有什么意见和

  • 从零开始学习jQuery (一) 开天辟地入门篇

    从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery. 转载请注明子秋出品!博客园首发! 二.前言 首先道个歉! "从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了, 原因就是

  • 从零开始学习jQuery (二) 万能的选择器

    从零开始学习jQuery (二) 万能的选择器

    一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步.

  • 轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）

    一.EasyUI创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中.为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点. 本文将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览. 创建树形网格(TreeGrid) <table id="test" title

  • 深入学习jQuery Validate表单验证

    深入学习jQuery Validate表单验证

    本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea

  • JQuery中attr属性和jQuery.data()学习笔记【必看】

    用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

随机推荐