WEB前端开发 -- IT技术博客大学习 -- 共学习共进步！

• 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果

关于这个大家可以看两篇文章小志的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》和小鱼的《背景半透明最佳实践》，这里就不展开了，这里提供一个小志的CSS背景颜色属性值转换工具，并在他的基础上做了少许的修改，还有就是被小志严重鄙视的去掉了提示！嘎嘎！关于工具：实现各个浏览器中具备良好的透明特性的效果，IE中使用私有滤镜filter，高端浏览器使用CSS3中的rgba属性。输入十六进制的颜色值以及透明度，自动在...

• 行内元素vertical-align:middle在html5和xhtml1.0及以下版本中的表现差异

今天在做页面的时候无意中发现静态页面中小图标和文本对的很齐的，在线上的页面却小图标和文本没有对齐。同事啄木鸟找出的原因是静态页面和线上的页面的html DOCTYPE不一样，静态页面为html5，线上的页面xhtml 1.0；一直以为xhtml和html5表现上是一样的，只是DOCTYPE不一样！经过同事啄木鸟多番测试终于找出了差异的问题所在，那就是行内元素的vertical-align:middle样式。

• jQuery Color Animations颜色动画插件

jQuery的animate方法对颜色无法做动画效果.

• 基于A*的连连看启发式寻径算法

她是一款神奇的小游戏，老少皆宜，百玩不厌，她是给一堆图案中的相同图案进行配对的简单游戏，在2003年，一个叫做朱俊的网友将这种形式搬到了PC上，立刻成为办公一族的新宠，并迅速传遍了世界各地，她就是连连看。没想到这几日我却和它邂逅出了一段趣事，而这一切都源于前几日我所在公司某产品在内部群里的一段对白：蒋某：大家看这个页面，用户的头像怎么有重复的呢？又不是做连连看啊~ 任某：Hoho，我们反倒不如在这个页面埋个...

• JSON对象和字符串之间的相互转换

比如我有两个变量，我要将a转换成字符串，将b转换成JSON对象： var a={"name":"tom","sex":"男","age":"24"}; var b='{"name":"Mike","sex":"女","age":"29"}'; 在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。 JSON.stringify(obj)将JSON转为字符串。

• 用In.js颗粒化管理、加载你的Javascript模块

近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交...

• HTML5和CSS3特性检测-Modernizr

HTML5和CSS3逐渐成为WEB前端开发的必须技能，开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

• jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

上个月研究学习了《js判断一个元素是否为另一个元素的子元素》，感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展： //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; //判断:当前元素是否是被筛选元素的子元素或者本身 jQ...

• JavaScript逻辑运算符及优先级

今天看了一段YUI compressor压缩的js代码： userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on")); 直接疯掉了，估计一下子没几个人能看懂。那么就把他“翻译”一下。 && (逻辑与) 这里主要是一个“&...

• JavaScript本地存储实践（html5的localStorage和ie的userData）

本地存储解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。借用网上的一张图来看下目前主流的本地存储方案： Cookie：在web中得到广泛应用，但局限性非常明显，容量太小，有些站点会因为出于安全的考虑而禁用cookie，cookie没有想象中的那么安全，Cookie 的内容会随着页面请求一并发往服务器。 Flash SharedObject：使用的是kissy的store模块...

• js判断一个元素是否为另一个元素的子元素

用js判断一个元素是否为另一个元素的子元素，再做一些效果的时候经常用到，特别是和鼠标事件相关的应用中，比如一个浮层，在鼠标操作浮层内元素的时候浮层显示，当点击浮层外的元素的时候隐藏浮层。当然方法有很多，不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。

• URL正则表达式

分享一个同事写的URL正则表达式，缺点不支持中文URL。

• Firebug Console API 与命令行

前几天有人问我关于firebug console的问题，其实我平时用的最多也就是console.log,相当于alert()。还真没深入了解其他的api，今天在jsmix上看到了，所以转载过来分享一下 Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助。 console...

• insertContent-在文本框光标位置插入内容并选中

在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。 IE下可以通过document.selection.createRange();获取光标位置，代码也很简单： if (document.selection) { pos = document.selection.createRange(); pos.text = "要插入的字符串"; } Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

• IE中Image .onload方法问题

在web开发在获取图片宽高是很正常的事情，图片在加载完成前是获取不到图片的宽高的，在加载完成后才可以获取图片本身的宽高，例如： var img = new Image(); img.src = "loading.gif"; img.onload = function(){ alert ( img.width ); }; OK?这段代码看着没什么问题，但在ie中会有一个bug，就是ie第一次打开的时候没问题，第二次使用这个方法就悲剧了，ie没反应了，即使刷新页面也是一样。因为IE会缓存图片，第2次加载的图...

• 愚人节页面翻转效果的实现

昨天愚人节，逛pinterest.com的时候，发现页面上的有些地方翻转了，着实被愚了一把。所以在自己的博客上也加了一下效果，具体的实现通过ie滤镜和css3旋转。

• 前端开发小工具集合

收集的一些轻量级的前端开发小工具。

• jQuery打印插件

本插件自己打印链接中指定的页面，可以通过以下方式和参数传递： $(select).printPage( {attr : “href”,//链接的href属性 url : false,//特定的url， message: “请稍后，真正为您准备文档…” } ); demo页面：http://www.css88.com/demo/jQuery-printPage-plugin/ 注意：在IE下打印页面，背景图片和背景颜色默认不打印解决方案：在IE的工具里，Internet选项

• 标题栏新消息提示

标题栏新消息提示如图：公司的项目中用到了这个新消息提示的效果，主要用于提示用户有新消息。

• HTML5 中的一些新特性

简洁的DOCTYPE： HTML5 只有一个简单的文档类型：。它不使用版本，因此该文档类型适用所有版本的HTML。简单易记的语言标签：你并不需要在中使用xmlns 或xml:lang标记。将对HTML5 有效。简单易记的编码类型：你现在可以在meta 标签中使用”charset”：不需要闭合标签：在HTML5 中，空标签（如...