昨晚要送别一位到广州工作的腾讯同事又喝了点酒，今天周末才有点时间写一下这些天来的感想。

感触的真的很多，我这辈子从来就没试过有这样的感觉，腾讯是一个把有上进心、有抱负、有专长的年轻人聚集在一起的地方。尽管有本科生，有研究生，还有博士生，这里的人无论年龄上多大，走在一起都变得很年轻。

人生难得找到自己认为是同类的人，而且是一群同类的人。有这样同类的朋友，这辈子都不算白过了。培训期间，不管认识我的不认识我的，我都可以迎面就聊起天来，为什么？因为能进腾讯的都是自己学校里面的佼佼者，这种人不会拒绝交流。而正是因为大家都不是一般人，谁都不敢质疑谁的能力，而且当大家几个人坐下来聊起以往自己做的事情的时候，大家不会说会认为自己有多强，更多的只是对对方的羡慕和学习。这种氛围实在太好了。

人生缺的就是一种坦荡，步入职场之后每天带的都是面具，只有在自己喜欢的朋友面前才能表露出自己最真的一面。大学四年有多少人曾经喝酒后嘶声力竭地把自己真正的想法说出来的？有多少可以当场就跟喜欢的人表白的？有多少可以在异性之间谈论重口味事情的？基本上都没有！但是10天的培训后，我们的三班就有！

男的不管斯文的不斯文的，狂起来的时候都很放得开；女的温柔的不温柔的，多疯狂都会有体贴人的、温柔的时候。

那个结业晚会，即使是我看见过最重口味的晚会，但是却给我一种由心的震撼，这群人很疯狂，但是很有创意。多少在场的同学都感动得泪流满面了！？在这么短的时间准备节目，却高质量地完成了任务，这是一种凝聚力啊！情可尔坎！多么的武藤兰啊！

注意！图片中的人都不是我

这短短的10天将是我人生中最难忘的10天，这一群疯了的但是奇妙的家伙一辈子都是我的朋友。感性的话实在不会说，但是你们对我的情意，会像烙印一般永远打在我的心中。

我就是喜欢，大家都疯了，大家都很奇妙！

• 2009-11-08 -- 从开始到结束，腾讯校园招聘，凯旋归来

这本书的简介我就直接引用豆瓣的啦，毕竟我还没有看完哈。

不看不知道一看吓一跳，这本是一本好书，我看了第一章的前几节就给迷住了。就我看的那几节，它把javascript的来龙去脉都说清楚了，‘浏览器大战’之类的词藻我还真第一次听说，说得挺让人感兴趣的。越看越兴奋，让我感觉到javascript甚至其他前端知识的前卫性，前端将牵起一段革命，这一点也不夸张，因为按这书说的，不同巨头公司之间一直以来都在技术革新。这让我感受到一种机遇和一种挑战。

在未来为迎合这个革命，自身增值显得相当重要，‘一专多长’maybe是所有搞前端的同学的目标。我想就算我大学快到尾声了，也不能松懈，可以说生活中的每个人都在不同程度的变蠢，是时代变迁带来的副作用，只有不断学习才可以让人减缓变蠢的程度。

时间和竞争很无情，但却让人感觉到动力的存在，我想努力学习将是永恒的主题。

• 2010-01-31 -- 实际上js文件放最后是个好方案，但有更好的方案
• 2010-01-30 -- js中方法类的拟静态属性、公有属性、私有属性
• 2009-12-01 -- js事件、事件处理研究，关键字：event、传播
• 2009-08-29 -- 神奇简洁的拖动js代码
• 2009-04-11 -- 要写一写剩下的大三日子的计划了

以下有剧透成分。

故事发生在一个欧美老夫老妻的家庭，讲述一位老教授不经意在下班的车站捡到一只日本的小狗，收养了下来。小狗很喜欢那位老教授，那位老教授也很喜欢它。每天上班的时候小狗会送老教授到车站之后就自己回家，而每逢下午4点多差不多5点的时候，小狗总是跑到车站来，坐在同一个位置，等候老教授下班归来。

那段日子很温馨，那条街的人都认识这只狗。

但是有一天，老教授上班，在教学生钢琴的时候，本来很愉快，但突然因为心脏病去世了。那天那只小狗在那里等到半夜也没看见老教授，后来老教授家人把它接回去。之后小狗被转交给了老教授的女儿照顾。但是小狗却很想念老教授，自己跑了出来，因为不认识路，晚上它就呆在废弃的火车头下面休息，早上它就顺着铁路往回走，一直回到以前每天它等老教授回来那个位置，每天5点左右就在那里等，就这样足足等了10年，它等了10年。等得它都老了，走动就像个老人。

最后那个白天，老教授的妻子回来了，发现它还在等，就过去跟它说话，街道上面卖了10多年咖啡的老伯都哭了。

那天晚上，它就在等候中死去了。

整个故事里面没有一个反角，出现的人都是好人。前半段音乐很平和气氛很温馨，后半段在老人死了之后就算音乐再平和，整个场面都让人想哭。

看完后，我真说不出自己什么感觉了。

• 2009-04-26 -- 情感设计师
• 2008-11-08 -- 动画片《鲁鲁修R2》中感人的歌曲

《最爱还是你》

传说中的台湾小天王。

• 2008-10-09 -- Hello Sour Sally!一个好玩的FLASH网站
• 2009-09-29 -- 我的在线简历第000000001版
• 2009-09-27 -- 【Mootools 1.2中文实例诠释】Fx.Scroll扩展类应用–带动画效果的锚点跳转
• 2009-11-11 -- 又是一年一度的光棍节！
• 2008-09-29 -- 零基础学会建立一个简单化妆品网站—前台设计篇1[PS画草图]

实际上就是鼠标从外面移到某个元素里面（触发了目标方法）后，鼠标再在里面移动不会重新触发目标方法。moueseleave同理。

本身ie系列浏览器是有onmouseenter这个事件定义的，但是firefox之类的浏览器没有这个，所以只能模拟。

以下提供完美模拟的方法：

//ele为目标元素，type为事件类型不用'on'，func为事件响应函数
var addEvent=function(ele,type,func){
	if(window.document.all)	
		ele.attachEvent('on'+type,func);//ie系列直接添加执行
	else{//ff
		if(type==='mouseenter')
			ele.addEventListener('mouseover',this.withoutChildFunction(func),false);
		else if(type==='mouseleave')
			ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
		else
			ele.addEventListener(type,func,false);		
	}
}
var withoutChildFunction=function(func){
	return function(e){
		var parent=e.relatedTarget;//上一响应mouseover/mouseout事件的元素
		while(parent!=this&&parent){//假如存在这个元素并且这个元素不等于目标元素（被赋予mouseenter事件的元素）
			try{
				parent=parent.parentNode;}//上一响应的元素开始往上寻找目标元素
			catch(e){
				break;
			}
 
		}
		if(parent!=this)//以mouseenter为例，假如找不到，表明当前事件触发点不在目标元素内
		func(e);//运行目标方法，否则不运行
	}
}
function $(id){
	return document.getElementById(id);
}
addEvent($('parent'),'mouseenter',function(e){alert(e.relatedTarget);aa(1)});
function aa(a,b){
	alert(a);
}

原理有点难理解，但是大家可以看到，实际上当你在目标元素内（以mouseenter为例）移动，实际上还是会触发mouseover事件，但可以通过判断元素位置来判断是否执行目标方法。

• 2010-01-31 -- 实际上js文件放最后是个好方案，但有更好的方案
• 2010-01-30 -- js中方法类的拟静态属性、公有属性、私有属性
• 2009-12-01 -- js事件、事件处理研究，关键字：event、传播
• 2009-09-29 -- 我的在线简历第000000001版
• 2009-09-27 -- 【Mootools 1.2中文实例诠释】Fx.Scroll扩展类应用–带动画效果的锚点跳转

之前被这样问到，我马上就答：放最后。现在反省！实际上这个答案太肤浅了。

运行 Internet Explorer 7 或更早版本的浏览器在遇到 JavaScript 文件时会产生阻碍。通常，它们在以所谓的推测模式下载时速度足够快。但如果遇到 JavaScript，浏览器会跳出此模式，专门下载 JavaScript。而且多个Javascript是按串行形式下载，您将发现 JavaScript files 文件之间不会出现并行，也绝少会同时加载其他类型的文件。

所以我们会把所有其他东西都下载才开始下载js文件，所以我以前的答案是：把js放最后面。

而实际上在这个基础上还有技巧，就是把原来串行加载js的方式转为并行。具体做法：

<script language="javascript">
function AsyncLoad(){
    var l = arguments.length;
    for (var i=0;i<l;i++){
         document.write("<script src='" + arguments[i] + "'></" + "script>");
    }
}
AsyncLoad("file1.js","file2.js","file3.js");
</script>

我把这个做法总结为：在文档末端通过小js文件加载大js或多个js文件

以上是个人总结，如有错误，恳请指出

• 2010-01-30 -- js中方法类的拟静态属性、公有属性、私有属性
• 2009-12-01 -- js事件、事件处理研究，关键字：event、传播
• 2009-08-29 -- 神奇简洁的拖动js代码
• 2009-03-10 -- 推荐一个js表单验证类，很实用
• 2009-02-17 -- 各类电脑文档手册

下列代码使Test方法类具有一个静态属性arr(数组)

var Test=function(){
}
Test.prototype={
    arr:[]
}
var test1=new Test();
test1.arr.push('ddd')
var test2=new Test();
alert(test2.arr.length) //1

他问为什么两个实例（test1和test2）会共用一个arr数组。他要的是独立实例具有独立的那个arr（数组）属性，我刚开始还以为他问怎样可以共用一个数组。

后来给他提了一个解决方法：

下列代码使隶属于Test方法类的两个实例test1和test2具有各自的arr(数组)属性

var Test=function(){
    this.arr=[];//原理很简单，初始化的时候使当前实例（this）的arr(数组)属性（来源于对象原型:Test）从新指向空数组
}
Test.prototype={
    arr:[]//使分别两次实例化的时候具有两个arr(数组)，但是注意是指向同一个内存位置
}
var test1=new Test();
test1.arr.push('ddd')
var test2=new Test();
alert(test2.arr.length) //0

好，可以总结的有以下知识：

先看一下我整理过的例子

/***********带静态属性和方法的原型方法类的定义****************/
var Test=function(string){
    var privateArg='abc';//函数的私有变量，私有属性定义
    this.publicString=string;//为之后的实例初始化一个公有的字符串
    this.publicArr=[];//为之后的实例初始化一个公有的数组
    this.publicFunction=function(){//为之后的实例初始化一个公有的方法
	alert('I m the public function.'+'my string is "'+this.publicString+'"');
    }
}
//追加静态属性和方法
Test.prototype={
    staticString:'static',
    staticArr:[],
    staticFunction:function(){Test.prototype.staticString='alreadySetByFunc';}
};
 
/*************对静态属性和方法的研究******************/
var test1=new Test('p1');//实例化得到test1新实例
//我要修改静态的字符串，方法1：直接用原型类赋值
Test.prototype.staticString='s1';//通过原型类更改静态属性staticString
alert(test1.staticString);
var test2=new Test('p2');
//我要修改静态的字符串，方法2：实例通过静态方法赋值
test2.staticFunction(); //通过类的实例调用原型类的静态方法改变静态属性
alert(test2.staticString);
//通过赋值实例的静态属性（实际上就是来源于原型类的静态属性[一个复制]）不能更改原型类的静态属性
test2.staticString='s2';
alert(test1.staticString);//静态属性没有被修改
alert(Test.prototype.staticString);
//以下有个问题你可能觉得奇怪，为什么
test1.staticArr.push('newArg');//修改数组
alert(test2.staticArr);//为什么原型类的静态数组属性也发生改变了！？原因很简单：实际上实例化的时候新的实例实际上复制了原型类的静态属性和方法，而数组的复制，大家知道，实际上只是指向的复制，所以当任意一方对数据修改，其他引用到该数组的地方都会发生改变。
 
/***************对公有属性和方法的研究******************/
//Test.publicFunction(); //该句代码会出错，原因在于：对于Test方法类并没有公有的publicFunction方法，重点在理解this,在没有被实例化的时候this指的是window
test1.publicFunction();//在实例化的时候新的实例被初始化一个publicFunction方法
test2.publicFunction();//同上
test1.publicArr.push('newArg');//修改实例test1的公有数组
alert(test2.publicArr);//发现输出为空，表明实例test2的公有数组没有发生变化
 
/***************对私有属性和方法的研究******************/
alert(test2.privateArg);//为undefine，原因在于私有属性不能被实例引用

知识点：

• 定义方法类的拟静态属性或者拟静态方法只要在对象原型的prototype属性内定义即可。
• 修改静态属性有两种方法，第一种：直接原型类更改静态属性进行赋值；第二种：通过实例调用静态方法赋值；不能通过修改实例直接修改
• 实例化的时候实际上：新的实例从新获得静态属性和方法，而这些静态属性是原型类静态属性和方法的一个拷贝（因此要注意引用值类型数据属性（如数组）的复制）
• 原型类的定义中this并不是指原型类本身，而是指window,到实例化的时候this指的是实例本身，所以直接用原型类调用公有属性出错。
• 不同实例的公有属性和方法独立不相互影响，原因在于它们不是对原型类公有方法和属性的复制，因此不存在引用值类型数据的同步更改问题
• 方法内部定义的变量可以看做为方法类的私有变量，实例无法引用

这样总结一下，获益良多，以上为本人个人总结，如有错误无限欢迎指出，我会及时勘误。

最后原创文章，转载请注明出处：http://xiebiji.com/2010/01/static_js/

• 2010-01-31 -- 实际上js文件放最后是个好方案，但有更好的方案
• 2009-12-01 -- js事件、事件处理研究，关键字：event、传播
• 2009-08-29 -- 神奇简洁的拖动js代码
• 2009-03-10 -- 推荐一个js表单验证类，很实用
• 2009-02-17 -- 各类电脑文档手册

但是到现在，课不用上了，考试也不用了，但是人想的东西复杂了，找不回那种舒服的感觉了。

即使现在写这篇文章的时候我也被某些事情烦恼着，你说可以回到最初，回到那天真烂漫的时候该多好啊？

人很可悲，学习啊，工作啊，就是不愿意停下来想一下。

一路过来，很辛苦，为了更好的未来却又把最真挚的那份感动忘却了。泯灭的童真使生活变得单调而无助。

在笑语蜜言下又有多少不为人知的苦衷和怨恨，不傻的人都是虚伪的。

你不能否认，傻的人最幸福最开心。

笑得最厉害的人，哭的时候也最厉害，这就是我们，很多事情都扛着，我很不愿意把某些事情说出来。

我很努力去挽回那份最初的童真，但是很多时候笑脸下会有截然不同的景象。

在哄人家笑的时候，我很矛盾，面对的是人，人家觉得我乐观，但实际上，我不是，我也想自己是个乐观的人，但是做不到。

在请人家吃饭的时候，我也很矛盾，面对的也是人，人家觉得我很有钱，但实际上，我不是，我也想自己是，但是做不到。

我就是这样，把自己想做的事情表达出来，但是又可能没想过别人怎么想。就这样被误解，或是称赞或是鄙视，而更让我痛心的是我根本不知道是称赞还是鄙视。

也许我真的很天真，所以我很想回到最初，那种童言无畏的时候。

但是我知道这是无法实现的，现实还是现实，却很像一场梦。

我期待有一天睁眼起来我已回到最初了。

• 2009-04-14 -- 奇思妙想？？
• 2009-06-24 -- 近日考试，文章暂停更新
• 2008-08-09 -- 学校电子商务网页小型比赛：共享通信录网原创作图
• 2009-06-17 -- mootools中文实例诠释–1.2版AJAX,JSON运用
• 2008-08-11 -- FleaPHP 中的 MVC 模式

今天下午，经过我的精心策划，最后一门考试《项目管理》终于顺利结束，我承认我偷看别人的答案了，而且是早有预谋的。

实际上我是一个对于不喜欢学的知识不太在乎的人，所以我觉得某些学科对我来说是一种负担（当然《项目管理》确实是好东西）。

强迫我学习不喜欢的东西，我觉得很像在浪费我的时间。

当然我说的只是一些不关重要的东西，我总不可能因为不喜欢学英语就忘记24个字母的，我知道有些东西一定要学，例如公司规章制度之类。

注意：以下的“作弊”不是不可理喻的那种作弊手段，只适用于比较上进的大学同学。

我很鄙视大学考试，而且很叛逆的认为对于一个已经有所追求并且比较积极上进的人来说，作弊只是一种对他自己的负责，可以说是一种变通。这也许是一种错误的人生观，但是我真这么认为。

但是我并不是在提倡作弊。因为不是每个人都是好人。

作弊用在哪里起的作用就不一样，4/6级英文考试我总不能作弊呀，因为这是一种对基本能力的检测。而且我也承担不了这个风险。

我觉得只要是你压根就没有上过这么课，也完全没有兴趣研究这门课，更谈不上学了这门课就可以通过考试检测自己这门课能力的情况下，作弊也是可以理解的吧？（仅限大学）。

本身学习就应该立足于个人，到了大学还要强迫大学生学习自己不喜欢的学科，换个角度想一下，这不是在扼杀人家学习喜欢东西的机会么？大学不是高中或者初中，高中、初中那种普教当然是合理的，因为那是常识和基本知识，强制是应该的。但是到了大学就没必要设置那么多无关重要的课程考试让学生想方设法来及格，这是一种我觉得很愚蠢很奇怪的现象。

试问一下，一个是为了考试来看书的，一个是为了兴趣而看书，显而易见的是：后者比前者获益更多。

作弊也只是对这种现状的不满，也是一种对自己的负责吧。

也许你说这种作弊体现了个人的不正直的一面，我倒不这么觉得。站在个人立场，我想：这无关的科目还要浪费我宝贵的时间来复习岂不在浪费我生命？我投机取巧通过考试有可不当？而且我可以告诉别人，我就算考到好成绩也只是为了应付考试，我不具备这门课教的能力。

这跟正直不正直扯不上关系，你顶多会觉得这么做影响了风气，确实败坏了风气，所以我本身不提倡。但是人是自私的，有这样的想法和做法只要不影响公众的话，应该还可以接受吧？

这里说的“作弊”我更偏重理解为“变通”了，无所事事的人作弊肯定是坏事，但是有没考虑过上进心极强的人只是为了让自己更多时间和精力学习自己喜欢的学科而作弊，虽说也是坏事，但是不是情有可原的么？

作弊不是好事，但是该不该鄙视某个人的作弊，应该从人家的初衷考虑吧？

最后总结一个：如果你作弊了，审查自己，是不是一个有抱负和比较积极的人，如果是，那你的作弊并没有影响别人的时候，我觉得你不必愧疚。

以上言辞仅表达本人遐想，可能有点偏激，感谢你的观看，欢迎你的评论。

• 2008-10-12 -- 再次出发广交会，回来之后报告
• 2009-05-09 -- 可爱的飞机稿
• 2009-02-12 -- 今天发现以前画的一只可爱的小猪【图片】
• 2009-07-10 -- FLEA,生成图片验证码图片时总是叉叉,显示不了的问题？
• 2010-01-27 -- 回到最初

此主题只为高端浏览器制作，ie中只能看见超简化版。（双主题）

这次的主题直接用html5和css3写，也当是我自己学习的一个过渡品吧。html5和css3可以写出很漂亮的效果，但是也付出了ie系列浏览器不正常显示的代价。

这次的主题没有上次的功能多（因为js写得没上次多）,话说距上一自创主题发布已经差不多是一年前的时候了。

主题功能介绍：（注意仅限ff和chrome等浏览器有效果）

1. 首页全Ajax,文章列表和文章内容、图片均异步获取数据。
2. 页首公告栏是基于qq叨叨插件做出的修改，可以显示自己的qq签名，想改为自己的qq的叨叨的话修改js/dkapi.js文件的qq号码即可。
3. 搜索栏下方有一个“viewed”按钮，其实是显示当前浏览者最近在本站浏览的博文记录
4. 文章列表中的每篇文章前面有一个图片，这个图片是读取文章内容里面的图片来的，假如没有图片就会显示默认图片。
5. 为照顾ie系列浏览器追加双主题功能，在ie浏览器中将显示简洁的主题风格。

主题安装：

• 主题下载(包括wp源文件整站,因为对wp源文件有小改)：http://code.google.com/p/white-html5-new-theme-for-wp/downloads/list
• 主题演示：http://xiebiji.com （推荐Chrome浏览器）
• 主题名称:  White-Html5 Theme
• 适用版本：wordpress2.6+
• 适应浏览器：Firefox3,Chrome,Safari
• 开启的插件包括：Akismet、All in One SEO Pack、Audio player、失效链接检查器、Hot Friends、Theme Switcher Reloaded、WordPress Database Backup、Wordpress Thread Comment、WP-Syntax
• 发布时间：（2010.01.10）

安装须知：

要首页滚动链接出现你想出现的分类链接，请修改html5AndCss3/index.php下的

$args = array(
  'orderby'          => 'name',
  'order'            => 'ASC',
  'limit'            => -1,
  'category_name'    => '{首页链接}',//这里修改对应分类名字
  'echo'             => 1,
  'categorize'       => 0,
  'title_li'         => '',
  'title_before'     => '',
  'title_after'      => '',
  'category_orderby' => 'name',
  'category_order'   => 'ASC',
  'class'            => 'linkcat',
  'category_before'  => '<li>',
  'category_after'   => '</li>'
  );

版权声明：使用本皮肤请遵守共同创作公约，尊重作者版权，在本作品下衍生和分享需要你注明出处和作者链接.欢迎修改并完善本主题，记得修改好也分享^0^!

作者：Joe 邮箱地址：23456325@qq.com或者joe3401192@gmail.com

• 2008-12-20 -- 【自制】Wordpress 2.7 Fashion Blue Theme 1.0主题发布！分享！识别分辨率

不知道这次真的还是假的。
难道为了新年快乐？

ps.大家打开Google的英文版首页，点击“I’m Feeling Lucky”之后跟我我给大家的新年祝福是一样的。

• 2009-07-21 -- 实用，快速制作site map的网站
• 2009-06-04 -- 无意中发现google pr更新了，本博偷偷变成pr4了

现在郑重声明！！

圣诞快乐！！

终于我把兼职给辞掉了！！！

也就是说，到三月份我都处于颓废和失业状态，也代表着，这段时间我可能仅有的收入就是岁末的利是钱收入。想买个mac笔记本，估计这个理想暂时不能实现啦！╮(╯_╰)╭

说到过圣诞，圣诞节的时候地球还是会转的。我们这些单身人士平安夜很平安的，打开电脑、关上电脑就过了。

前阵子想给小站做一个新皮肤，设计做了切割也做了。

最后发现 STYLE OUT 鸟！！

于是没有做下去，这次重新设计了个稿子，郁闷某某同学看了直接说 丑!

o(╯□╰)o但是我自己感觉好就还是把他做完再说吧。

ps.HTML5和CSS3真强悍。

再ps.再次膜拜一下chrome浏览器，比“粗硬”的反义词（注：粗对微，硬对软）那家公司的那个浏览器强悍多了！

• 2009-02-10 -- 上当当买了一本书，关于AI的。
• 2009-08-29 -- 神奇简洁的拖动js代码
• 2009-04-11 -- 要写一写剩下的大三日子的计划了
• 2008-09-12 -- 推荐一个可以在BLOG显示自己目前位置的Widget
• 2009-09-27 -- yslow 2–评测网页效率的工具

经过我进一步调查，原来是我兼职所在的培训公司的客户（是学生来的）请吃饭。我是很少跟朋友出去吃自助餐的，所以对于我来说真的有点不习惯。

但是我跟同事很玩得来，因此颇欢乐的。

我顺便还用我那iphone拍了点模糊的照片，^_^!我那发型。。。。o(>﹏<)o

欢欢好漂亮啊

Windy好像很无奈

Vicky旁边的我就是有点拽

其实Susan是可以保护我的^_^

那位比较年长的就是老板啦

转眼间在AAE（我兼职那公司）已经半年啦，再做三天我就要离开啦，同事这么好，我实在有点不舍得。在这里学到的看到的这辈子我都记得。

最后希望公司一天比一天的好，同事们少受点气，每天快快乐乐，每天有人帮买外卖！

• 2008-09-02 -- 被囧了两年的问题！

HTML5、Css3相关

WEB Workers提升WEB前端脚本JavaScript的处理性能

30个CSS3新功能的实用教程

css3-animations用法（英）

前端开发

张克军：WebRebuild活动分享-LSM实践

lifesinger：也谈前端开发流程

Robin：HTTP Headers 入门

张克军：前端创新思考

朱涛：javascript必知必会之this关键字及scope

Ghost：页面重构中的语义化

realazy：JavaScript中的作用域

lifesinger：呼唤前端交互师

lifesinger：淘宝CSS框架研究（1）：Reset CSS（八卦篇）

Twinsen Liang：清理浮动的全家

cukai：Adobe前端开发——结构层概况

Aethert：土豆网前端概况

Fisio：CSS3悬停动画

网页设计

Andrew Houle：设计良好网页的4项原则

凉风：像懒人一样去设计

bluesnail：屏幕分辨率和布局简述

minijoe：（译）网页设计从零开始

小猪头：全局于网站整体的网页设计

bill：网易网站设计(思想)

熊猫：网站有效设计的10个原则

布林：视觉冲击力表现技法

Moond：科学与艺术兼顾的有效网页视觉设计

pitiaoxiao：天极产品设计流程

先发这么多先，特别鸣谢Adrian,^_^很多是从他那边偷来的。

• 2009-01-05 -- 最近考试少看代码，推荐几本书给学习做网页的同学吧^_^!
• 2009-07-13 -- 自编as3影片剪辑倒放类
• 2008-08-25 -- 今天回校，重新做人！
• 2009-03-24 -- 小型FAQ网站出炉~\(≧▽≦)/~啦啦啦
• 2008-09-13 -- 被点名了！汗！

http://rlog.cn/?p=521

• 2008-10-22 -- CSS笔记-除了a标签外的hover属性的应用
• 2008-08-13 -- 关于单一入口应用程序（网络笔记）

1，捕捉阶段，事件从对象沿着文档树向下传播给目标节点。2，目标节点触发阶段：在目标上的适合的事件处理程序将运行。3，气泡阶段，在这个阶段，事件将从目标元素向上传播或者气泡回对象的文档层次。

ie和ff下的事件传播阶段应该是一样的。但是两个浏览器依据的模型有区别。

先看firefox

由于firefox支持dom2的时间模型,用法可以直接这样：

function test(event){
    alert(event.clientX);
}
ele.addEventListener('click',test,true);//ele为某dom元素

关于这个模型（event可以理解为一个全局变量）

作用的对象类型DOMFocusIn,DOMFocusOut和DOMActivate

再来看看ie

ie不支持dom2事件模型，但是可以用window.event来获得event对象，用法可以这样:

ele.onclick=function(){
   alert(window.event.clientX);
}//ele为某dom元素

window.event包含的属性和方法：

• 2008-11-16 -- 兼容FF和IE的html传递参数给swf的方法
• 2009-09-28 -- 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
• 2009-07-27 -- 再发现一种css hack方法
• 2008-12-18 -- IE ajax 未知运行错误!解决方法！
• 2008-11-25 -- if IE html里面的条件控制语句

对于以下html代码:

<a id="aLink" onclick="alert('我是a元素的点击反应')" href="http://xiebiji.com">
    <span id="spanLink" title="http://qq.com">点击这里去QQ首页（span链接）</span>
    点击这里去啊JOE首页
</a>

问题：请问如何使span模拟a元素（不要问我问什么不直接用a元素，某种情况下必须这么做，而且这里也不能用a元素），当点击span里面的内容的时候跳转到span的title属性的链接而不是a标签的链接。

你可以先想一下解决方法，鄙人有以下方法：

方法1：(我认为最简单的方法)

document.getElementById('spanLink').onclick=function(e){
	e = window.event?window.event:e;//兼容ie和ff的event定义，ie不认dom2的事件模型
	if (e.stopPropagation) {//FF浏览器下，dom2事件模型中event存在该方法
		e.stopPropagation();//停止事件传播
		e.currentTarget.parentNode.href=e.currentTarget.getAttribute('title');
	} else {
		e.cancelBubble = true;//ie中的window.event冒泡传递过程中支持设置cancelBubble真假开启/停止冒泡传播
		e.srcElement.parentNode.href=e.srcElement.getAttribute('title');
	}
}

方法1原理：

原理很简单，就是在点击span的时候把span的title值赋给父级a元素的href,然后由a元素来抛出链接地址。

该过程可以表示为：
点击span–获得事件对象span元素–替换父级a元素href–a元素抛出链接

那跟事件传播有什么联系：

请尝试将第四行和第七行代码删除，变成如下

document.getElementById('spanLink').onclick=function(e){
	e = window.event?window.event:e;//兼容ie和ff的event定义，ie不认dom2的事件模型
	if (e.stopPropagation) {//FF浏览器下，dom2事件模型中event存在该方法
		e.currentTarget.parentNode.href=e.currentTarget.getAttribute('title');
	} else {
		e.srcElement.parentNode.href=e.srcElement.getAttribute('title');
	}
}

事件并没有被停止传播，当你再次点击”点击这里去QQ首页（span链接）“时，你会发现触发了注册在a元素上面的onclick事件，这其实是一个冒泡过程，冒泡的原理也很简单，就是里层元素事件触发时在没有停止事件传播的情况下会传播并触发父级元素同名事件。上述例子中span的onclick事件反应后马上就传递给a元素使a元素的onclick事件触发。关于ie和ff的event请看这里。

画了个冒泡原理图：

冒泡原理

好，知道这个之后其实这个问题还有一种解决方法：
方法2:

document.getElementById('spanLink').onclick=function(e){
	e = window.event?window.event:e;
	if (e.stopPropagation) {
		e.currentTarget.parentNode.onclick=function(){return false;};
		url=e.currentTarget.getAttribute('title');
	} else {
		e.srcElement.parentNode.onclick=function(){return false;};
		url=e.srcElement.getAttribute('title');
	}
	location.href=url;
}

为什么可以这样解决，有兴趣的童鞋可以想一下啦。有人要求我写原理我就再更新文章吧。
本文若有错误，诚恳接受指出。

最后放两个方法的demo
方法1：demo
方法2：demo

原创文章转载请注明出处：http://xiebiji.com/2009/12/jsevent/ 作者JOE

• 2010-01-31 -- 实际上js文件放最后是个好方案，但有更好的方案
• 2010-01-30 -- js中方法类的拟静态属性、公有属性、私有属性
• 2009-08-29 -- 神奇简洁的拖动js代码
• 2009-03-10 -- 推荐一个js表单验证类，很实用
• 2009-02-17 -- 各类电脑文档手册

淘宝江湖这种宣传手法我很喜欢，为啥？因为我本人可以不用钱就拿到免费公仔（免邮费哦），何乐而不为。不要问我怎么拿的，上这里看就知道了。

在芸芸的公仔中我选了上图中的那一个，这个公仔背后写着“旺学业”的，虽然现在我基本上不用旺学业了，但是这个公仔还有“用我们的青春奋斗”的意蕴。so,我选了这个。

感觉不错吧？其实我还想要别的，都很可爱。这里不介绍啦！

• 2008-09-19 -- css兼容问题：背景图片消失事件！
• 2008-09-22 -- 零基础学会建立一个简单化妆品网站—理论篇1[网站跟用户交互过程]
• 2009-07-27 -- 再发现一种css hack方法
• 2008-11-11 -- 1111光棍节无限快乐！
• 2008-08-10 -- flash与js 互相调用

今年的我依然没有找到女人，这个世界有点灰暗。

刚才吃饭的时候看见有个男同学买了一束花，估计今天晚上他要表白！！！不知道是早有预谋还是一时冲动的做法，不过怎样我葱白他！

同时他应该也很幸运，找到一个值得自己表白的女孩不容易啊。

至今。

小弟还没遇见这样的女孩。

好吧，把希望寄托给2010年吧~

• 2009-06-04 -- 无意中发现google pr更新了，本博偷偷变成pr4了
• 2009-12-01 -- js事件、事件处理研究，关键字：event、传播
• 2008-08-11 -- WP一个功能的实现：关于摘要跟分页的功能实现(2)
• 2008-08-24 -- 无意中看了一下Q群，发现一张很有意思的图片！我汗！
• 2010-02-01 -- js中自定义mouseenter、mouseleave的写法

YUI的网页优化建议里面有提到要保持图片比例为原比例，但是往往实际操作中有可能会要变换图片比例。而变换比例图片就会失真，如：

原比例：

原比例

放大后：

放大后

图片锯齿恐怖>_<!，解决方法可以给图片加上这个css属性

-ms-interpolation-mode: bicubic

加了-ms-interpolation-mode: bicubic之后

加了-ms-interpolation-mode: bicubic之后

这个属性在ie8之后的版本已经不需要了。可以说是ie7专用了，ie6该属性无效果。

• 2008-09-12 -- 这个模特无敌了！
• 2009-03-08 -- 寒假做的一个相对比较大的项目—一个model网
• 2009-01-13 -- 哇哈哈！考完试啦~上网买东西去！
• 2008-08-24 -- 无意中看了一下Q群，发现一张很有意思的图片！我汗！
• 2008-09-23 -- 零基础学会建立一个简单化妆品网站—理论篇2[网站建设的分工过程]