2017年08月_古兮!怪哉

原创用原生的JS封装cookie的操作方法

setCookiegetCookiemoveCookieJS：function setCookie(key, value, t){ var oDate=new Date(); oDate.setDate(oDate.getDate()+t); document.cookie=key+"="+encodeURI(value)+";expires="+oDate.toUTCStrin

2017-08-21 16:21:40 2797

原创 JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件

1. 阻止冒泡事件主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上，在事件传播的任何阶段都能使用。使用方法如下（兼容IE）：function stopBubble(event){ if(window.event){//兼容IE window.event.cancelBubble=true; }else{ event.stopPropagation(); }}非IE浏

2017-08-21 11:15:45 5384 1

原创谈谈你对闭包的理解

function a(){ var i=0; function b(){ console.log(i++) } return b;}var c=a();//这里执行了函数a，返回函数b，因此c为函数bc();//0，这里调用了函数bc();//1，因为i仍然保存在a中，而函数b保持着对i的引用，因此i在内存中的栈去依然保留

2017-08-20 22:38:31 1804

转载 JavaScript中的子类和父类的继承

使用原型继承，中间使用临时对象作为Child的原型属性，临时对象的原型属性再指向同一个对象，这样当修改子类的原型属性，就不会影响到其他子类和父类。function extend(Child, Parent){ var F=function(){};//创建临时对象 Child.prototype=Parent.prototype;//临时对象的原型属性指向同一个父类的原型 Child.p

2017-08-20 21:55:24 1673

原创 JS中如何传递Event对象，兼容IE和FireFox

（1）IE在IE中，事件没有event属性，但是window有，即window.event。获取event的方式为：document.onclick=function(){ alert(window.event.clientX);}获取调用事件的对象window.event.srcElement（2）FIreFoxFireFox中没有window.event，

2017-08-20 11:50:18 1803

1. IE6双边距Bug当页面上的某个元素使用float：left浮动时，则设置margin后的实际效果会变成2倍。例如在IE6中设置float: left; margin-left: 10px;，则实际得到的margin-left是20px。解决方法：加入display: inline2. IE6中奇数宽高的BugIE6中奇数的宽高显示大小与偶数宽高显示大小存在一定不同。例如设置width:10...

2017-08-19 20:30:06 668

原创如何制作网页中回到顶部的悬浮按钮

html代码如下：<div class="top"> <span title="Top" id="topArrow"></span></div>css：（添加一定的美化效果）.top{ width: 50px; height: 100px; background-color: rgba(0,0,255,0.5); border

2017-08-19 17:21:47 9978 3

原创关于css hack在浏览器兼容性问题上的使用

考虑到目前有很多浏览器，尤其是其中还有IE6、IE7这样的老版本的浏览器，不同浏览器对css的解析情况不一样。为了能兼容不同的浏览器，我们使用css hack来实现在不同浏览器中得到想要的页面效果。本文只罗列出常用的方法，具体的使用，可以参考css hack在百度百科中的使用说明。（1）下划线"_"和中间线"-"：用来选择IE6及以下。但是为了避免与一些带有中间线的属性混淆，我们通常使用下

2017-08-19 16:01:52 336

原创 DIV+CSS实现盒子居中的几种方法比较（考虑兼容性）

例子中html代码如下：为了让结果更清晰加上如下的css样式.center{ width:100px; height: 100px; background-color: gray;}1. 实现水平居中1) margin: 0 auto——IE6-8，chrome和mozilla测试有效这是常用的方法，该方法兼容IE6-8，chrome和mozilla

2017-08-19 10:10:53 1072

原创利用多个域名来存储网站资源

1. CDN缓存更方便CDN：是构建在网络之上的内容发布网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容发布、调度等功能模块，是用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要是内容存储和分布技术。简单来说，CDN主要用来使用户就近获取资源。2. 突破浏览器并发限制同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求

2017-08-19 09:30:43 3420

原创 HTML5中的异步操作Web Worker的用法

1. 如何使用Worker在index.html的中添加如下的脚本：var w=new Worker('work.js');//创建worker对象实例，指定异步调用的js文件var obj={ name:'michael';//这里将对象作为传递的数据，也可以用其他类型的数据，入string等}w.postMessage(obj);//向work.js文件传递数据w.onmes

2017-08-18 16:38:13 2815

原创网页制作中出现的新的图片格式：WebP和Apng

网页制作中常用的图片格式包括：png-2, png-8, jpeg, gif, svg等目前流行的新格式包括WebP和Apng1. WebP——谷歌于2010年提出WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。优势

2017-08-18 15:31:36 2630

转载如何解决IE6下div错位的问题，以及IE7、IE8样式不兼容问题

1. IE6下div错位的问题在IE7、IE8下，采用‘float: left’的div都没有问题，但是在IE6下却会向下移动，出现空白。这是因为IE6采用的内核默认把div之间的距离增加了3-5个px，所以，可以在下移的div的style里增加“margin-left: -5px”或者更小。2. 解决IE7、IE8样式不兼容在液面中加入HTTP meta-tag只要I

2017-08-18 11:22:15 332

转载 Reflow和Repaint的基本认识和优化

1. 什么的Repaint和Reflow浏览器解析大概的工作流程：这张图应该很好理解，归纳为四个步骤：1) 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为——内容树；2) 构建渲染树：解析CSS（包括外部CSS文件和样式元素以及JS生成的样式），根据CSS选择器计算出节点的样式，创建另一个树——渲染

2017-08-18 10:16:47 422

原创中英文换行

html：sda dcxmmm sadsads adsadsda dcxmmm sadsads adsadsda dcxmmm sadsads adsadsda dcxmmm sadsads adsadsda dcxmmm sadsads adsadcss: .content{ width: 50px; background: yellow; mar

2017-08-17 22:33:16 441

原创 JavaScript中如何用原生的js获取style样式

1. Element.style该方法只能获取到内联样式，而无法获取到和中的样式例如：测试 function getStyle(obj){ var color=obj.style.color; alert(color) }但是当没有内联样式时，则无法获取到默认样式，

2017-08-17 15:37:36 5877 1

转载 Ajax的优点和缺点

优点：（1）最大的优点就是页面无刷新，用户的体验非常好；（2）使用异步方式与服务器通信，具有更加迅速的相应能力；（3）可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端限制的能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本，并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求和相应对服务器造成的负担；（4）基于标准化的并被广泛支持的技术

2017-08-17 10:46:09 4794

原创利用iframe进行父页面和子页面的通信

父页面parent.html: 父页面元素调用子页面方法获取子页面元素调用子页面child1.html的方法，并获取其元素 function parentSay(){ alert('say parent') } function getChildItem(){ var child=document.getElementById('frame1').cont

2017-08-17 09:43:56 1509

原创 JavaScript中.toString()和String()的区别

（1）String（）以构造函数的方式转换字符串，可以转换nullconsole.log(null.toString());//typeErrorconsole.log(undefined.toString());//typeErrorconsole.log(NaN.toString()=='NaN');//trueconsole.log(false.toString()=='fa

2017-08-16 21:29:46 378

原创 JS原生方式动态获取表单的值

html代码如下： google baidu male female 1. 获取input的值var textInput=document.getElementById('textInput');textInput.onchange=function (){ var username=document.getElementById('u

2017-08-16 08:59:00 2568

原创 JavaScript中绑定事件的方式

1. 直接在HTML中绑定事件myspanjs代码function showMe(obj){ alert(obj.innerHTML);}2. 在JS中绑定事件js代码var myselect=document.getElementById('myselect');myselect.onclick=function(){ alert(this.innerHT

2017-08-15 22:34:05 276

原创利用图片实现表单功能

html代码如下： js代码如下：function submit(obj){ obj.submit();}function reset(obj){ obj.reset();}

2017-08-15 21:17:42 283

原创 JavaScript获取url参数

function getQueryString(){ var url=location.search; if(url.indexOf('?')!=-1){ var str=url.slice(1); var strs=str.split('&'); var obj={}; for (var i = 0; i < strs.length; i++) { var key=st

2017-08-15 21:08:34 160

原创关于函数表达式和函数声明

Foo=function foo(){ return 1;}1. typeof Foo;上述所示为函数表达式，Foo指向函数，因此这里返回function2. typeof Foo();这里会先执行Foo()，返回的是数字1，因此再执行typeof会返回number3. typeof foo这里foo不指代任何数，这里将他解析为变量，因为为定义，

2017-08-14 22:50:23 187

原创 ThinkPHP5中路由的设置

路由定义采用\think\Route类的rule方法注册，通常是在应用的路由配置文件application/router.php中进行注册，例如use think\Route;Route::rule('login','admin/login/index');或者采用批量注册的方式return[ '__alias__' => [ 'login' => 'a

2017-08-13 20:22:40 7668 1

转载 IE和标准DOM的事件模型

IE内核的浏览器时间模型是冒泡型shijian.yejiushuoshi，在IE内核下，时间句柄的出发顺序是从ChildNode到ParentNode。 open the console and click me 以上的HTML代码在IE内核下IE的事件是这样传播的：Button #childdiv #ancestorBodyDocument内核是没有事件捕

2017-08-12 09:44:03 817

原创 JavaScript中函数声明，函数提升，对象属性和原型属性等问题

function Foo() { getNumber = function () { console.log (1); }; return this;}Foo.getNumber = function () { console.log (2);};Foo.prototype.getNumber = function () { console.log (3);};var ge

2017-08-11 21:53:05 366

转载 JavaScript中prototype和proto的使用

每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象成为原型对象，原型对象包括函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。私有变量、函数在函数内定义的变量和函数如果不对外提供接口，那么外部无法访问到，也就变成私有变量和私有函数。function Obj(){ va

2017-08-07 18:17:45 508

转载从Web前端优化网站性能

1. 减少HTTP请求数一个完整的请求都需要经过DNS存址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。资源上由于每个请求都要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，...

2017-08-05 12:31:20 877

转载 JavaScript性能优化

1. 代码简洁x=x+1；在不影响功能的情况下可以简写成x++；2. 变量名和方法名在不影响寓意的情况下简单（可以选用首字母命名）定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength3. 关于JS循环（1）for(;;)：推荐使用，变量递增或递减应该使用嵌套的++或--，而不单独对循环变量赋值（2）for(i)：效率最差，因为它需要查询H

2017-08-05 09:33:26 252

原创 JavaScript的全局函数

1. parseInt(String,radix)：返回转换成整数的值如果radix为0或者没设置，则parseInt会根据String自动判断（1）string以0x开头，16进制；console.log(parseInt(0x19));//153（2）string以0开头，旧的浏览器默认使用8进制，ECMAScript默认10进制console.log(parseI

2017-08-04 18:39:30 1689

原创判断数据类型：typeof和instanceof

（1）typeof主要用于判断数据是不是基本数据类型：String、Number、Object、Null、Undefined，但是无法判断出function（有些浏览器会出错）、array、regExpconsole.log(typeof '');//stringconsole.log(typeof []);//objectconsole.log(typeof {});//object

2017-08-04 16:58:09 16333

转载 HTTP状态码

常见的状态码HTTP: Status 200 – 服务器成功返回网页HTTP: Status 404 – 请求的网页不存在HTTP: Status 503 – 服务不可用说明:HTTP: Status 1xx (临时响应)->表示临时响应并需要请求者继续执行操作的状态代码。详细代码及说明:HTTP: Status 100 (继续)-> 请求者应当继续

2017-08-02 17:16:09 208

原创 html中元素尺寸、坐标的获取

html asdasdcss*{margin:0;padding:0;} img{ border:0; width: 1780px; height: 1080px; } .main{ width: 350px; height: 200px; background: green; position: relative

2017-08-02 13:48:06 1120

原创浏览器内核介绍

浏览器内核就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一个网页在不同内核的浏览器中的渲染效果不同。这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。浏览器的内核分为两个部分，一是渲染引擎，另一个js引擎。但是，现在的js引擎比较独立，内核更倾向于

2017-08-02 09:10:41 337

原创用CSS画实心三角形和空心三角形

（1）实心三角形htmlcss.sanjiao{ border-left: 10px solid transparent; border-bottom: 10px solid red; border-right: 10px solid transparent; border-top: 10px solid transparent; width: 0

2017-08-01 23:40:20 3016

michael8512的博客