分类目录归档：前端
Pro HTML5 Programming
《Pro HTML5 Programming》已经可以在网上下到PDF版的了，有兴趣可以去下载来研究下。 里面的内容也很丰富，介绍了HTML5的新元素和API，如下： Canvas API Audio and Video Geolocation API Communication APIs WebSocket API Forms API Web Workers API Web Storage API Offline Web Applications 虽然介绍了不少新技术，但真正可以实际使用的却非常少。现在在中国主流的浏览器还是IE系列的，里面真正支持HTML5的只有IE 9，但是现在的IE 9还只是个测试版。IE 6连css 2都支持不全，更别谈HTML5了。更杯具的是HTML5的标准还没有最终确定下来，也就是说HTML5也不标准，它以后可能还会再变。 但我觉得HTML5可能会在中国很早地得到大规模地支持，因为搜狗浏览器、QQ浏览器5、Maxthon 3，它们的高速模式使用了WebKit核心，就连360浏览器也打算要内嵌WebKit了，而目前来说WebKit对HTML5的支持是最好的。就算这些浏览器的用户不默认开启高速模式，但是他也拥有了支持HTML5的平台，对于HTML5的推广是件好的事。 没有最好的技术，只有最适合的技术。个人认为对于HTML5是要了解一些，但不要过分地追求新技术，毕竟现在HTML5还不规范，支持也少。最后引用岁月如歌的一段话： 关注是可以的。有时间（我觉得大部分人其实都没时间），去尝尝鲜也是有益的。但是对于大部分营养不良的前端，推荐还是脚踏实地老老实实的去学一门传统编程语言，去把数据结构/基础算法/设计模式/数据库等等基础知识点给搞瓷实了再说。这样，等 HTML9 出来的时候，对你而言，无非就是淘汰了一些旧 API, 增加了一些新 API … 继续阅读
动态载入JavaScript以及它的load事件
动态载入JavaScript 动态载入JavaScript非常简单，代码演示如下： var head= document.getElementsByTagName(‘head’)[0]; var script= document.createElement(‘script’); script.type= ‘text/javascript’; script.src= ‘test.js’; head.appendChild(script); 侦测JavaScript是否载入 我们常常用JavaScript来给其它元素添加load事件，但如果给一个script自身添加load事件还真不是一件容易的事。对于非IE的高级浏览器来说和一般元素添加事件方法是一样的，代码演示如下： script.onload=function(){ // do something }; 但对于IE来说则要复杂一点，不能直使用onload，而要使用onreadystatechange事件，通过onreadystatechange事件来判断script元素的readyState属性是否等于complete或者loaded，从而来确认script元素是否已经载入。代码演示如下： script.onreadystatechange=function(){ if(this.readyState == ‘loaded’ || this.readyState == ‘complete’){ // do something } }; readyState具有以下几个状态值： 0 : uninitialized 1 : … 继续阅读
CSS中文字体转编码
转自悠悠左的《Unicode – CSS中文字体转编码》。 在制作网页的时候，为了兼容大部分浏览器，我们常常要求在CSS样式文档中不出现中文字体的，尤其是在{}中，因此通过参照下表将其对应转编，可以将中文名转成英文名。 注意unicode2是直接输出为文本的。 比如：微软雅黑，我们在CSS中的设置为： .font01{ font-family:”Microsoft Yahei”; } 也可以是对应的unicode形式： .font02{ font-family:”\5FAE\8F6F\96C5\9ED1″; } 但微软雅黑对应的unicode2即微软正黑体写在样式文档里是没有效果的，因为unicode2是以文本形式输出的，这个可以将对应的unicode2放到html文档中尝试一下，对应输出微软雅黑四个字。 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑 华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体 华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体 华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体 … 继续阅读
attachEvent中this指针问题
在IE中使用attachEvent给一个元素绑定行为时，事件中的this指针会指向window对象，而不是元素本身，但使用addEventListener或者以elem.onclick = someFunc这种形式绑定的行为则不会出现这种问题。解决的问题也很简单，就是通过call或者apply把this指针引向元素自己，jQuery中也是这样做的。 var _ele = document.getElementById(‘myElement’); try{ _ele.addEventListener(‘click’,clickFunc,false); }catch(e){ try{ _ele.attachEvent(‘onclick’,function(){clickFunc.call(_ele)}); }catch(e){}; } 这样函数clickFunc中的this指针就会指向被绑定行为的元素了。
用Dust-Me Selectors清理CSS文件
现在减少文件大小是前端的一项重要任务，对于js和css文件可以用软件去除里面的注释和空格来达到减少体积的目的。但是css文件还是有很多无用的代码，可以用Dust-Me Selectors来得到无用代码的名单，然后就可以按图索骥来清除它们。 支持外链形式的样式表，如使用<link>和@import外联到页面中的样式表，还包括<?xml-stylesheet?>处理结构里带的样式表。但是对于嵌入样式（在标签<style>内的样式）和内联（使用元素的style属性的行样式）的样式，是不支持的。 支持IE条件注释语句。 即可以检查单页，也可以检查整个站点。 可以识别大部分的CSS2和CSS3选择器，但可以识别所有的CSS1选择器。 可以识别一般的CSShack，如：“* html #foo”会被当成“html #foo”。
Table的“min-height”属性
今天在制做页面时，需要对table元素里的td设置min-height属性，但怎么设置都没有效果。我想难道是和position属性一样，不能对table元素设置吗？搜索了一下这才恍然大悟，原来对于table元素，如th、td来说，使用height属性就等效于min-height属性了，如果表格内容高度大于所设定的高度值，表格会自己扩大高度以适应内容的。如： td{ height:300px; /* 等效于普通元素的 min-height */ }
HTML5的新标签
无论HTML5能否成为Flash的杀手，也不管现在它是否成熟，以目前的情况来看掌握它都是必需的。 HTML5添加了很多功能更强，也更语义化的标签，但也删除了一些HTML4的标签，如：font和center。HTML5新引入的HTML元素包括: article：文章 aside：内容旁边的侧边栏内容 audio：音频 canvas：2D 绘图 command：命令按钮 datalist：下拉选择框 details：对象的细节 dialog：对话框 embed：外部插件或对象 figure：一组媒体对象以及标签文字 footer：页脚 header：页首 hgroup：文档某一部分的信息 keygen：表单生成的 Key mark：标注的文字 menu：排列表单控件 meter：预先定义的范围内的度量 nav：导航条 output：输出 progress：进度条 rp：标识 ruby 内容 rt：ruby 内容的解释 ruby：ruby 内容 section：定义一个部分 source：媒体的资源 time：日期时间 video：视频
3个IE Bug及其修复
节选自《10个糟糕的IE Bug及其修复》，正如文章名，文章列出了主要是IE 6的Bug以及其解决方法。有不少都是已经很熟悉的了，现在只列出里面的三个放在这里做下记号。 Bicubic图片缩放 在IE中缩放图片会出现一些锯齿，显示效果不如其它浏览器。解决方法可以加入下面一段CSS代码： img { -ms-interpolation-mode: bicubic; } IFrame背景透明 要想在IE中把IFrame的背景设为透明，首先要把IFrame的allowTransparency属性设置为true，如下： <iframe src=”content.html” allowTransparency=”true”> </iframe> 还要在CSS代码中加入如下代码： body { background-color:transparent; } 禁用IE默认的垂直滚动条 默认情况下IE始终都会显示垂直滚动条，以前去除默认垂直滚动条的方法就是用JavsScript，现在看到这个方法更方便，只要在CSS代码中加入如下代码即可： html { overflow: auto; }
JavaScript面向对象编程中私有成员、静态成员的实现
JavaScript面向对象编程中私有成员、静态成员的实现要比Java、ActionScript、Python要复杂的多，现在摘抄一些《JavaScript设计模式》中的代码来做演示。 私有属性和方法 var Book = function(newName){ // 私有属性 var name; // 私有方法 function checkName(name){ // … } // 特权方法 this.getName = function(){ return name; }; // 特权方法 this.setName = function(newName){ name = newName || ‘No Name’; }; // 构造代码 this.setName(newName); … 继续阅读
自定义表单控件脚本
像file、select、radio和checkbox这样的表单控件很难直接用CSS自定义样式，在很多网站中不得不使用浏览器已定的样式。但设计师却很希望对这些表单控件也能够使用自定义的样式，以达到作品丰富美观统一的要求。要实现这种功能一般有两个办法，一个是使用Flash或者Silverlight来替换HTML表单元素。另一个简单方便的办法就是用JavaScript，以近乎障眼法的方式来进行模拟表单元素。而且用JavaScript的方式不会破坏原HTML页面的结构，保证页面的兼容性和可访问性。 Uniform Uniform是基于jQuery的一个插件，如果你的网站已经在使用jQuery，那么用这个最合适。 Niceforms Niceforms不基于任何JavaScript框架，可以独立使用，而且体积小，是个轻量的应用。 JavaScript image combobox JavaScript image combobox也是一款基于jQuery的一个插件，它和jQuery Accordion Common出自同一个人。JavaScript image combobox只能自定义select的样式，但是它可以为select的每一个选项定义一个图标。