随笔分类 - web前端
web前端的各种技术分享。
摘要：Array.prototype.slice的妙用开门见山，关于Array 的slice的用法可以参考这里http://www.w3school.com.cn/js/jsref_slice_array.asp。除了常见的从某个数组中抽取出新的数组外，它还有一些其他的用法。经常的，可以看到Array.prototype.slice(arguments, 0); 这个写法可以用于function() {} 内，这样可以将函数的参数列表转换成一个真正的数组。请看一个例子：var slice = Array.prototype.slice;var toString = Object.prototype.
阅读全文
摘要：今天在reivew部门牙套姐MM的代码的时候，有点小心得，给大家分享。我们常常说到，“学以致用”，但我发现自己却很少能真正做到。《javascript高级程序设计》即大家常说的“红宝书”，我也经常看，可是一些技巧还是要在实战中总结出来的。就比如今天将的这个~不起眼的一元运算符，学名“按位非”，在书的第三章中也有详细的介绍：~：按位非操作符由一个波浪线（~）表示，执行按位非的结果就是返回数值的反码。var num1 = 3; // 我的幸运数字是3var num2 = ~(num1);console.log(num2) // "-4"var num3 = -3; var nu
阅读全文
摘要：说明：测试所用的js框架为kissy,后端语言为php写在前面目前我们可以将ajax请求的情形按照不同的类型进行分类，比如页面编码：utf-8 or gbk; ajax 传参方式 post or get; 传参的时候数据放到url中还是放到data属性中;参数中是否带有中文;后端通过get or post方式获取参数; 后端解析并返回值的编码为 utf-8 or gbk。通过排列组合一下，发现居然多达64种，但是页面编码来说的话，我们暂定为utf-8（因为页面编码为gbk的情况是可以类推的）。我们在ajax请求的时候怎么去避免乱码，post和get如何取舍，应该注意些什么问题呢?来跟我一起来探
阅读全文
摘要：一. 引子在git操作中，我们可以使用checkout命令检出某个状态下文件，也可以使用reset命令重置到某个状态，这里所说的“某个状态”其实对应的就是一个提交(commit).我们可以把一个git仓库想象成一棵树，每个commit就是树上的一个节点。家家都有一本自己的祖谱。祖谱记录了一个家族的生命史，它不仅记录着该家族的来源、迁徙的轨迹，还包罗了该家族生息、繁衍、婚姻、文化、族规、家约等历史文化的全过程。类似的，每个git仓库都有一本自己的祖谱，仓库中commit ID的繁衍，HEAD指针的迁徙，分支的增加、更新，同样的记录着一个仓库从无到有的点点滴滴。在git中，我们其实可以通过^和~来
阅读全文
摘要：使用css来制作三角，在日常用得较多。恰好这几天项目中有用到，之前只是从网上copy下来代码直接用，但是今天在用的时候遇到一些问题，于是借此机会把这个css绘制三角好好研究下吧。我们分别写一个<div>,<s>,<span>标签，并给上下左右四个border赋值不同的颜色，看看是什么样子：html：<div class="triangle"></div> <p> <s class="triangle"></s> <span class="tri
阅读全文
摘要：在网页中table是一种很好的展示数据的标签。默认情况下，table是没有border的，但是我们为了好看，经常要给table加上border。而且IE7/8/9下border的颜色还不一样，下面我们就来看看如何用css来控制table的border的显示。首先，我们创建一个简单的table，代码如下：<table class="my-table"> <tr> <td>first row</td> <td>first row</td> </tr> <tr> <td>s
阅读全文
摘要：今天在处理页面边距时，又遇到这个问题，float元素在设定margin-bottom时在IE6和IE7下会失效，之前就碰到过，但是用其他的办法调试会就过去了，今天遇到就觉得非得正规整理一下，下面请看实例：#box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}</style><
阅读全文
摘要：不知是哪位牛人发明了用css画三角形这个牛逼的方法，后来这个技术一直流行到现在，的确很好用。在日常项目中也经常会用到这个技术，但是今天在使用的时候，在IE8/9下，使用text-indent的时候会有问题。先看看实例代码，我们在.right这个div的border上面画一个三角形。html代码如下：<div class="right"> <s><i></i></s> <p>画个三角形</p></div>css代码如下：.right { width: 330px; height:
阅读全文
摘要：昨天到今天上午都在查一个IE的bug，情形如下：通过异步请求获取json数据，然后拼接成html代码，最后使用innerHTML类似方法插入到文档流中。在chrome下和IE8\9下均表现正常。结果已进入IE7，浏览器就崩溃，更别提IE6了，也是一副死给你看的样子。于是我就把这个bug定位于IE6\7，其实这时候我已经陷入了这个固定思维模式中，浪费了不少时间。检查bug的步骤1. bug定位在js脚本中，按照脚本执行的顺序，你可以用console或alert，来确定bug发生的代码区间，然后在区间内进一步来查找bug发生的具体代码段。2. bug fix通过排除，就是在插入节点内容的时候导致.
阅读全文
摘要：jsonview的官网地址：http://jsonview.com/1.在做开发的时候，经常需要从服务器拿数据，一般返回数据都会用json来封装。由于一些原因，从服务器端取得的json数据，往往是经过unicode编码，没有格式化的数据，很难阅读，如下图所示：这样的话，对开发人员在阅读的时候会造成一定的困扰。2.而jsonview正是应用与这个场景，它可以将json数据进行转码和格式化，以一种清新的形式展示给大家，如下图所示：这样更便于阅读。3.如何安装？首先得确认你安装了chrome浏览器，然后进入chrome web store中，搜索“jsonview”，然后安装它。最后对浏览器进行设置
阅读全文
摘要：window.close（），一看就知道是用来关闭浏览器窗口的方法。W3CSchool对该方法的解释如下：方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。 在IE中，window.close()能生效，在生效的时候，会弹出提示框，询问你是否关闭该窗口，如图： 点击“是”，可以直接关闭该窗口。是这段代码在chrome和Firefox下面不会生效。针对chrom...
阅读全文
摘要：1.利用Boolean对象进行转换varnum123=123,str='abc',o={name:'test'},num0=0;num123=Boolean(num123);//truenum0=Boolean(num0);//falsestr=Boolean(str);//trueo=Boolean(o);//true2. 利用两个'!'运算符，第一个'!'将值转换成布尔值并取其值的非值，第二个'!'将其布尔值还原，类似于“负负得正”的道理。varnum123=123,str='abc',o={n
阅读全文
摘要：要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就是源于 haslayout。haslayout是WindowsInternetExplorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元 素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了hasLayout的 属性，属性值可以为true或false。当一个元素的hasLayout属性值为true时，我们说这个元素有一个布局（layout）要想更好的理解css
阅读全文
摘要：最近做一个活动页面，页面中有一个按钮，如果抠图处理单独作为按钮图片的话，效果不是很好，于是想将整个图作为背景，然后在设置一个<a>标签作为按钮通过绝对定位使其与图片中的按钮重合，从而达到点击按钮的效果。一切在chrome和FF下都很顺利，又在IE下栽了跟头。因为在IE下不会出现<a>标签的hover样式，也无法点击。若果将<a>设置背景色，则IE下就可以识别<a>了，但是又没有透明的背景色，于是想到用滤镜，但是IE6又无法兼容。后来还是只能将图片作为背景来设置，而不是通过<img>标签来放图片，就不会出现这些问题了。之前是用的<
阅读全文
摘要：对于常用的hack，今天搜集了一下资料，好好的学习了一下，愚人码头的一个测试页面写得比较详尽，链接如下：http://www.fantxi.com/demo/html/browser_detector.html 然后我自己在本地进行了测试，沿用了愚人码头的背景配色，重写了css代码，最后还有一些额外的发现和收获。本次测试主要是针对IE6~IE9，firefox，chrome，opera，IE5.5如此古老的浏览器不在考虑之列。最后，特别注意的是：使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera..
阅读全文
摘要：其实之前做日常项目的时候，发现了font-size设置在IE6下带来的问题，然后去查了下，是由于IE6下div中的默认font-size值是12px，这篇博文有讲到，IE6中设置div的最小高度 ，然后，我自己也写个例子测试一下。仅用IE6和chrome进行对比测试。首先在页面中定义两个div标签，宽度*高度为200px*30px<divid="Layer1">div1</div><divid="Layer2">div2</div>然后设定其样式，如下：#Layer1{position:absolute;w
阅读全文
摘要：IE6下font-size值设置与否对元素height,background产生的影响(一) 日前所做的一个小项目中，碰到一个IE6的bug，情况如下： 我使用一个<p><span>文字文字</span><span class=”picture”></span><span>文字文字</span></p>来描述一段文字，在这段文字中，还有一些小的图片穿插其中。其中我将小图片通过设置span.picture的background来实现。 html代码如下：<pclass="flow-nu
阅读全文
摘要：项目中最近有用到一段小的js代码，需要判别IE6,7,8，自己整理了下。1<scripttype="text/javascript">2if(window.ActiveObject){//ifisIE3varua=navigator.userAgent.toLowerCase();4varcheckIE=function(r){5returnr.test(ua);6}7varisIE6=check(/msie6/),8isIE7=check(/msie7/),9isIE8=check(/msie8/);10if(isIE6){//TODO}11if(isIE7)
阅读全文
摘要：phpmyadmin就是一种mysql的管理工具，安装该工具后，即可以通过web形式直接管理mysql数据，而不需要通过执行系统命令来管理，非常适合对数据库操作命令不熟悉的数据库管理者，下面我就说下怎么安装该工具： 1.先到网上下载phpmyadmin，再解压到可以访问的本地服务器的根目录下，如apache的www目录。 2.配置config文件 打开libraries下的config.default.php文件，依次找到下面各项，按照说明配置即可： A.访问网址 $cfg['PmaAbsoluteUri'] = '';这里填写phpmyadmin的访问网址,本
阅读全文
摘要：众所周知，图片的水平居中比较简单，但是图片的垂直居中比较麻烦一些，今天查阅了资料并自己写了测试代码，来实现兼容IE,FF,chrome等主流浏览器的图片在div中的垂直居中的方法。css样式代码如下：<styletype="text/css">*{margin:0;padding:0}div{width:210px;height:210px;}.attention{color:red;font-weight:bold;}.example1{background:blue;}.example2{background:green;display:table-cell
阅读全文