web 前端开发
侠客行
喜欢交友、看书、钻研web前端技术
展开
-
nodejs 注意杂谈
1.用nodejs写页面,中文的时候出现乱码 怎么办代码: res.writeHeader(200, {'Content-Type': 'text/html;charset=utf-8'});设置成uft-8 就可以原创 2015-04-14 16:52:21 · 500 阅读 · 0 评论 -
原生javascript兼容性
1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle;实例:封装函数 function getStyle(obj,name){ if(obj.currentStyle){原创 2013-06-28 17:59:19 · 641 阅读 · 0 评论 -
批量实现面向对象的实例
批量实现面向对象的实例window.onload = function(){ function Person(name,age){ this.name = name; this.age = age; } Person.prototype.showName = function(){ alert(this.name); }; function extend(parent,c原创 2013-07-01 14:52:30 · 997 阅读 · 0 评论 -
面向对象继承实例(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原创 2013-07-01 11:16:13 · 4200 阅读 · 0 评论 -
写个一个简单的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原创 2013-07-10 15:16:47 · 1219 阅读 · 0 评论 -
关于IE6盒模型的想法
以前一直埋怨IE6的盒模型算法不科学,不如w3c,现在才发现自己错啦,IE6的宽度一旦拟定,任何方式都改变他的宽度,除非在开始的时候定义w3c模式 例如 开始在w3c模式下,其实对待w3c来说,他们已认识到自己的错误啦,开始在css3中加入box-sizing;有两个选项, 让其自由选择哪种模式 一个是 content-box w3c模式 一个是IE模式 border-box,现在才知道I原创 2013-07-09 17:23:55 · 587 阅读 · 0 评论 -
查找字符串中出现最多的字符和个数(两种方法一个普通方法 一个是正则表达式方式)
查找字符串中出现最多的字符和个数 window.onload = function(){ var str = "sdjksfssscfssdd"; // String.prototype.charAt = function(){ // var json = {}; // var value = "";//出现最多次数的值 // var num = 0;//出现次数原创 2013-06-21 11:47:16 · 1886 阅读 · 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原创 2013-06-21 10:45:55 · 3699 阅读 · 0 评论 -
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]);}}原创 2013-07-01 16:41:52 · 1875 阅读 · 1 评论 -
移动前端开发 解决点击 input 默认高亮 边框
-webkit-tap-highlight-color:transparent;安卓与苹果系统均可支持原创 2013-06-07 15:19:16 · 3194 阅读 · 0 评论 -
jquery插件 验证表单
看着网上关于表单验证写的太凌乱 业余时间写了一个表单插件 供大家鉴赏与指教吧 验证表单插件 *{margin:0;padding:0;color:#000;} .content{width:700px;height:400px;margin:-200px 0 0 -350px;position:absolute;to原创 2013-06-13 16:18:36 · 869 阅读 · 0 评论 -
scrollWidth,clientWidth,offsetWidth 区别
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。 clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。 一个scrollWidth和clientWidth的例子: 7转载 2013-06-13 10:32:10 · 777 阅读 · 0 评论 -
手机前端开发要点
1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用1234 第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;第二个meta标签是ip转载 2013-05-28 13:59:55 · 1111 阅读 · 0 评论 -
原生ajax框架
ajax框架 function ajax(url,success,error){ if(window.XMLHttpRequest){ var oAjax = new XMLHttpRequest(); } else{原创 2013-04-22 11:10:05 · 1240 阅读 · 0 评论 -
jsonp百度下拉实例
jsonp百度下拉菜单 function success(json){ var oText = document.getElementById('selech'); var oUl = document.getElementById('ul'); if(json.s.length原创 2013-04-26 13:18:31 · 694 阅读 · 0 评论 -
stopPropagation, preventDefault 和 return false 的区别
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.术语监听事件, 在在节点上能被监听的页面操作. 如转载 2012-10-26 15:16:40 · 451 阅读 · 0 评论 -
js常用语句
1.document.write( " "); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document- >html- >(head,body)4.一个浏览器窗口中的DOM顺序是:window- >(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById转载 2012-10-25 15:50:08 · 593 阅读 · 0 评论 -
比较各大移动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同
针对HTML5在移动端的迅猛发展,各大门户网站开始使用HTML5的标签来针对手机网站进行重构,所以我找到了一些国内有代表性的网站例如淘宝、京东、以及四大门户来比对一下他们在移动网站的meta标签的异同。如果大家想看一下在手机端网站代码的话可以通过远程调试工具来进行查看,具体操作方法:http://www.candoudou.com/archives/2311、首先先展示一下各个网站的有关m原创 2013-10-08 10:34:31 · 3291 阅读 · 0 评论 -
怎么清空javascript数组
这是一个很基础的问题,但是我们往往经常做错。当一个数组需要清空的时候,很多人使用下面的方法:a = [];我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象,即引用类型,引用的是变量指针地址,之所以这样设计也是为了节省内存。再说到上面的请空数组的方式,如果采用直接赋值一个新数组的方式,那么之前引用的数组可能不会被释放(有其他的引用转载 2013-09-25 10:06:06 · 655 阅读 · 0 评论 -
defer和async的区别
先来试个一句话解释仨,当浏览器碰到 script 脚本的时候:没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。有 defer,转载 2015-01-20 15:35:20 · 966 阅读 · 0 评论 -
js 学习面向对象的继承
保存转载 2015-01-16 11:40:00 · 524 阅读 · 0 评论 -
前端开发技巧杂谈
1.若页面需默认用极速核,增加标签:<metaname="renderer" content="webkit"/>提示:目前只有360旗下全系列双核浏览器识别该meta标签。其他浏览器厂商可能会在以后版本的浏览器中添加对该meta标签的支持。原创 2015-01-30 10:46:12 · 623 阅读 · 0 评论 -
javascript 知识汇总 图解
转载 2015-01-12 10:15:29 · 533 阅读 · 0 评论 -
移动web前端开发之常见bug
1.ios6修复了css position:fixed 1像素抖动的bug,不过引出另一个bug:当给指定元素添加 position:fixed时首次加载页面完成后,滑动整个网页,添加此样式的元素 会跟随页面滚动(目的是固定此元素)转载 2014-10-16 10:54:48 · 4044 阅读 · 0 评论 -
margin-bottom float IE7/IE6 失效
今天 发现 margin-bottom 在IE居然失效原创 2014-10-28 18:01:01 · 857 阅读 · 0 评论 -
按钮在IE6、IE7 自适应宽度
input 按钮 在IE7以上及其他浏览器 显示的自适应状态原创 2014-10-08 15:53:56 · 557 阅读 · 0 评论 -
seajs 采用spm3 进行打包 的注意事项
seajs 采用spm3 进行打包 的注意事项:在根目录shi原创 2014-09-28 18:29:13 · 2346 阅读 · 0 评论 -
css到底清除浮动用哪种形式比较好
1,overflow:hidden 加入父级元素,可以实现自适应,子元素采用浮动。优点:代码简单弊端:如果子元素出现定位的下拉菜单等形式,内容超出会被隐藏2.clear:both 加入空标签 设置成clear:both;优点:主要是针对浮动子元素的下边距的消失(IE7 IE6),用其他清除浮动方法都不能成功解决此问题弊端:新增代码 增加文件大小3.afte.clearf原创 2014-03-06 15:28:25 · 1054 阅读 · 0 评论 -
关于css布局中左侧固定右侧自适应的几种方法
第一种:float 浮动法例如:左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;实例:原创 2014-03-06 10:32:48 · 7554 阅读 · 0 评论 -
优化 RequireJS 项目(合并与压缩)
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。动机关于RequireJS已经有很多文章介绍过了。这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样,你将获得一些具有互相依赖关系的JavaSc转载 2014-02-19 17:43:16 · 1349 阅读 · 0 评论 -
js 常用封装方法
判断变量是否是数组function isArray(value){return Object.prototype.toString.call(value) == "[object Array]"} //返回布尔值原创 2014-02-25 13:49:58 · 1363 阅读 · 0 评论 -
js中的hasOwnProperty和isPrototypeOf方法
hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false。1234567转载 2014-02-07 15:24:26 · 575 阅读 · 0 评论 -
html5构建触屏网站之touch事件
前言一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲。例如我们常用的click事件,在触屏设备下是如此无力。手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的。Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。转载 2013-10-16 13:59:34 · 1129 阅读 · 0 评论 -
讲述js算法中的排序、数组去重
数组排序主要是采用将数组一拆为二,直到不能为之,最后只能是拆掉数组里面只能是一个或者是两个,因为数组的长度有奇数偶数之分,拆到最后 数组里面只有一个或者两个之后 开始排序并返回结果,并将这些结果在一一比对 进行合并。这个方法 可能大家觉得 为什么要这么复杂,一直采用第一种不行吗,其实当然可以啦,但是这个世界上还有性能这个词汇,当数据之后几个 几十个 几个百 ,大家的算出的结果时间是没有什么区别的 ,如果当数据庞大的几亿 几十亿 我们还有这种自信用第一种方法吗,其实js的算法就是分而治之,将很多问题划分成小的原创 2013-10-14 11:34:07 · 1188 阅读 · 0 评论 -
IE与火狐的一些兼容问题与解决方法
1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 (2)解决方法: 改用 document.formName.elements["elementName"] (3)其它2. 集合类对象转载 2012-10-22 10:26:52 · 689 阅读 · 0 评论 -
javascript深入理解js闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 Js代码 var n=999; function f1转载 2012-10-10 16:50:06 · 508 阅读 · 0 评论 -
CSS hack
#test{color:red; /* 所有浏览器都支持 */color:red !important;/* Firefox、IE7支持 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */*+color:red; /* IE7支持 */color:red\9; /* IE6、IE7、IE8支持 */color:red转载 2012-10-10 16:13:32 · 353 阅读 · 0 评论 -
DD_belatedPNG解决IE6下PNG不透明问题
尽管大前端决定不再对IE6进行神马支持了,但这种需求还在,就整一个吧!一下是转载知更鸟的内容,实用就好。众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是expression,再到javascript+透明 GIF替代.转载 2011-12-06 17:14:50 · 383 阅读 · 0 评论 -
IE6 BUG大全
1.IE6的[疯狂之一]IE6中奇数宽高的BUG IE6真是太疯狂了。今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0),如图:可是在IE6下查看,却变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的查看源码:CSS代码转载 2011-12-02 10:22:41 · 1857 阅读 · 0 评论 -
网站命名规范大全:CSS规范便于交流
良好的命名规范可以为团队合作开发推波助澜,无论在项目开发,还是产品维护上都起到了至关重要的作用。应该说命名规范是一种约定,也是程序员之间良好沟通的桥梁。 命名规则: 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:sea原创 2011-12-02 10:39:49 · 1955 阅读 · 1 评论