专注前端开发

原创 nodejs 注意杂谈

1.用nodejs写页面，中文的时候出现乱码 怎么办代码： res.writeHeader(200, {'Content-Type': 'text/html;charset=utf-8'});设置成uft-8 就可以

原创 前端开发技巧杂谈

1.若页面需默认用极速核，增加标签：<metaname="renderer" content="webkit"/>提示：目前只有360旗下全系列双核浏览器识别该meta标签。其他浏览器厂商可能会在以后版本的浏览器中添加对该meta标签的支持。

转载 defer和async的区别

先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。有 defer，

转载 js 学习面向对象的继承

保存

转载 javascript 知识汇总 图解

原创 margin-bottom float IE7/IE6 失效

今天 发现 margin-bottom 在IE居然失效

转载 移动web前端开发之常见bug

1.ios6修复了css position:fixed 1像素抖动的bug，不过引出另一个bug：当给指定元素添加 position:fixed时首次加载页面完成后，滑动整个网页，添加此样式的元素 会跟随页面滚动（目的是固定此元素）

原创 按钮在IE6、IE7 自适应宽度

input 按钮 在IE7以上及其他浏览器 显示的自适应状态

原创 seajs 采用spm3 进行打包 的注意事项

seajs 采用spm3 进行打包 的注意事项：在根目录shi

原创 seajs 加载的jquery中，正常引用 却报错 $ 错误

在使用seajs中 可以采用命令下载       jquery npm install jquery zheg

转载 记录HTML5性能优化

DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。针对DNS解析耗时问题，一些浏览器通过DNS Prefetch 来提高访问的流畅性。 什么是 DNS Prefetch ? DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接

原创 css到底清除浮动用哪种形式比较好

1,overflow:hidden 加入父级元素，可以实现自适应，子元素采用浮动。优点：代码简单弊端：如果子元素出现定位的下拉菜单等形式，内容超出会被隐藏2.clear:both 加入空标签 设置成clear:both;优点：主要是针对浮动子元素的下边距的消失（IE7 IE6），用其他清除浮动方法都不能成功解决此问题弊端：新增代码 增加文件大小3.afte.clearf

原创 关于css布局中左侧固定右侧自适应的几种方法

第一种：float 浮动法例如：左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;实例：

原创 js 常用封装方法

判断变量是否是数组function isArray(value){return Object.prototype.toString.call(value) == "[object Array]"} //返回布尔值

转载 优化 RequireJS 项目（合并与压缩）

本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具，这其中就包括Node.js。 因此，如果你手头上还没有Node.js可以点击此处下载一个。动机关于RequireJS已经有很多文章介绍过了。这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样，你将获得一些具有互相依赖关系的JavaSc

转载 js中的hasOwnProperty和isPrototypeOf方法

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。1234567

转载 html5构建触屏网站之touch事件

前言一个触屏网站到底和传统的pc端网站有什么区别呢，交互方式的改变首当其冲。例如我们常用的click事件，在触屏设备下是如此无力。手机上的大部分交互都是通过touch来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要的。Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

原创 讲述js算法中的排序、数组去重

数组排序主要是采用将数组一拆为二，直到不能为之，最后只能是拆掉数组里面只能是一个或者是两个，因为数组的长度有奇数偶数之分，拆到最后 数组里面只有一个或者两个之后 开始排序并返回结果，并将这些结果在一一比对 进行合并。这个方法 可能大家觉得 为什么要这么复杂，一直采用第一种不行吗，其实当然可以啦，但是这个世界上还有性能这个词汇，当数据之后几个 几十个 几个百 ，大家的算出的结果时间是没有什么区别的 ，如果当数据庞大的几亿 几十亿 我们还有这种自信用第一种方法吗，其实js的算法就是分而治之，将很多问题划分成小的

原创 比较各大移动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同

针对HTML5在移动端的迅猛发展，各大门户网站开始使用HTML5的标签来针对手机网站进行重构，所以我找到了一些国内有代表性的网站例如淘宝、京东、以及四大门户来比对一下他们在移动网站的meta标签的异同。如果大家想看一下在手机端网站代码的话可以通过远程调试工具来进行查看，具体操作方法：http://www.candoudou.com/archives/2311、首先先展示一下各个网站的有关m

转载 怎么清空javascript数组

这是一个很基础的问题，但是我们往往经常做错。当一个数组需要清空的时候，很多人使用下面的方法：a = [];我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象，即引用类型，引用的是变量指针地址，之所以这样设计也是为了节省内存。再说到上面的请空数组的方式，如果采用直接赋值一个新数组的方式，那么之前引用的数组可能不会被释放（有其他的引用

原创 phoneGap 中修改生成APP的名字

最近忙着研究移动开发的事情，去学习了一下移动开发的东西，例如eclipse和phoneGap进行配合使用，感觉还是不错的，先针对eclipse和phoneGa的平台搭建这里先不在详细说啦，主要还是我们自己写的app如何在安装到手机中更改它的名字和图标。先不卖关子啦，1.更改APP名字：我们之前配置好的文件，在项目中会有一个这样的文件AndroidManifest.xml，打开找到这样的

原创 写个一个简单的canvas图表

canvas绘制图表*{ margin:0; padding:0;}body{ text-align:center; background-color:black;}#c1{ background-color:white;}function rnd(n,m){ return parseInt(Math.random()*(m-n)+n);}window.onlo

原创 关于IE6盒模型的想法

以前一直埋怨IE6的盒模型算法不科学，不如w3c，现在才发现自己错啦，IE6的宽度一旦拟定，任何方式都改变他的宽度，除非在开始的时候定义w3c模式 例如 开始在w3c模式下，其实对待w3c来说，他们已认识到自己的错误啦，开始在css3中加入box-sizing;有两个选项， 让其自由选择哪种模式 一个是 content-box w3c模式 一个是IE模式 border-box，现在才知道I

原创 js原生appendChild的bug（已修正之前大家所说的死循环）

appendChild 主要是用来追加节点 插入到最后window.onload = function(){var ul2 = document.getElementById('ul2');var oli = document.getElementsByTagName('li');for(var i=0;iul2.appendChild(oli[i]);}}

原创 批量实现面向对象的实例

批量实现面向对象的实例window.onload = function(){ function Person(name,age){ this.name = name; this.age = age; } Person.prototype.showName = function(){ alert(this.name); }; function extend(parent,c

原创 面向对象继承实例(a如何继承b)

面向对象继承实例 window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.prototype.show = function(){ alert('父级方法'); } function child(age,name,jo

原创 原生javascript兼容性

1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle;实例：封装函数          function getStyle(obj,name){                   if(obj.currentStyle){

原创 查找字符串中出现最多的字符和个数(两种方法一个普通方法 一个是正则表达式方式)

查找字符串中出现最多的字符和个数 window.onload = function(){ var str = "sdjksfssscfssdd"; // String.prototype.charAt = function(){ // var json = {}; // var value = "";//出现最多次数的值 // var num = 0;//出现次数

原创 js 写一个字符串转成驼峰的方法

字符串替换 window.onload = function(){ var str='border-bottom-color'; // String.prototype.transform = function(){ // var arr = this.split('-'); // for(var i=1;i<arr.length;i++){ // arr[i]=a

原创 jquery插件 验证表单

看着网上关于表单验证写的太凌乱 业余时间写了一个表单插件 供大家鉴赏与指教吧    验证表单插件                *{margin:0;padding:0;color:#000;}        .content{width:700px;height:400px;margin:-200px 0 0 -350px;position:absolute;to

转载 scrollWidth,clientWidth,offsetWidth 区别

scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 一个scrollWidth和clientWidth的例子：   7

原创 移动前端开发 解决点击 input 默认高亮 边框

-webkit-tap-highlight-color:transparent;安卓与苹果系统均可支持

转载 手机前端开发要点

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用1234 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是ip

原创 jsonp百度下拉实例

jsonp百度下拉菜单                function success(json){            var oText = document.getElementById('selech');            var oUl = document.getElementById('ul');            if(json.s.length

原创 原生ajax框架

ajax框架                function ajax(url,success,error){            if(window.XMLHttpRequest){                var oAjax = new XMLHttpRequest();            }            else{

原创 js删除数组中重复的条目并将新的数组返回

js删除数组中重复的条目并将新的数组返回                window.onload = function(){            Array.prototype.selectstring = function(){                var array = this;                var rent = new Array()

原创 关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window问题

在原生事件绑定中IE绑定中需要用到attachEvent,FF与chrome中需要用到addEventListener.attachEvent(事件,函数)例如：var oBtn = document.getElementById('button');            oBtn.addachEvent('onclick',function(){alert('a');

转载 stopPropagation, preventDefault 和 return false 的区别

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.术语监听事件, 在在节点上能被监听的页面操作. 如

转载 js常用语句

1.document.write( " "); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document- >html- >(head,body)4.一个浏览器窗口中的DOM顺序是:window- >(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById

转载 IE与火狐的一些兼容问题与解决方法

1. document.form.item 问题    (1)现有问题：        现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行    (2)解决方法：        改用 document.formName.elements["elementName"]    (3)其它2. 集合类对象