【转载】URL中“#”号的作用
去年9月，twitter改版。 一个显著变化，就是URL加入了”#!”符号。比如，改版前的用户主页网址为http://twitter.com/username；改版后，就变成了http://twitter.com/#!/username。这是主流网站第一次将”#”大规模用于重要URL中。这表明#号（Hash）的作用正在被重新认识。本文根据HttpWatch的文章，整理与#号有关的所有重要知识点。 一、#的涵义 #代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。 为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name=”print”></a>，二是使用id属性，比如<div id=”print”>。 二、HTTP请求不包括# #是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。 比如，访问下面的网址，http://www.example.com/index.html#print。浏览器实际发出的请求是这样的： GET /index.html HTTP/1.1 Host: www.example.com 可以看到，只是请求index.html，根本没有”#print”的部分。 三、#后的字符 在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。 比如，下面URL的原意是指定一个颜色值：http://www.example.com/?color=#fff 但是，浏览器实际发出的请求是： GET /?color= HTTP/1.1 Host: www.example.com 可以看到，”#fff”被省略了。只有将#转码为%23，浏览器才会将其作为实义字符处理。也就是说，上面的网址应该被写成：http://example.com/?color=%23fff 四、改变#不触发网页重载 单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。比如，从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，浏览器不会重新向服务器请求index.html。 五、改变#会改变浏览器的访问历史 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。 值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。 六、window.location.hash读取#值 window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。 七、onhashchange事件 这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari … Continue reading
一个JavaScript误区
今天在写代码的时候，写了下面一段代码 (用了jQuery)。 这里假设AJAX请求是异步的， var t = {}; $.get(‘http://127.0.0.1′,{},function(){ t.name = ‘abc’; }) var name = t.name; alert(name); 如果对AJAX没有一个大概了解的话，很多人想当然的会说结果是’abc’，但实际上确实错误的。 不对的原因就是“异步”，浏览器遇到get方法时，就发送了一个get请求，然后继续执行那么的代码，即alert(name)。当发送的get请求有响应，且是一个正常的响应，再执行t.name=’abc’。
jQuery文档上摘录的一段话
说的挺有道理的 As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.
JavaScript对象使用知识点（一）
在JavaScript中，都说一切皆对象，其实这这句话里面有点小错误，应该说除了null和undefined外，一切皆对象。 alert(false.toString()); //false 那么对于数字呢？假如说是 alert(1.toString()) //不幸的是，这样写会报错。 那岂不是与上面说的有矛盾，乍看，确实有矛盾，但事实上却不是，碰到这种情况，可以使用以下3中中的任何一种： 1..toString() 1 .toString() //点号前加空格 (1).toString() 对于对象属性的访问，有2种格式： var o = {name:’ql’}; alert(o.name); alert(o.['name']) //这种方式可以动态访问，如 var y=’name’;alert(o.[y]); 对象属性的删除，使用delete，而不是将属性值设置为null或undefined，如 delete o.name。
矮穷挫IT男的悲催一生
25岁毕业，拿一万块钱月薪 30岁，涨到一万五，期间无女盆友，吃10块钱盖饭，跟同学合租，挤2块钱地铁上下班，存钱25万 31岁，啃老找父母要了35万块钱，买了50平米老房子一处，贷款90万，20年，月供6500。 35岁0个月，认识一4分黑木耳，接盘玩腻的黑木耳结婚。 35岁6个月，生了小孩，小孩眉宇间有高富帅的痕迹 36岁，工资涨到2万，黑木耳要买驴牌，便宜儿子要喝进口奶粉，压力很大 37岁，黑木耳说，人家的儿子都读花家地，读史家胡同，你也要给咱高富帅的儿子搞个学区房，你这个死没用的东西 38岁，再次啃老，七大姑八大姨全家动员，卖掉老房再购买中关村二小学区房一个，债务 200万(假设楼市稳定) 42岁，孩子上学，在学校老师门口跪了一晚后，缴纳20w择校费后将孩子编入差班。早上回家给黑木耳和高富帅的孩子做好早餐，黑木耳起来就骂没用，罚起半年不许同房 44岁，经济危机，公司裁员，N+2将其裁掉。与此同时，高富帅的公司成功上市。满是爱的高富帅对黑木耳表示，愿意对孩子负责任，黑木耳内流满面，连夜抱着孩子奔向高富帅 45岁，技术更新换代太快，他找不到工作，贷款断供，房子被收走，在蓟门桥底下搭了一个窝棚，每天到母校的泔水桶里找点新鲜吃的 46岁，父母发现真相，不能接受打击，双双去世。高富帅侧面了解到情况，悄悄出钱火花安葬了他父母。高富帅说，好歹也是睡过一个黑木耳的，也算是缘分 47岁，西土城公园内被gay流浪汉爆菊花，他居然感觉有些high，他感觉很羞耻。而后与他们建立起长期友好的合作关系，还主动帮他们带去北邮泔水 48岁，与他同时毕业了去了农行总行，国务院办公厅，建行软开等体制内单位的大稳拿领导们在北京饭店开同学会，吃山珍海味喝茅台飞天，酒足饭饱之后，言语中谈到了当年编程很好，poj连刷300题的大牛XXX，不知道他们去哪了。大家纷纷表示不知道，或许是出国了吧，然后又纵情于声色犬马中 49岁，他突然发现遛鸟很好玩，于是经常在西门外的天桥上遛鸟，吓唬北邮小学妹。北邮小学妹轻蔑的盯了他胯下一眼，说这么小还好意思来炫，但他依然觉得很high 50岁，他发现自己身体免疫力越来越差。他隐隐约约记得自己高中学过的HIV病毒。不过他很淡然，一只蛆虫用在乎自己生什么病吗？ 51岁的一天，在路边看到自己养了若干年的高富帅的儿子搂着北邮的漂亮的小学妹正要坐进豪车里，他感觉自己大期将至，摇摇晃晃的朝高富帅的儿子走去。北邮漂亮小学妹说，欧巴，就是这个死gay变态遛鸟的，吓死人了啦！高富帅的儿子听着就火大，充满正义感的上去就一脚，然后把鞋扔了，光脚回到车上，北邮漂亮小学妹说，欧巴，你好有正义感哦，帅呆了，走我们快去啪啪啪了啦 他躺在地上，看着豪车远去的背影，缓缓的闭上了眼睛，这充满故事的一生，如同电影胶片 一般在他脑海里回放。这一切，都从他在某体制外的offer上签下名字开始 而那一边，一个25岁的研究生少年，正拿着高薪互联网的offer，意气风发的走出学校，怀 着对未来生活的向往，走向了中关村/西二旗/上地/五道口的某栋大楼。。
DIV+CSS常见问题（一）
1、正确地使用position属性 position的英文原意是指位置、职位、状态，也有安置的意思。在CSS布局中，position发挥着非常重要的作用，很多容器的定位是用position来完成的。position属性有4个可选值，它们分别是：static、absolute、fixed、relative。 (1) position:static 无定位，该属性传值是所有元素定位的默认情况。在一般情况下，我们不需要特别地去声明它，但有时候遇到继承的情况时，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。 (2) position:absolute 绝对定位使用position:absolute，能够很准确地将元素移到到你想要的位置。将nav移动到页面的右上角，我们可以这样写： nav{position:absolute;top:0;right:0;width:200px;} 使用绝对定位的nav层，前面的或者后面的层会认为这个层不存在，也就是在Z方向上，它是相对独立出来的，丝毫不影响其他Z方向的层。所以position:absolute用于将一个元素放到固定的位置，很好用。但是如果需要层相对于附近的层来确定位置就无能为力了，只能用下面讨论到的相对定位了。这里个IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。 (3) position:fixed 相对于窗口的固定定位，元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如Web浏览器中，元素在文档滚动时不会在浏览器视窗中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现在第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大多数效果不是通过CSS来实现，而是应用了JS脚本。请特别注意，IE6不支持CSS中的position:fixed属性。 (4) position:relative 相对定位，所谓相对定位是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里。用top bottom left right4个数值配合，来明确元素的位置。如果要让nav层下移20px，左移40px，我们可以这样写： #nav{position:relative;top:50px;left:50px;} 不规则文字排版 在网页设计中，会遇到许多意想不到的情况，不规则文字的排版就是其中之一。遇到这种问题，通常情况下我们有两种选择： (a) 用图片来制作，并应用热区制作链接。用这种方式可以很方便地解决问题，但对搜索引擎很不友好，不易被搜索引擎发现。 (b) 用Flash来完成，还可以加上动感的特效。这种方式除了同样对搜索引擎不友好之外，还存在着用户是不是安装有Flash播放插件的风险，以及浏览器对Flash文件的屏蔽的问题。 我们可以考虑用Div+CSS来完成它。主要的思路就是用不同的容器，对容器进行定位来实现。虽然这样做非常烦杂，而且不利于后期的更新维护，但可以收到很大的效果：显示速度快，更有语义，适合多种上网设备，有利于对搜索引擎更加友好等。 … Continue reading
WordPress模板常用PHP函数命令
WordPress调用页面的顺序 WordPress页面被调用时，WordPress的“引擎”会判断（通过排除法）页面的类型。 这类似于询问“我在哪儿？”。 WordPress回答“我在…类型的页面上”，然后以特定顺序调用页面。 WordPress找不到需要的PHP文件时，会使用“index.php”文件来代替所需文件。 WordPress基本模板文件 index.php 最基本、必不可少的文件，显示任何内容 style.css 样式表 single.php 显示单篇日志 page.php 显示页面 category.php 显示分类 archive.php 显示某一条件下的归档 search.php 显示搜索页 searchform.php 显示搜索表单，与search.php不同的是不会用来直接处理用户的请求，而是在网页内被调用来显示表单元素 404.php 显示错误页 comments.php 显示留言/回复 sidebar.php 显示侧边栏 header.php 页眉 footer.php 页脚 基本条件判断 is_home() : 是否为主页 is_single() : 是否为内容页(Post) is_page() … Continue reading
记一次php strpos函数的使用
今天在项目中尝试优化一个PHP函数，这个函数大量使用str_replace($search,$replace,$subject)，粗略统计下，大概执行一次这个函数需要运行8000多次且$subjet非常大。 一开始想到的方法是尽量减少str_replace的次数，所以就在str_replace之前使用了strpos函数先判断下，即满足了strpos才执行str_replace，代码描述大概是这样的： if(strpos(‘abcd’,'ab’)!==false){//说明在strpos中没有使用$subject str_replace($search,$replace,$subject); } 在这种代码下，大概strpos做了8000多次，str_replace运行了几次，没想到测试结果居然比原来慢了将近3倍（因为一开始我以为：使用strpos避免了在大文本中查找，str_replace次数又减到最小，理因比原来快）。 后来，我放弃了使用strpos，而改用数组的方式（因为上面的），即代码变成这样： $arr[]=”something’; //把需要的元素通过一定方法放入数组中 if(isset($arr['ab'])){ str_replace($search,$replace,$subject); } 测试结果居然比原来的快了3倍。经过仔细观察，大量的使用strpos确实存在效率问题。 还有一点发现，如果在一个比较大的数组循环中，类似循环1000次或更多，先把数组元素赋给临时变量，通过临时临时变量来操作的话，要比直接引用数组元素，效率要高很多，尤其是在多维数组中。 这篇博文，感觉有点没有表述清楚，要表达的观点就二个： 一、大量的使用strpos，效率不怎么高 二、数组操作中，循环次数多的话，尽可能把数组中要操作的元素先赋值给一个临时变量，然后通过临时变量来操作，这比直接引用数组元素效率要高很多（要仔细了解的话，就必须要看php源码了），尤其是在多维数组中。
CSS浏览器兼容技巧大全
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 尽管DIV+CSS具有一定的优势，不过现阶段DIV+CSS网站建设存在的问题也比较明显，主要表现在： 第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。 第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但DIV+CSS设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。DIV+CSS还有待于各个浏览器厂商的进一步支持。 第四，DIV+CSS对搜索引擎优化与否取决于网页设计的专业水平而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。 其中DIV+CSS中浏览器的兼容问题是有些设计师最头痛的事情，例如：Mozilla Firefox设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width。在排版时要注意就是哪些是哪个浏览器所专用的哪些在其他浏览器中不会出现效果，这样版面就会在各个浏览器中显示正常了。例如：所有浏览器 通用height: 100px;IE6 专用 _height: 100px;前者的使用的话在IE6 FF浏览器中测试内容多了就不会向下撑，内容就会给隐藏掉。后者在IE6里测试，在内容多的情况下它还是会显示出来，在IE其他的浏览器中测试也会显示内容。但是在FF中就会隐藏。 DIV+CSS样式IE与Firefox常见兼容问题： 1、DOCTYPE … Continue reading