专注WEB前端开发

摘要： Use ablank.gifas thesrcof images, and include thewidthandheightof the final image.HTML:JavaScript:/* lazyload.js (c) Lorenzo Giuliani * MIT License (http://www.opensource.org/licenses/mit-license.html) * * expects a list of: * `` */!function(window){ var $q = function(q, res){ if (document... 阅读全文

摘要： javascript:function addClass(id,new_class){ var i,n=0; new_class=new_class.split(","); for(i=0;iAdd a class 阅读全文

摘要： 一、概述除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个： - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; - 消除代码运行的一些不安全之处，保证代码运行的安全； - 提高编译器效率，增加运行速度； - 为未来新版本的Javascript做好铺垫。"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器， 阅读全文

摘要： replace方法是属于String对象的，可用于替换字符串。简单介绍:StringObject.replace(searchValue,replaceValue)StringObject:字符串searchValue：字符串或正则表达式replaceValue:字符串或者函数字符串替换字符串'I am loser!'.replace('loser','hero')//I am hero!直接使用字符串能让自己从loser变成hero，但是如果有2个loser就不能一起变成hero了。'I am loser,You are loser&# 阅读全文

摘要： Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to to 阅读全文

摘要： One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all br 阅读全文

摘要： 这篇文章算是很基础的了。旨在介绍如何保证页面代码的整洁、以维护性。使用有语义的页面标签，减少标签的滥用。1. 移除不必要的标签嵌套在外面的标签没有必要例子：2. 使用有语义的标记等标签，替代，即便样式表丢失，仍然保证页面的可读性。3. 尽量少的使用标签4. 代码缩进格式5. 在结尾处加上这个块的注释转：http://www.ghugo.com/coding-clean-and-semantic-templates/扩展阅读：http://webdesignerwall.com/tutorials/coding-clean-and-semantic-templates 阅读全文

摘要： 收集常用的正则表达式，欢迎补充。1.匹配IP地址function isIP(value){ return /^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$/i.test(value);}2.匹配URLfunction isURL(value){ return /^((http|https):\/\/(\w+:{0,1}\w*@)?(\S+)|)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(value) 阅读全文

摘要： 曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-block。（本文约定 display:inline-block 简写为 inline-block）开篇我们来看几个问题：IE6、7 真的不支持 display:inline-block 吗？disp 阅读全文

摘要： 源起我们经常需要“修复”一个老生常谈的“bug”，那就是文本的自动换行问题。在专业术语上，这种期望得到的渲染现象被称作“word wrap”，即文本处理器有能力把超出页边的整个词自动传到下一行。在现实项目中，尤其是在测试阶段，鉴于测试使用非常极端的测试用例，我们经常需要“修复”如图所示的这个问题：长单词溢出图中，极长的这个英文单词（虽然是生造的）为了保证完整的显示，无奈地超出了容器的限制，它溢出了。为了“修复”这个“问题”，使得无论东亚还是西欧文字都能被限定在容器的尺寸范围内，我们一般会加上诸如“word-wrap: break-word; word-break: break-all;”这样的 阅读全文