摘要：最近公司业务需要，不得不提前原来的计划，提前开始研究无框架的Javascript动画。不使用任何框架，就算实现一个简单的slide和fide都需要大费周章，但感觉乐在其中，毕竟曾经接触过flash开发。 跟flash一样，动画的原理就是由一帧一帧静态画面连贯组成的貌似动态效果，其实放慢足够的倍数，就一张张静态画面。看过胶片式电影的朋友都明白，只要每秒超过24帧，而其间的间隔人眼难以觉察到。关于动画原理，这里就不加赘述了。 想把元素框移动起来，首先要找到元素框的位置，也就是元素框在页面的坐标，不同的参照物有不同的坐标位置。先来普及几个基本概念吧！ offsetWidthclientWi... 阅读全文
javascript表单之 —— 选择框操作方法详解
2013-04-11 15:10 by MoltBoy, 1244 阅读, 0 推荐, 收藏, 编辑
摘要：表单元素的选择框有单选和多选之分，都是通过<select>和<option>元素来创建，多选选择框只须添加multiple特性：multiple="multiple"，建议不要缩写，为更好地兼容xhtml。 选择框既然是表单元素之一，当然会继承表单字段的共有的属性和方法，例如：disable、form、name、readOnly、tabIndex、type、value、focus()、blur()；另外还有共有的表单事件：例如：blur、change、focus。这些共有的属性和方法都具有明显的语义性，所以在这里就不加详解了，着实想不起可以googl 阅读全文
javascript表单之 —— 文本框输入验证详细解读
2013-04-10 18:24 by MoltBoy, 1088 阅读, 0 推荐, 收藏, 编辑
摘要：在前端开发中经常会遇到限制文本框输入特定的字符类型，或者过滤某些字符。而HTML提供的文本框本身没有验证的手段和功能，因此必须使用JS来完成这项功能，完善此项功能还得综合运用事件和DOM接口。废话不多说了，看看如何让普通的文本框变成完美的输入功能控件。 一、屏蔽字符 过滤掉某些不需要出现的字符。例如：手机号码不能包含非数字字符，邮政编码也是如此。响应文本框输入字符操作的是keypress事件，因此，可以通过阻止这个事件的默认行为来屏蔽此类字符的输入。下列代码为只允许用户输入数值：（本文重思路轻代码，都是用DOM0级的事件方式，如需兼容各浏览器的实现代码，请另外联系） elemen... 阅读全文
透过Javascript一些变量定义及简单运算实验看JS内部运行机制
2013-04-07 20:16 by MoltBoy, 432 阅读, 1 推荐, 收藏, 编辑
摘要：非常经典的几道面试题：if(!("a" in window)){ var a = true;}alert(a);以上题目运行结果为“indefined"，其实把”a“看做a是不是更容易理解。变量a在全局作用域定义,而全局作用域（global）变量都是window对象的属性，因而a in window自然为true，剩下的就不用解释了吧！另外，全局变量对象的声明：VO（global）{a:undefined}。举一反三类推，”a“ in top 或者 ”a“ in self呢，结果跟window是一样的，上诉运行环境中，top就是window，而self基本上可以跟 阅读全文
CSS浮动规则详解（推荐）
2013-04-07 00:17 by MoltBoy, 714 阅读, 0 推荐, 收藏, 编辑
摘要：CSS中float是在一系列详细规则控制浮动元素的摆放位置，可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点：1、浮动元素的左边（右边）外边界不能超出其包含块的左边（右边）的内边界，绝对不会越位溢出的。什么？什么叫包含块？不知道的朋友到前面几篇帖子看看。2、浮动元素的左边（右边）外边界必须是包含块中之前出现的浮动元素的右边（左边）外边界，请注意前后出现的左右的顺序，也就是说只能挨着先出现的浮动元素的右边边界摆放，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。如此，浮动元素之间就不会发生重叠，这也是浮动相比定位的优势所在。另外，浮动元素与其他元素不会发生折叠。3、左浮 阅读全文
把每天当成人生第一天来过，把每一天当成人生最后一天来过
2013-04-06 17:30 by MoltBoy, 752 阅读, 0 推荐, 收藏, 编辑
摘要：记得，乔布斯在一大学的毕业典礼上说过三个故事，让人印象最深的是八个字：“求知若渴，虚心若愚”。仔细体会个中道理，我觉得可以精简为两个字“忘记”。 是不是有点太玄乎了，感觉像张三丰教太极！其实，求知若渴，就是让你忘记你肚子里已经装有了多少知识，忘记今天中午已经吃了饭，当成肚子空空，三天滴水未进，何尝做不到求知若渴；虚心若愚，也即是让你忘记已有的点点成绩，当成刚刚毕业的大学生，初进公司身边都是高手牛人，放低姿态虚心讨教，如何做不到虚心若愚，每天进步呢？ 总结起来，就把每一天当成人生第一天，忘记已经拥有的，忘记已经付出的，忘记身份地位等一切；把每一天当成人生最后一天，珍惜身边一切，珍惜最为宝... 阅读全文
简单的几个案例，对动态添加HTML进行了性能比较（包括innerHTML)
2013-03-31 23:06 by MoltBoy, 1021 阅读, 1 推荐, 收藏, 编辑
摘要：在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗... 废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几种比较复杂的方法，例如：利用cloneNode（），理论上比直接create性能能提高30%左右，当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码！<html> <head> ... 阅读全文
夜深人静——再谈margin：0 auto；居中的原理
2013-03-30 00:00 by MoltBoy, 4489 阅读, 1 推荐, 收藏, 编辑
摘要：刚刚学习CSS的时候，经常需要用到块元素居中，于是乎度娘、google一番，当然查专业资料建议用google，题外话！学会了给块元素设置个width，然后给margin特性设为0 auto，如此块元素便缴枪投降，乖乖居中了。 那是为什么呢？这中间的原理和实现过程是如何呢？夜深了，待我喝杯咖啡，慢慢说来！ 上一篇文章谈到了盒子模式，这个居中的原理也用到了盒子模式的知识点。块元素的水平方向有七个宽度属性：①、左外边距，②、左边框，③左内边距，④元素宽度（width），⑤右内边距，⑥右边框，⑦右外边距。，正常文档流中，七大属性排排坐，宽度刚好是元素包含块的宽度，也是父元素的width（内容宽度），. 阅读全文
谈谈几大Box Model以及Element Width、Element Background Width和Containing Block Width
2013-03-29 23:13 by MoltBoy, 536 阅读, 0 推荐, 收藏, 编辑
摘要：从最初认识Box Model（盒子模式），抱着神秘和期待的心情，一心想着盒子里装了什么？盒子什么结构？为何叫盒子模式？ 先从盒子模式的叫法谈起吧！在一些大牛的书上活着博客上，看到了这么几个盒子模式：IE Box Model、W3C Box Model、CSS Box Model。其实比较起来，W3C Box Model和CSS Box Model只是叫法上面的区别，实质内容完全等同（===）。而IE Box Model和另外两种有一定的区别，主要在于宽度和高度的取值方面。 在盒子模式中，宽度又弄出了许多个概念来，内容宽度（content width）、内边距宽度（padding width.. 阅读全文
HTML、CSS和JAVASCRIPT三者关系
2013-03-29 10:38 by MoltBoy, 584 阅读, 0 推荐, 收藏, 编辑
摘要：接触这三样技术有一段时日，也算是刚刚入门吧，但一直把前端开发看成一门艺术，而这门艺术需要这三样技术的完美结合，只有将其配合的天衣无缝才能做出精工细琢的作品！ 三者好比舞蹈演员，HTML结构如同演员的身体结构（身高、五官、发质等条件），CSS样式就像演员的服装和装饰（化妆、发型、服装等外观元素），JS就如同演员的舞蹈动作、表情等交互性的元素，观众只有欣赏到服装精美，动作流畅，能通过动作表情表达出舞蹈的内部涵义的舞蹈，才会给予热情的掌声！要做到这些，必须明白一句话，台上一分钟，台下十年功！PS：src和href的区别一直没有大牛出来详细说明，目前除了概念性的区分，一直还不明白为何在个元素使用不同. 阅读全文