JQuery学习笔记

 

JQuery学习笔记

 

在回北京的火车上，闲来无事，突然想起了前一段时间学习JQuery的时候的经历，就随手写下来。

 

其实我写JS写了很长的一段时间，大概后2年多吧，但是一直没有使用过JQuery，对它了解的也不多；在我学习它的时候其实对

 

JS已经有一定程度的了解了，不敢说很厉害吧，但是也是中等靠上的水平吧，这正是开始做开发的的2年积累下来的；

 

原来一直在使用Prototype.js做开发，Prototype.js比较侧重于再语法上向Java 靠拢，然后提供了大量的基础运算扩展与封装

 

，对UI这块的扩展一直都不是特别的好；

 

但是JQuery是侧重于（或者是完全的侧重于）UI操作的，而且在语法上比较少见的大量闭包，想要完全的使用到项目中，是需要

 

很熟悉JQuery的各种特性和API的，这对我来说其实还是有一定的挑战的；

 

下面我就说一说我的学习过程吧

首先，我找了一个自己用来学习的案例：简单的工作流可视化编辑器

如图一：

图一：

这个是我最开始做的一个编辑器，它被放置在一个普通的HTML页面中，没有特别复杂的内容，主要就是解析XML信息、计算节点

 

位置，以及样式的控制

这个让我对JS的XML解析，使用JQuery进行定位，和JQuery的动作接口有了一个比较初步的认知

 

为了能够进一步的深入了解JQquery的API和特点，我又花了一点时间对这个编辑器进行了重构，如图二

图二：

这次的主要工作其实是把编辑器的内容前一到了iframe中，因为我发现在浏览器中想要比较好的控制位置，只有放入到iframe中

 

才是最保险的，因为如果直接在外面普通的页面中构建样式存在着环境太复杂的问题，从而导致具体的实现的样式依赖于其它的

 

HTML、js、css代码，这个主要是因为现在很多的页面使用DIV+CSS的浮动布局，从而导致编辑器无法正确的在页面中布局；

这也是很多的WEB可视化文本编辑器使用的方式，比如:eWebEditor...

另外的一个改变是节点的样式，以及连线的加入（虽然比较简单）

还加入了一个当前节点的指针指示

 

在重构出了第二版的基础上，我又一次进行了重构，也就是图三

图三：

在这一版中，我主要加入了节点连线的课配置以及左（右）键的菜单实现，并把相关的添加节点，删除，修改节点功能加入到了

 

菜单中

 

其实在整个的学习过程中，可以发现，如果只是想要使用一个工具构建简单的作品是比较简单的（图一），而要构建比较复杂的

 

，具备一定可用性的功能是很复杂的，我最大的收获其实都是在后面的两次重构中得到的（图二、图三）

 

也就是说，只有在不断的重构中才能真正的深入以及了解一个工具的特点以及特性

 

希望对大家有所帮助

 

如果大家对这个感兴趣，可以去 jquery 简易的流程图编辑控件 新版（20100907） 下载

 

评论

20 楼 deepthink 2010-12-14  

liuzhiqiangruc 写道

JQuery,强大。
此外，有没有又漂亮又写的程序好的女程序员呢？

你的要求太多了，祈祷上帝早点把你带走...

19 楼 liuzhiqiangruc 2010-12-13  

JQuery,强大。
此外，有没有又漂亮又写的程序好的女程序员呢？

18 楼 deepthink 2010-12-12  

chris_zley 写道

看了前面的话感觉跟楼主很有共鸣，但看了楼主做出来的东西后。。。发现差距还是挺大的，我还没入门啊

我是感觉自己和别人的差距太大了~~~呵呵

17 楼 chris_zley 2010-12-12  

看了前面的话感觉跟楼主很有共鸣，但看了楼主做出来的东西后。。。发现差距还是挺大的，我还没入门啊

16 楼 dasimm 2010-12-10  

jquery好长时间没用了  只是在做毕业设计的时候用过
现在差不多忘干净了
赶紧看看   谢~谢~楼主

15 楼 RonQi 2010-12-09  

楼主好文，去博客下载下来研究下
投良好啦

14 楼 sumaolin 2010-12-08  

deepthink 写道

wangxiaoxu 写道

lz前后都做（前端后端都做），还自谦不是女的....

我怎么感觉你这么邪恶呢~~~~`
我突然想起了一句话

引用

在Ji Nv的眼中没有女人是不卖的，她们对女人不卖这种事情的最大限度时“是不是价钱谈不拢”

勉励仁兄~~~

哈哈……
可以说是经典啦……

13 楼 deepthink 2010-12-08  

wangxiaoxu 写道

lz前后都做（前端后端都做），还自谦不是女的....

我怎么感觉你这么邪恶呢~~~~`
我突然想起了一句话

引用

在Ji Nv的眼中没有女人是不卖的，她们对女人不卖这种事情的最大限度时“是不是价钱谈不拢”

勉励仁兄~~~

12 楼 wangxiaoxu 2010-12-08  

lz前后都做（前端后端都做），还自谦不是女的....

11 楼 deepthink 2010-12-08  

dir_murong 写道

lzv5  jquery 我也就用了半年 觉得真是很灵活 很强大

以后这种对别人没有任何意义的废话就不要发了...

10 楼 dir_murong 2010-12-08  

lzv5  jquery 我也就用了半年 觉得真是很灵活 很强大

9 楼 deepthink 2010-12-07  

yimingxing 写道

楼主是做UI还是web前端呢？

前端后端都做....

8 楼 yimingxing 2010-12-07  

楼主是做UI还是web前端呢？

7 楼 alen456 2010-12-07  

jQuery这个技术，我早就很想学的了，但是暂时还没有时间，不错，JQuery这个技术主要是UI的开发~

6 楼 deepthink 2010-12-07  

曾经de迷茫 写道

蓦然发现，其实好多女程序员呀。

我可不是女的，别把我算进去~~~

5 楼 曾经de迷茫 2010-12-07  

蓦然发现，其实好多女程序员呀。

4 楼 askjsp 2010-12-07  

JQUERY我也快用了一年多了，真的很强大，API也挺详细的！

3 楼 javaso 2010-12-07  

下来研究一下，用jquery一小段时间，但还有不小地方不懂

2 楼 Javakeith 2010-12-06  

现在很多人写总是打夸概念，本来学语言就是用来做项目的，和LZ说的一样，通过项目才能学的更快！更牢固！

1 楼 foobar07 2010-12-06  

同意楼主的观点。寻找一个合适的项目，对学习编程真的很有帮助。