随笔档案「2016年1月26日」：不使用类的继承，纯粹使用对象 ... - 迷茫小飞侠

不使用类的继承，纯粹使用对象

摘要： var myMammal = { name : 'Herb the Mammal', get_name : function () { return this.name; }, says : function () { return this.saying || ''; }};var myCat =... 阅读全文

posted @ 2016-01-26 17:12 迷茫小飞侠阅读(133) 评论(0) 推荐(0)

类（对象）的定义自定义对象构造函数

摘要：对象创建和继承对象创建指的是自定义对象构造函数，用于批量创建拥有共同属性方法的对象。例如创建一个人对象构造函数，然后实例化出小明，小红继承指的是两个引用类型对象间属性和方法的继承，原理是利用prototype，因为实例内部保留了对构造函数prototype的指针，prototype保留对该构造函数的... 阅读全文

posted @ 2016-01-26 17:11 迷茫小飞侠阅读(516) 评论(0) 推荐(0)

数组删除操作 splice

摘要：原理通过设置函数的 length 属性var a = [1, 2, 3, 4];a.length = 3 ;结果： a = [1,2,3] 阅读全文

posted @ 2016-01-26 17:08 迷茫小飞侠阅读(152) 评论(0) 推荐(0)

继承

摘要：继承主要就是通过prototype chaining 来实现的1、Prototype Chaining：function SuperType(){this.property = true;}SuperType.prototype.getSuperValue = function(){return t... 阅读全文

posted @ 2016-01-26 17:08 迷茫小飞侠阅读(164) 评论(0) 推荐(0)

this 和 new 构造函数

摘要： function people(name) { 这样定义是在全局命名空间（global namespace） name: name, sayname: function() { alert(this.name); }}jack = people("jack"); 这个时候 this... 阅读全文

posted @ 2016-01-26 17:07 迷茫小飞侠阅读(243) 评论(0) 推荐(0)

defaultView and parentWindow

摘要： defaultView 只读的which is used to represent the currently rendered view of the document返回的值通常是包含目前document的 window对象ie9 开始支持该属性，之前的版本使用 parentWindow 属... 阅读全文

posted @ 2016-01-26 17:06 迷茫小飞侠阅读(213) 评论(0) 推荐(0)

遍历数组优化

摘要： var a, i = 0, arr = [1,2,3,4];while(a = arr[i++]){ alert(a) 输出 1，2，3，4}从零开始遍历数组，有点类似于for，但是while 不需要知道数组的长度，只要还有数据就会递增更好的遍历数组的方法var i,i... 阅读全文

posted @ 2016-01-26 17:06 迷茫小飞侠阅读(481) 评论(0) 推荐(0)

盒子模型中问题

摘要：在盒子模型中，如果父元素(div)设定了宽度，那么它的子元素(div)宽度默认为 100%这个时候对设置子元素的padding border宽度进行设置，盒子会向内扩展 (图中第二种情况)也就是：父元素宽度 = 子元素 border+padding+width (子元素宽度没设置)但是如果显式对... 阅读全文

posted @ 2016-01-26 17:04 迷茫小飞侠阅读(247) 评论(0) 推荐(0)

outline

摘要： a标签两种button按钮默认带有一个虚线 outline 当他们被单击和激活以后outline和border 很类似，但是有不同1、outline 不能针对特定的边赋值，也就是没有 border-left 这种2、在盒子模型中没有outline，所以当你添加和去除这个属性不会改变布局（... 阅读全文

posted @ 2016-01-26 17:04 迷茫小飞侠阅读(317) 评论(0) 推荐(0)

高度自动相等方法

摘要： 1、margin 为负值margin-bottom:-3000px; padding-bottom:3000px; 一正一负配合父元素 overflow:hidden;#content{overflow:hidden;}.left{width:200px; margin-bottom:-3000... 阅读全文

posted @ 2016-01-26 17:03 迷茫小飞侠阅读(189) 评论(0) 推荐(0)

正则表达式

摘要：创建表达式的两种方式var pattern1 = /[bc]at/i;var pattern2 = newRegExp(“\\?”); （ var pattern2 = new RegExp(“[bc]at”, “i”);）注意第二种方式要加上双\\ ，因为如果 \? 的话解析的时候会尝... 阅读全文

posted @ 2016-01-26 17:02 迷茫小飞侠阅读(222) 评论(0) 推荐(0)

绝对定位相对定位

摘要：绝对定位有点像 float:left; 有包裹性和破坏性但是绝对定位会脱离文档流，高度没了，宽度也没了，绝对元素会层叠到一起position：absolute的块状元素会与float 元素重合，而行内元素不会img{float:left;} div{position: absolute;}... 阅读全文

posted @ 2016-01-26 17:02 迷茫小飞侠阅读(124) 评论(0) 推荐(0)

replace 使用函数作为第二参数

摘要： var sToChange = “The sky is red.”;var reRed = /red/;var sResultText = sToChange.replace(reRed, function(sMatch) { return “blue”;});sMatch 指的是被匹配到到的对象，... 阅读全文

posted @ 2016-01-26 17:00 迷茫小飞侠阅读(267) 评论(0) 推荐(0)

float 浮动

摘要：浮动最开始的目的是为了让文字环绕图片（一个图片和多行文字对齐） 1、包裹性：元素添加 float 属性之后自动变成 inline-block 元素，能设置宽高 2、破坏性：破坏自身高度，还会使父元素没有了高度，因为里面元素没有了高度在css中高度有两个模型产生 1、Box 模型 margin+ 阅读全文

posted @ 2016-01-26 16:59 迷茫小飞侠阅读(197) 评论(0) 推荐(0)

line-height 行高

摘要：行高：两条文字基线之间的距离，基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。如果设为数字的话，表示行高为当前font-size的倍数，默认1.14，不用带单位也可以如果是把它设为和高度... 阅读全文

posted @ 2016-01-26 16:59 迷茫小飞侠阅读(187) 评论(0) 推荐(0)

元素隐藏

摘要： { display: none; } 不占据空间，无法点击{ visibility: hidden; } 占据空间，无法点击{ position: absolute; clip:rect(1px 1px 1px 1px);} 不占据空间，无法点击{ position: absolute; to... 阅读全文

posted @ 2016-01-26 16:58 迷茫小飞侠阅读(121) 评论(0) 推荐(0)

现代浏览器内部

摘要： http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 主要结构 1、用户界面如：地址栏，前进后退按钮，书签等 2、浏览器引擎在用户界面和渲染引擎之间传输指令 3、呈现引擎解析显示用户请求的内容，几乎都是单线程除了网阅读全文

posted @ 2016-01-26 16:57 迷茫小飞侠阅读(217) 评论(0) 推荐(0)

css 权重特殊性

摘要：选择器的特异性由CSS2 规范定义如下： !important的规则比其他的权值都大 p{color: red !important}如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)ID 属性的个数 ( b)其他属性和伪类的个数 ( c)元素名称和伪... 阅读全文

posted @ 2016-01-26 16:56 迷茫小飞侠阅读(255) 评论(0) 推荐(0)

回流与重绘

摘要：强制重绘ele.setAttribute( 'style' , ele.getAttribute('style' ));1、当render tree （渲染树）中的部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时，称之为回流每个页面至少回流一次，就是在页面第一次加载的时候。也就是将... 阅读全文

posted @ 2016-01-26 16:55 迷茫小飞侠阅读(534) 评论(0) 推荐(0)

各种浏览器hack

摘要：此内容只有IE可见此内容只有IE5.0以上版本可见lt 表示less than 当前条件版本以下的版本，不包含当前版本。gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。lte 表示less than or equal 当前版本以下版本，并包含当前版本。blo... 阅读全文

posted @ 2016-01-26 16:54 迷茫小飞侠阅读(242) 评论(0) 推荐(0)

图片按钮的文字隐藏

摘要：方法一 text-indent: 100%; overflow:hidden;方法二 font: 0/0 a; overflow:hidden;（字号大小0, 行高0，字体a是因为就一个字母，换成b也是OK的，实际并无a字体。日本高中社团要至少4个人才能成立，游泳社就3个人，于是就去田径队找了个... 阅读全文

posted @ 2016-01-26 16:53 迷茫小飞侠阅读(223) 评论(0) 推荐(0)

DOM Exception error 类型

摘要： INDEX_SIZE_ERR code 1 索引是负值，或者超过了索引值DOMSTRING_SIZE_ERR code 2 DOMstring 的特定字符数据太大HIERARCHY_REQUEST_ERR code 3 字节不允许有子节点... 阅读全文

posted @ 2016-01-26 16:52 迷茫小飞侠阅读(404) 评论(0) 推荐(0)

CSS 备忘

摘要： border-radius : 10px / 40px 10表示X轴半径 40表示Y轴半径font:italic bold 13px/13px arial,sans-serif; 解释：italic斜体 13px/13px 第一个为字体大小，第二个为行高background: -webkit-... 阅读全文

posted @ 2016-01-26 14:03 迷茫小飞侠阅读(128) 评论(0) 推荐(0)

header操作cookie

摘要： root@kl20080094:~# curl -I "http://www.xxx.com" HTTP/1.1 200 OK Server: nginx/0.8.53 Date: Tue, 07 Feb 2012 02:48:21 GMT Content-Type: text/html; char 阅读全文

posted @ 2016-01-26 14:02 迷茫小飞侠阅读(685) 评论(0) 推荐(0)

定时器传参数

摘要：定时器setTimeout() 和 setInterval() 在使用函数名作为调用句柄是都不能带参数，因此定义一个函数_checkMsg(),返回一个不带参数的函数，在这个函数内部调用外部函数checkMsg(),不需使用参数。setInterval(_checkMsg(isLogin),1000... 阅读全文

posted @ 2016-01-26 13:59 迷茫小飞侠阅读(760) 评论(0) 推荐(0)

Display 和Visible 区别

摘要：一、web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,o... 阅读全文

posted @ 2016-01-26 13:56 迷茫小飞侠阅读(317) 评论(0) 推荐(0)

php 笔记

摘要： 2147483647 这是数字代表了什么?它代表了mysql int里的最大值.一旦超过了这个数字,mysql会自动的将其转换成这个数字.这个功能给开发人员带来了灾难在php的开发中，有一些错误是可以预先知道的可能会发生的，比如打开一个文件的时候，就知道如果文件不存在，就可能会发生一个“文件不存在阅读全文

posted @ 2016-01-26 13:55 迷茫小飞侠阅读(175) 评论(0) 推荐(0)

颜色像素

摘要： rgba(255 ,0 ,255 ,0) 为什么只能到255每个像素由四个字节组成，即4 乘以 8位二进制位所以上面的颜色在内存中为 11111111 00000000 11111111 00000000p {color : rgb(100%, 100%, 100%); } 百分比色rgb(255,... 阅读全文

posted @ 2016-01-26 11:42 迷茫小飞侠阅读(345) 评论(0) 推荐(0)

闭包

摘要：闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。当一个函数初始化的时候会把他的执行上下文记录在内部变量[[scope]]里，当函数被调用时，一个新的执行上下文对象产生，先复制他的sc... 阅读全文

posted @ 2016-01-26 11:38 迷茫小飞侠阅读(123) 评论(0) 推荐(0)

javascript 备忘细节相关

摘要： DOMContentLoaded事件触发时机，即dom tree完成但页面未必渲染完毕。var a = [1,2,3,4];var length = a.length;alert((length - 1 in a)); 返回true当一个函数没有明确返回值的时候，实际上它返回 undifined... 阅读全文

posted @ 2016-01-26 11:37 迷茫小飞侠阅读(115) 评论(0) 推荐(0)

内存泄漏

摘要： memory allocation : object 创造时memory free : 当没有 reference 指向该object 时当浏览器执行时，需要维护来自DOM的大量对象，IE使用自己的垃圾回收机制，而这个机制和javascript不同，这就导致内存泄漏的发生。内存泄漏Amem... 阅读全文

posted @ 2016-01-26 11:34 迷茫小飞侠阅读(117) 评论(0) 推荐(0)

css相关细节优化备忘

摘要：标签不能再包含，也不能包含，可以包含a 和 img 标签是特殊的行内元素，a标签可以包含div等，几乎所有的可替换元素都是行内元素，例如、等等，替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时... 阅读全文

posted @ 2016-01-26 11:34 迷茫小飞侠阅读(129) 评论(0) 推荐(0)

nodeType

摘要： HTMO DOM中常用属性 nodeName nodeValue nodeType(可以用来区别DOM对象和其他对象 if（obj.nodeType）{}; )nodeType 节点类型1、element2、arrtibute3、text4、cdata5、entity refference... 阅读全文

posted @ 2016-01-26 11:33 迷茫小飞侠阅读(220) 评论(0) 推荐(0)

事件冒泡模型

摘要： addEventListener 是在DOM2 标准中定义的方法，所以只用支持DOM2的浏览器才支持这方法（IE9）IE8 及其之前的用 attachEvent ，这个只支持事件冒泡，因此事件处理程序也只在冒泡阶段调用事件流意味着页面上不只一个元素可以相应同一个事件，当你单击一个按钮时，它的容器，整... 阅读全文

posted @ 2016-01-26 11:32 迷茫小飞侠阅读(238) 评论(0) 推荐(0)

两个感叹号作用

摘要： var a = { flag: true };var test = !!a.flag;由于对 null 和 undefined 用 ! 操作符时都会产生true的结果所以用两个 !! 的作用就在于如果明确设置了 a.flag 的值（非 null,undefined,0 ）那么 test 的值就等于... 阅读全文

posted @ 2016-01-26 11:30 迷茫小飞侠阅读(174) 评论(0) 推荐(0)

非冒泡事件

摘要： blur focus load unload mouseenter mouseleave change事件不支持像其他事件一样冒泡， IEList item 1List item 1.1List item 1.2List item 1.3[etc.]$('dropdown').onmouseove... 阅读全文

posted @ 2016-01-26 11:29 迷茫小飞侠阅读(241) 评论(0) 推荐(0)

DOM 对象

摘要： DOM == document object model document 对象是唯一同时属于 BOM 和 DOM 的 rows 是一种DOM集合，不是数组，所以没有sort() 函数。 NodeList NamedNodeMap : document.all == document.getElem 阅读全文

posted @ 2016-01-26 11:28 迷茫小飞侠阅读(113) 评论(0) 推荐(0)

字符串不可修改

摘要： javascript 中字符串一旦被创建，就永远无法修改！与简单属性不同的是，变量不能删除的{DontDelete},这意味着要想通过delete操作符来删除一个变量是不可能的。a =10;alert(window.a);// 10alert(delete a);// truealert(windo... 阅读全文

posted @ 2016-01-26 11:24 迷茫小飞侠阅读(271) 评论(0) 推荐(0)

BOM对象

摘要：每一个frames都有自己的window对象，也就是每个frames都有自己的全局对象，它们之前是相互独立的，包括各自独立的本地对象，top.Object ！==top.frames[0].Object 阅读全文

posted @ 2016-01-26 11:23 迷茫小飞侠阅读(181) 评论(0) 推荐(0)

动态引入javascript

摘要：注意最后 "" 这是必要的，因为浏览器只要看到它就会认为代码到此结束，从而引起错误阅读全文

posted @ 2016-01-26 11:20 迷茫小飞侠阅读(109) 评论(0) 推荐(0)

URI 方法 encodeURI() encodeURIComponent() docodeURI() decodeURIComponent()

摘要： URI 方法 encodeURI() encodeURIComponent() docodeURI() decodeURIComponent()var sUri = “http://www.wrox.com/illegal value.htm#start”;alert(encodeURI(sUri)... 阅读全文

posted @ 2016-01-26 11:19 迷茫小飞侠阅读(513) 评论(0) 推荐(0)

DOM Exception error

摘要： INDEX_SIZE_ERR code 1 索引是负值，或者超过了索引值DOMSTRING_SIZE_ERR code 2 DOMstring 的特定字符数据太大HIERARCHY_REQUEST_ERR code 3 字节不允许有子节点... 阅读全文

posted @ 2016-01-26 11:18 迷茫小飞侠阅读(361) 评论(0) 推荐(0)

获取修改 CSS 样式

摘要：内联（style里的）样式element.style.colorelement.style.getPropertyValue("color")非内联样式window.getComputedStyle(elem1,null).getPropertyValue("backgroundColor"); ... 阅读全文

posted @ 2016-01-26 11:18 迷茫小飞侠阅读(421) 评论(0) 推荐(0)

form 表单处理

摘要： submit相关当使用 submit 按钮或者 image 或者button type="submit" 来提交表单时，会触发 submit 事件，但是直接javascript调用submit() 提交的话，不会触发submit()而使用javascript调用 reset() 的话则会继续触发... 阅读全文

posted @ 2016-01-26 11:17 迷茫小飞侠阅读(436) 评论(0) 推荐(0)

Formatting the event object

摘要：尽量将IE与DOM函数事件对象不同的性质或方法转成DOM标准EventUtil.formatEvent = function (oEvent) { if (isIE && isWin) { //判断IE的方法略 oEvent.charCode = (oEv... 阅读全文

posted @ 2016-01-26 11:16 迷茫小飞侠阅读(131) 评论(0) 推荐(0)

number 类型转换符号

摘要： function convert(sValue, sDataType) { switch(sDataType) { case “int”: return parseInt(sValue); case “float”: return parseFloat(sValue); ... 阅读全文

posted @ 2016-01-26 11:14 迷茫小飞侠阅读(259) 评论(0) 推荐(0)

javascript 关于 this 作用域链

摘要：使用 function f() {} 或者 var f = function() {} 来定义的函数，this 是指向全局对象var a = { b: 1, c: function(){ function d() { alert(this.b); }; d(); }};javas... 阅读全文

posted @ 2016-01-26 11:10 迷茫小飞侠阅读(150) 评论(0) 推荐(0)

键盘聚焦性和点击性

摘要： a 和 button 元素可以有 :focus 效果和回车触发点击事件如果其他元素想要模仿聚焦性，需要设置button如果需要回车触发事件需要附加额外js 绑定事件button 阅读全文

posted @ 2016-01-26 10:58 迷茫小飞侠阅读(281) 评论(0) 推荐(0)

原生addClass 方法添加类函数

摘要： function addClass(id,new_class){ var i,n=0; new_class=new_class.split(","); for(i=0;i<new_class.length;i++){ if((" "+document.getElementById(i... 阅读全文

posted @ 2016-01-26 10:57 迷茫小飞侠阅读(1002) 评论(0) 推荐(0)

box-shadow + animation 实现loading

摘要： .loading{ width:3px; height:3px; border-radius:100%; margin-left:20px;box-shadow:0 -10px 0 1px #333,10px 0px #333,0 10px #333,-10px 0 #333,-7px -7px 0... 阅读全文

posted @ 2016-01-26 10:53 迷茫小飞侠阅读(288) 评论(0) 推荐(0)

导航