2013年06月19日 by 张 鑫旭 阅读 333506 次, 今日 2 次
众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候,往浏览器history
中塞入一个地址(使用pushState
)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。
本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。
阅读全文…
标签: Ajax, history, HTML5, onpopstate, pjax, pushState, replaceState
发布在 JS实例 | 77 条评论 »
2013年06月9日 by 张 鑫旭 阅读 141485 次, 今日 2 次
一个名叫“阿贾克斯”的屌丝男在名为“客户端”的学校上学,为了追女神,下狠心,借了高利贷给女神买Mac. 结果,期限已到,要债的找上门,没办法,只能向身在“服务器端”的父母要钱。但是,要钱是要一定的过程和时间的。他必须想办法向要债的表明,钱正在过来的过程中,否则,可能要债的会认为你在忽悠,直接使大招——”Ctrl+W”,瞬间灭了你,眼不见心不烦。
如果告知钱正在过来的过程中呢?
有人可能如下处理,弄个转转转的小图片告诉要债的,看,我在原地不停地转……
阅读全文…
标签: animation, animation-fill-mode, progress, 加载, 动画效果, 提示, 渐进增强
发布在 CSS相关 | 14 条评论 »
2013年06月7日 by 张 鑫旭 阅读 209202 次, 今日 2 次
所有的form表单元素都有或多或少的伪元素可以重置其浏览器内置的UI样式,我光demo就有17个之多,截图30+之多,本文虽参考之作,自己条条亲自验证设置。虽目前价值并未凸显,但是,过段时间,可能就是宝了。
阅读全文…
标签: chrome, Firefox, HTML5, IE10, keygen, meter, placeholder, progress, range, Shadow DOM, webkit, 伪元素, 控件, 表单
发布在 CSS相关 | 32 条评论 »
2013年05月29日 by 张 鑫旭 阅读 111729 次, 今日 4 次

摘要,摘个鬼啊,本来只想来个短篇的,该死的越写越多,这个点了,还有鬼心情写摘要啊。总之,是处理IE10+浏览器非常不错的一篇文章,demo啊,截图啊,源代码显然很多的啦。还有大量关于伪类伪元素的小技巧小知识等……就这样,我先撤了~~~
阅读全文…
标签: ::before, :empty, :optional, :valid, animation, box-shadow, css3, CSS伪类, hack, IE10, rotate, transform, 伪元素, 兄弟选择器, 渐变背景
发布在 CSS相关 | 15 条评论 »
2013年05月23日 by 张 鑫旭 阅读 157535 次, 今日 5 次

缓存是什么?顾名思意,就是缓慢的存钱。为什么要缓慢的存钱,因为工资卡都上交老婆了,为了攒点零花钱又不能被老婆发现,只能慢慢存了。那缓存有什么用呢?你想啊,自己有点小钱,做事情就方便快捷了,比方说我想买个鱼竿,就不要去向老婆要(给不给先不谈),自己从自己这边取,大大提高了执行的速度。
那什么时候可以存什么时候不能存呢?老婆给零花钱的时候,可能会有过期时间头,例如,周一甩了100块钱,拿去,这是一周的伙食!这个一周就是过期时间头(Expires Header),在这个时间内,你的前可以从缓存,也就是自己这里取……
阅读全文…
标签: Apache, Cache-Control, ETag, Expires, IIS, Last-Modified, php, 服务器, 缓存
发布在 Web综合 | 13 条评论 »
2013年05月22日 by 张 鑫旭 阅读 54145 次, 今日 3 次
今天,我们上线了一个小东西,基于Chrome浏览器语音识别功能实现的一个快速页面交互以及页面间跳转的效果,觉得大家都可以尝试尝试,因此,整理了下分享出来。
抛砖引玉、集思广益,有意见或建议什么的欢迎提出来,大家多多交流,共同进步。
阅读全文…
标签: chrome, JSONP, webkit, 交互, 语言识别, 语音搜索, 锚点跳转
发布在 JS实例 | 4 条评论 »
2013年05月17日 by 张 鑫旭 阅读 83762 次, 今日 3 次
标题小tip打头嘛,说明内容不多。看标题主体嘛估计又是黑新浪的,介绍另外的实现,小东西,喜欢的人自然喜欢。文章前后都有些吐槽,看上去啪啪啪说得很利索,言辞犀利,一气呵成,实际上,是像便秘一样,一点一点挤出来的。文章嘛,又没时间限制的,可以修改斟酌啊什么的。但是对话面试什么的,容不得多想多斟酌,那怎么办呢?还能怎么办,认命,等死,平时多练练呗~~
阅读全文…
标签: oncontextmenu, opacity, visibility, 单击事件, 回流, 图片切换效果, 渲染, 绝对定位, 隐藏, 鼠标图形
发布在 JS实例 | 25 条评论 »
2013年05月14日 by 张 鑫旭 阅读 106243 次, 今日 9 次
这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值,会发现竟然有一个visibility.
此时,我的脑袋上立马冒出了3个大大的问号:visibility不就visibile/hidden/collapse等值,又不是数值什么的,怎么有动画效果呢??
一番查阅研究,发现,这玩意还是有些作料的……
阅读全文…
标签: opacity, transition, visibility, 延时, 显示, 淡入淡出, 隐藏
发布在 CSS相关 | 24 条评论 »
2013年05月10日 by 张 鑫旭 阅读 97227 次, 今日 3 次
本文重点不在appendHTML
方法实现的本身,而是相关的一些DOM节点处理的熟悉,例如文档片段,子节点们,节点的后插以及前插等等……有代码有demo有截图,如果您是JS新手,本文的内容应该能对您的学习提供一些帮助。
阅读全文…
标签: appendChild, appendHTML, cloneNode, createDocumentFragment, dom, firstChild, insertAdjacentHTML, insertBefore, prependHTML
发布在 JS实例 | 19 条评论 »
2013年05月7日 by 张 鑫旭 阅读 113704 次, 今日 3 次

时光冉冉,或多或少见过一些JavaScript相关的题目,其中很多属于变态级别的!各种奇怪符号写法拼在一起、尼玛还有兼容性问题,估计达格拉斯都不知道答案。
对于这种整得亲妈都不认识的变态问题,实际上是没有什么参考价值的。好比要考察外星人对人类的了解,结果你那下面这货来做测试,看到亲戚的外星人一定会云里雾里的,但有意义吗?
好的JavaScript测试题目应该是:门外汉见了皱眉,行家见了疑惑题目是不是简单了点,同时考察点覆盖全面。
这里要介绍的”Another JavaScript quiz“中的题目(by非热火队的詹姆斯)不是属于变态题目,而是介于变态与不变态之间,因此,实际上面试价值不及格,但是学习价值good,故拿来说说……
阅读全文…
标签: javascript, toString, 作用域, 对象, 数组, 标记语句, 正则表达式, 泛型, 类型转换, 逗号运算符, 面试题, 预解析
发布在 JS实例 | 28 条评论 »