前言
HTML 5如同一场革命，正在Web2.0后时代轰轰烈烈的进行着。
HTML 5是什么，无须我在这里赘述了。对于HTML 5的革新，按我的理解，可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的API支持。总之，HTML 5让人机交互，人网交互变得更加舒适，贴合用户。以往对富媒体应用与本存储的支持乏力也不再是浏览器的切肤之痛。将Web从内容平台推向标准化的应用平台，并一统各在平台阵营的标准，才是HTML 5革命的初衷。
本文，我就抛砖引玉，阐述HTML 5的革新之一：语义更明确简洁的结构。
从"头"说起
一个标准的XHTML头部代码应该是这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head>你能记住吗？你会去死记硬背吗？当然不会！我们只需要机械的复制粘贴即可。 再看看一个标准的HTML 5头部是如何的：
<!doctype html> <meta charset=gb2312>孰繁孰简，就不用我说了。是的，HTML 5的头部可以如此简单，可以轻易的记住！并且，可以忽略大小写，引号以及最后一个尖括号前的反斜线。 为什么可以如此松散？其实，如果把XHTML当成text/html发送，浏览器一样可以很好的解析，浏览器并不在乎代码的语法。所以，HTML 5是形而上的，它可能会破坏原有的一些标准，但仍可在浏览器中很好的表现。 当然，为了团队协助与后续维护的方便，我们还是应该统一一种你喜欢的风格的写法，比如：
<!doctype html> <html> <head> <meta charset="gb2312" /> ... </head> <body> ... </body> </html>另外，HTML 5虽然目前并不为所有浏览器所支持，但这个能省去100多字节(对于日PV百万级以上的站点，能省下不少的流量哦)的头部已可以完美的兼容了。如果你对浏览器解析模式有研究的话，你应该知道，页面在没有定义doctype的情况下会触发怪异模式，而只要定义了<!doctype html>浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD。 新的语义化标签体系 语义化编码是一个合格前端Developer必备的技能，但随着网页的日渐丰富化，仅仅用原有的xhtml标签去语义化显然已经力不从心。上帝说："要有光！"便有了光。于是，HTML 5提供了一系列新的标签及相应属性，以反应现代网站典型语义。实践出真理。还是写一个例子吧：
<div id="header"> <div class="hgroup"> <h1>网站标题</h1> <h1>网站副标题</h1> </div> <div id="nav"> <ul> <li>HTML 5</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> </div> <!--//header end--> <div id="left"> <div class="article"> <p>这是一篇讲述HTML 5新结构标签的文章。</p> </div> <div class="article"> <p>这还是一篇讲述HTML 5新结构标签的文章。</p> </div> </div> <!--//left end--> <div id="aside"> <h1>作者简介</h1> <p>Mr.Think，专注Web前端技术的凡夫俗子。</p> </div> <!--//side end--> <div id="footer"> 页面的底部 </div> <!--//footer end-->上面是一个简单的博客页面部分HTML，由头部、文章展示区、右侧栏、底部组成。编码整洁，也符合XHTML的语义化，即便是在HTML 5中也可以很好的表现。但是对浏览器来说，这就是一段没有区分开权重的代码，而不是一个让机器也能读懂语义的标签来定义相应的区块。比如，标准浏览器（比如Firefox、Chroome甚至新版的IE）都有一个快捷键可以带引客户直接跳转到页面的导航，但问题是所有的区块都是用DIV定义，并且DIV的ID值是同开发者定的，所以，浏览器并不知道哪个应该是导航链接所在区块。HTML 5新标签的出现，正好弥补了这一缺憾。那么，上面的代码，换成HTML 5就可以这样写：
<header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> <nav> <ul> <li>HTML 5</li> <li>CSS</li> <li>JavaScript</li> </ul> </nav> </header> <div id="left"> <article> <p>这是一篇讲述HTML 5新结构标签的文章。</p> </article> <article> <p>这还是一篇讲述HTML 5新结构标签的文章。</p> </article> </div> <aside> <h1>作者简介</h1> <p>Mr.Think，专注Web前端技术的凡夫俗子。</p> </aside> <footer> 网页底部 </footer>原来，HTML的页面结构可以如此之美，不用注释也能一目了然。对于浏览器，找到对应的区块也不再会茫然无措。 如何用HTML 5新标签结构化元素 通过上面的示例，我们了解到HTML 5的新标签对结构化的革新，但切换到实际使用中，该如何恰当的使用它们呢？我想这也是很多HTML 5学习者想问一个问题。如同XHTML语义化一样，HTML 5语义化标签的使用也应该遵循：每个标签都有它特定的意义，而语义化，就是让我们在适当的位置用适当的标签，以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。比如header标签一般是页面的第一个区块元素(header标签也可用于类型的头部元素中，比如文章区块的标题)，包含的了页面的主题信息；nav标签一般用于包裹导航信息；footer一般用来包裹页面底部信息；等等。 下面是我参考HTML 5手册列出的结构类常用新标签的语义解释及使用指引： <header>标签 手册释义：定义 section 或 document 的页眉。 使用指引：一般用来包含页面头部，也可用于其他区域头部，比如article头部：
<header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header><hgroup>标签 手册释义：用于对网页或区段（section）的标题进行组合。 使用指引：用于标题类的组合，比如文章的标题与副标题：
<hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup><nav>标签 手册释义：定义导航链接的部分。 使用指引：用于定义页面的导航部分：
<nav> <ul> <li>HTML 5</li> <li>CSS</li> <li>JavaScript</li> </ul> </nav><aside>标签 定义 article 以外的内容。aside 的内容应该与 article 的内容相关。 使用指引：用于成节的内容，会在文档流中开始一个新的节，一般用于与文章内容相关的边栏：
<aside> <h1>作者简介</h1> <p>Mr.Think，专注Web前端技术的凡夫俗子。</p> </aside><section>标签 手册释义：定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。 使用指引：用于成节的内容，会在文档流中开始一个新的节：
<section> <h1>section是什么？</h1> <h2>一个新的章节</h2> <article> <h2>关于section</h1> <p>section的介绍</p> ... </article> </section><footer>标签 手册释义：定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。 使用指引：一般用来包裹整个页面通用底部，也可用于其他区域底部，比如article底部：
<footer> COPYRIGHT@Mr.Think </footer><article>标签 手册释义：定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文 本。亦或是来自其他外部源内容。 使用指引：顾名思义，一般用于文章区块：
<article> <header> <hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup> <time datetime="2011-03-20">2011.03.20</time> </header> <p>文章内容详情</p> </article><figure>标签 手册释义：用于对元素进行组合。 使用指引：多用于图片与图片描述组合：
<figure> <img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>这儿是图片的描述信息</figcaption> </figure><menu>标签 手册释义：定义菜单列表。当希望列出表单控件时使用该标签。 使用指引：使用于菜单类区块，用来定义菜单列表或菜单选项:
<menu> <li>HTML 5</li> <li>CSS</li> <li>JavaScript</li> </menu>
HTML 5的其他新标签，就不此一一解释了，请自行查询一下手册。 其实，这些东西，如同XHTML的div、h1、inpu等标签一样，只要平时多加实践，运用自如也是轻而易举的。 关于兼容性 如果你是一个喜欢研究关注前端的人，你应该知道淘宝的页面结构中已大量用到了HTML 5新标签。所以，我想说的是只要敢于尝试，兼容性不是问题，兼容的方法，网上有很多（本文是讲结构的，哈~）。 后话 任何一门新技术，都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员，那你就得不断的尝试并接受最新的前端技术。 孙文曾说，欲经文明之幸福，不得不经文明之痛苦。人类的革命如此，HTML 5的革命亦是如此。IE的日渐没落，让各大浏览器厂商以一次进入了战国时代，群雄逐鹿。而对于开发者，我们只奢求各大浏览器厂商尽可能的遵循同一个标准，而不是群雄逐鹿后的四分五裂。因为，高效完美的呈现给各类用户同样的应用才是我们的终极目标。 如此，本文从页面的doctype说起，到用HTML 5新标签搭建语义化更明确的页面的结构，再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知，如果你有兴趣，那就打开你的IDE，写上一段由HTML 5新标签搭建的代码，然后用CSS去描绘你的宏伟蓝图吧！
原文发布于Mr.Think的博客：http://mrthink.net/html5-simple-structure/
posted @ 2011-04-22 09:51 Mr.Think 阅读(2050) 评论(7) 编辑
相对于jQuery、YUI以及其他一些类库的AJAX封装，原生JS的AJAX显得那么的尴尬，兼容性不好，要记很多的方法属性，调用不便捷，代码臃肿...但我还是想说，原生JS才是最根本最底层的知识（虽然实际项目中我也是以jQuery AJAX为主，为什么？高效！），求木之长者，必固其根本。
什么是AJAX? 它的优点劣势是什么？
Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。简单的说它是多种技术的组合，目的就是让前台的数据交互变得更快捷，不用刷新页面就可以完成数据的更新。关于它的概念，止于此。想了解更多，请前往：http://zh.wikipedia.org/zh/AJAX
优点很明显，利于用户体验，不会打断用户的操作，在不刷新页面的情况下更新内容，减小服务器压力也是它很硬性的一个优点；而缺点，除了倍受追捧的SEO问题，安全问题、前进后退（这个虽然可以用其他方法解决，但AJAX本身的机制还是没变）、破坏程序的异常机制以及对新兴手持设备支持不完美的问题都是它现存的一些缺点。人无完人，AJAX也是如此，我们并不能因为它有缺点而摒弃它。
什么地方需要AJAX?
其实这是一个太宽泛的问题，各人各项目都有不同的用处，依我的经验与理解，AJAX应该用于小面积更新数据而不希望整个页面刷新的情况下使用。比如对用户名或者注册邮箱等数据判断、内容选项卡内容、弹出的登录注册窗口以及用户提交信息后的反馈信息等等。
实践出真知！
崇尚思考加实践，我坚信这是深入任何一门技术的必备法宝。下面，我就以一个常用的验证用户是否使用的实例，浅尝辄止的讲解一下基础的AJAX。查看样例演示
验证用户名这种数据判断，不用多说了，会一点点前端的人都知道是必须的。最传统的模式可能是输入信息，然后用户点提交后alert出一个窗口，告诉用户XXX用户名已被注册，请重新输入！我讨厌极丑的alert框！我想大多用户也是一样。此时，AJAX就可以华丽登场了。当用户输入完名字后，在表单外任何地方点一下（失去焦点），AJAX就迅速把用户输入的信息反馈到服务器端判断，并迅速返回一个信息告知用户输入的昵称是否可用。如此，我们需要一个前台的输入表单，代码如下：
另外，我们还需要一个判断输入昵称是否存在的后端页面（本文以PHP为例，这部分不用细究）:
...
if(isset($_GET['entryname'])){
$entryname=$_GET['entryname'];
}else{
$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readState==1时的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉！此昵称已存在 :(";
}else{
echo "恭喜！此昵称可注册 :)";
}
...
如此，万事俱备，只欠东风，剩下的就交给AJAX来处理了。
XMLHttpRequest，不得不提的一个对象，AJAX最核心也是最底层的对象。可悲哀的是，它是W3C的一个标准，但微软IE一直很自我（微软IE）。怎么办？当然是用一个方法和谐掉它们。微软IE支持ActiveXObject('Microsoft.XMLHTTP')对象，这样就简单了：
//兼容的XMLHttpRequest对象
IXHR: function(){
if(window.ActiveXObject){
XHR=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR=new XMLHttpRequest();
}else{
return null;
}
}
兼容的XMLHttpRequest对象实现了，接下来写一个简单的onblur事件，即当输入值后，表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下：
//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
//输入的值
var val=document.forms['iform'].nickname.value;
//对用户名的判断
if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
alert('请输入3~16位由英文、数字、下划线组成的昵称！');
return false;
}
//初始化一下XHR
iBase.IXHR();
//原来需要新打开的判断页面用GET使用异步
XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
//与readyState属性有关，当readyState改变时它才会触发
XHR.onreadystatechange=returnFun;
//异步处理完成后发送数据出去（比如某些需要在焦点事件后再执行的）
XHR.send(null);
}
解释一下AJAX部分的代码。iBase.IXHR()，初始化XHR，以保证XMLHttpRequest对象的兼容。接下来，通过以GET的方式，异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET，GET是从服务器上请求数据，GET方法就是把数据参数队列加到一个URL上，值和表单是一一对应的，比如本文的entryname=val。这个概念可能属于后台程序的范畴，不在此细说。然后，我们需要用到一个onreadystatechange事件属性，这个属性是用来存储函数（或函数名），每当readyState属性改变时，就会调用该函数，即本文中的returnFun；最后，我们还要发送一个数据到服务器，send属性一般用于数据交换,而本文只是一个简单的验证判断，所以，send一个空值。
基本的判断与数据发送完成了，接下来还剩一个关键的信息获取，即returnFun。先看代码：
function returnFun(){
//当send()已调用，正在发送请求时，显示Loading...
if(XHR.readyState==1){
iBase.Id('tips').innerHTML='Loding...';
}else if(XHR.readyState==4){
//当响应内容解析完成，可以调用时
//更缜密，再判断一下status是否成功
if(XHR.status==200){
//responseText为返回的文本
iBase.Id('tips').innerHTML=XHR.responseText;
}
//使用完请销毁，避免内存泄露
XHR=null;
}
}
此函数是用来通过判断readyState及status状态也及时反馈给用户相应的提示信息。readyState有五种状态： 0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法； 1 (载入)：已经调用open() 方法，但尚未发送请求； 2 (载入完成)： 请求已经发送完成； 3 (交互)：可以接收到部分响应数据； 4 (完成)：已经接收到了全部数据，并且连接已经关闭。 如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种： 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——成功 201——提示知道新文件的URL 300——请求的资源可在多处得到 301——删除请求数据 404——没有发现文件、查询或URl 500——服务器产生内部错误 至此，一个简单的AJAX验证实例就完成了：查看样例演示 关于AJAX的基础介绍与实例就这么多，关键还是在于自己的实践与思考。其实这其中涉及知识并不复杂，若有后端程序的基础，学起AJAX会更加容易，关键是要想明白其中的逻辑关系。有兴趣的话，可以自己写一个不刷新页面加载新内容的AJAX，或者研究一下jQuery中关于AJAX的封装。
原文发布于Mr.Think的博客：http://mrthink.net/ajax-starter-xmlhttpreq/ 转载请注明
posted @ 2011-03-29 13:16 Mr.Think 阅读(2156) 评论(3) 编辑
最近公司项目页面中用到选项卡与幻灯比较多，特地写了个集选项卡、幻灯片与播放控制于一体的插件，同页面可多次使用。思路就不说了，记得以前写过一个自动切换的幻灯插件：http://mrthink.net/jq-plugin-ifadeslide/，思路有部分是类似的。当然，本文中插件源码中也有注释~
插件核心代码：点此查看样例
$.fn.WIT_SetTab=function(iSet){
/*
* @Mr.Think
* Nav: 导航钩子；
* Field：切换区域
* K:初始化索引；
* CurCls：高亮样式；
* Auto：是否自动切换；
* AutoTime：自动切换时间；
* OutTime：淡入时间；
* InTime：淡出时间；
* CrossTime：鼠标无意识划过时间
* Ajax：是否开启ajax
* AjaxFun：开启ajax后执行的函数
*/
iSet=$.extend({Nav:null,Field:null,K:0,CurCls:'cur',Auto:false,AutoTime:4000,OutTime:100,InTime:150,CrossTime:60},iSet||{});
var acrossFun=null,hasCls=false,autoSlide=null;
//切换函数
function changeFun(n){
iSet.Field.filter(':visible').fadeOut(iSet.OutTime, function(){
iSet.Field.eq(n).fadeIn(iSet.InTime).siblings().hide();
});
iSet.Nav.eq(n).addClass(iSet.CurCls).siblings().removeClass(iSet.CurCls);
}
//初始高亮第一个
changeFun(iSet.K);
//鼠标事件
iSet.Nav.hover(function(){
iSet.K=iSet.Nav.index(this);
if(iSet.Auto){
clearInterval(autoSlide);
}
hasCls = $(this).hasClass(iSet.CurCls);
//避免无意识划过时触发
acrossFun=setTimeout(function(){
//避免当前高亮时划入再次触发
if(!hasCls){
changeFun(iSet.K);
}
},iSet.CrossTime);
},function(){
clearTimeout(acrossFun);
//ajax调用
if(iSet.Ajax){
iSet.AjaxFun();
}
if(iSet.Auto){
//自动切换
autoSlide = setInterval(function(){
iSet.K++;
changeFun(iSet.K);
if (iSet.K == iSet.Field.size()) {
changeFun(0);
iSet.K=0;
}
}, iSet.AutoTime)
}
}).eq(0).trigger('mouseleave');
}
原文发布于Mr.Think的博客：http://mrthink.net/jq-settab-slide/ 转载请注明posted @ 2011-03-28 11:26 Mr.Think 阅读(2201) 评论(4) 编辑
——听说你跳槽了？回西安了？
——恩。
——薪水很高吗？
——跟原来差不多。
——那你去那儿干啥？
——购买力增强三倍。
要求：
1. 只招猛人，菜鸟绕行！
2. 高效、专注、诚实、负责，能承受高强度工作；
3. 精通PHP+MySQL，熟悉WAMP开发流程,能写优质的代码；
4. 三年以上商用网站开发经验，熟悉XHTML/CSS/JAVASCRIPT及AJAX技术者优先；
薪资：
提供京广沪相同水准的薪水及同等的福利（不明确？能力决定薪水）。
公司介绍：
智讯互动，西安首家整合互动营销机构，已搞定西安最优质的客户，万事具备，只欠猛人。
我们提供与京广沪相同水平的薪水，在西安这座很有味道的城市，大家可以过上更体面的生活。
热切欢迎业内的西安游子回来。
我们的人才理念很简单：
·我们诚挚的邀请优秀的人才加盟，并为他们创造尽量宽松、愉快的工作环境。
·我们推崇专注而高效的工作，轻松开放的沟通，用创造性的想法解决问题。
·我们提供高于同城行业标准的薪水，能让你在这个城市里体面、有尊严的生活。
在我们的团队中，有艺术生、文科生、理科生、退学生；
有人热衷相声表演，有人钻研佛教文化，也有人喜欢泡淘宝和豆瓣；
有人是手持设备技术发烧友，有人是游戏狂人，霸占公司那台Wii；
我们鼓励背景各异的人在此互相分享，激荡创造力。
投递:
cnbluebird#gmail.com（非诚勿扰）
posted @ 2011-03-10 10:18 Mr.Think 阅读(263) 评论(1) 编辑
请在新版标准浏览器(Chrome/Opera/Firefox/Safari...)中浏览本文中的样例,否则你看到的只是一个个空白的表单! ⊙﹏⊙‖∣
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML5.虽然HTML5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML5离我们不再遥远. 学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新. 阅读本文前建议在Opera最新版中打开样例演示页查看样例演示 一、表单结构更自由 XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来. 比如:
二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示) email输入类型此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果. url输入类型
上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)
这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样. number输入类型(这些个很牛X的)
这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误. range输入类型
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值. search输入类型
此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标. tel输入类型
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别. color输入类型
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中. 三、新增的表单属性 placeholder属性
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持. require/pattern属性
表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果. autofocus属性
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus(). list属性
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容. max/min/step属性
限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯. autocomplete属性
此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
路漫漫其修远兮，吾将上下而求索.前端之路,学无止尽.痛并快乐着. ╰(￣▽￣)╮
原文首发于Mr.Think的博客: http://mrthink.net/html5-newfeatures-form/ 转载请注明.
posted @ 2011-02-23 10:18 Mr.Think 阅读(2450) 评论(7) 编辑
摘要: 今天又要用到动态显示当前时间,且要求可以切换24/12小时制, 记得很久前写过一个24小时制的,但一时没能找着, 于是又重新写了个,若有需要的朋友自行复制粘贴一份吧. 很简单的一个功能函数,实现方式不多言,用Date()对象获取到当前时间,然后用setTimeout每隔1秒获取最新的时间.写的过程中碰到过一个小小的问题: 我最初的想法是用setInterval()每隔1秒获取最新时间,可是可以,但setInterval如果放在主函数内部,但导致内存泄漏(至于原因,暂时还没想明白),后来在Rocky的提醒下用setTimeout()才解决内存泄漏问题,感谢Rocky同学:)核心代码及演示查看样例阅读全文
posted @ 2011-02-19 08:32 Mr.Think 阅读(498) 评论(2) 编辑
摘要: 淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值.参数说明:fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.核心代码阅读全文
posted @ 2011-01-29 16:50 Mr.Think 阅读(2185) 评论(4) 编辑
摘要: 时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.HTML与CSS阶段书藉选择对初学都来说,这一阶段应该是XHTML与CSS2的学习. 学习前期, 建议至多看两本书:《CSS权威指南》和《CSS那些事儿》, 有一定CSS基础后, 可以看《精通CSS：高级Web标准解决方案》. 或许你会问,为什么没有HTML学习的书籍, 就我个人立场而言, 在你还没入门前, W3C在线教程或者HTML手阅读全文
posted @ 2011-01-21 14:31 Mr.Think 阅读(917) 评论(3) 编辑
摘要: 原生Js因jQuery的"write less,do more"变得极简, Html因语义化编码变得简明, 那么, 有没有一种方式让Css也更加的高效精致呢? 当然有, 那便是模块化编码.Css的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, "类"便是它的核心, OOP的多用组合少用继承一样是它的基本原则. Css模块化是一个新颖高效的Css编码方式, 若有接触过YUI Css的朋友肯定对这种方式有所了解.如何Css模块化, 我想这才是大家真正关心的. 我所理解的Css模块化, 应该从两大块去区分. 第一大块, 从整站全局模块化. 这一点大家并阅读全文
posted @ 2011-01-10 16:36 Mr.Think 阅读(1599) 评论(1) 编辑
摘要: 上午在项目中遇到的一个问题, 折腾了半小时才把思路理顺. 需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系, 写的也比较零散, 就没有封装. 其实, 阅读全文
posted @ 2011-01-07 11:24 Mr.Think 阅读(445) 评论(0) 编辑