Ruby's Louvre

摘要： 既然说是入门，本文给出的函数都尽可能短小，但不失强大，并兼容所有浏览器。要想拖动页面上的一个元素，说白了就是让它实现位移。CSS中最能体现这种思想的是绝对定位，因为绝对定位能使元素脱离原来的文档流，但原来的物理空间还保留着，这就不影响周围的元素了。接着下来就是设置事件侦听器，分别在mousedown，mousemove，mouseup绑定对应的回调函数，一旦触发这些事件，浏览器就会自动调用它们。我... 阅读全文

摘要： 1.不要看到别人的回复第一句话就说：给个代码吧！你应该想想为什么。当你自己想出来再参考别人的提示，你就知道自己和别人思路的差异。2.初学者请不要看太多太多的书那会误人子弟的，先找本系统的学，很多人用了很久都是只对部分功能熟悉而已，不系统还是不够的。3.看帮助,不要因为很难而自己是初学者所以就不看；帮助永远是最好的参考手册，虽然帮助的文字有时候很难看懂，总觉得不够直观。4.不要被对象、属性、方法等词... 阅读全文

摘要： 现在网上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法，累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。 //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offset... 阅读全文

摘要： 继续上一部分，我们要看一下颜色。火狐好像不管三七二十一都会转变为rgb格式，不过我们通常比较习惯的是hex格式。这就用到以下两函数。 var rgb2hex = function(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3]) } var tohex = function(x) { var hexDigits = ['0','1','2','3 阅读全文

摘要： 设置与获取样式属性是UI控件与特效库非常关键的部分，设置样式我们基本可以用cssText来包打天下，但获取样式就不是这回事了。JQuery，mootools，Ext等类库在这部分实现得非常艰辛，盘根错节地动用一大堆方法，因此想把这部分抠出来难度很大。深入研究它们的实现后，根据我积累的CSS知识，终于做出一个非常简炼的版本出来。它相当于JQuery.cssCur吧，不过或许功能还丰富一些，按饮食业话说叫“加量不加价”，我的可能还应叫“加量还减价”……版本还处于Beta阶段，由于只个工具函数就不弄成类了。 var getStyle = function(el, name){ ... 阅读全文

摘要： 一个很显浅的寓言，千年老树，电打雷劈，屹立不倒，却毁于蝼蚁的侵袭之下。自以为精通CSS的人，常常被一些小问题搞到头晕脑胀。通常是一个很小的数值，经过层层放大歪曲后，整个布局就走形了。CSS是一门很简单的语言，易学易用，但也最容易出垃圾代码。这是没有深入研究这门语言所致。本人认为，CSS是由以下三大块构成的：默认值，继承系统与加权系统。默认值，也就是浏览器在用户没有设置属性的情况下，默认指定的属性。... 阅读全文

摘要： 如果不使用类库或者没有自己的类库，储备一些常用函数总是有好处的。(10)addEvent网上最流行的版本是Scott Andrew的，据说javascript界曾举行一场比赛（此事件我们可以在Pro Javascript Techniques第100页看到）或浏览PPK的网站，征求添加事件与移除事件的函数，他就是其获奖者。下面就是他的实现： function addEvent(elm, evTy... 阅读全文

摘要： 如果能用字面量创建正则就最好不过，显然有时我们不得不使用new RegExp()这种大消耗的创建方法，比如语法高亮与排版就大量用到正则表达式，要用到的patten越多，需要的时间就越长，火狐好像是12秒就发出警告，IE就直接假死。这时我们就需要利用组存大法要提高我们程序的性能了。通常摆在我们眼前的如下两种选择来作为我们的容器，数组或对象。我这里选择前者，前者更轻量一点。下面我们就hasClass函... 阅读全文

摘要： 以前我就是一篇博文就给出一个好用的函数，它在我几篇博文中被广泛运用的。最近看了不少东西，于是便有了这篇博文，以梳理我学到的新东西。毫无疑问，基于表现与结构相分离的原则，直接导入一个新的样式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的DIV，从设置样式的角度看，就是把它绝对定位，以防影响原来的文档流，然后一点点改变其top与left的值实现移动的效果。由于拖动是有时间概念的，一秒24帧，样式表不可能面面俱到都把它们写进去。因此动态生成样式规则与快速修改样式规则是非常有必要的，W3C为此做了大量的工作，在DOM2.0中，扩充了不少接口。退一步说，表现与结构相分离也不止导入样式表这一条路 阅读全文

摘要： 数组是一段线性分配的内存，它通过整数去计算偏移并访问其中的元素。数组是很快的数据结构，但不幸的是，Javascript并没有像这种数组一样的数据结构。Javascript的数组实质是对象，它把数组的下标转换成字符串，用其作为属性，因此它明显比真正的数组慢，但它可以更方便地使用。 改变自身pop,push,reverse,shift,sort,splice,unshift, 不改变自身concat,join,slice,indexOf,lastIndexOf(后两个为1.6),1.6新增的迭代器：map,filter,forEach,every,some,1.8新增reduce,reduceR. 阅读全文