如果我们把元素的类名操作比作“切水果”游戏的话,其中一个单独的类名就好比“水果”或“炸弹”!
DOM Level 2时代,类名的获取与设置,多半使用className属性,className的生效近似切水果的“一刀切”。在web的初期,交互什么的其实很简单的来;就像切水果刚开始的时候,一次就一个水果飞上来,一刀“咔嚓”切了就好,就像使用className赋个类名值,就算偶尔冒出2个水果,className也可以一刀切搞定的。
但是,随着web的发展,交互的逐渐复杂……
“JS相关”目录存档
HTML5 DOM元素类名相关操作API classList简介
2013年07月15日,星期一ajax与HTML5 history pushState/replaceState实例
2013年06月19日,星期三众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候,往浏览器history
中塞入一个地址(使用pushState
)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。
本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。
Chrome下语音识别实现页面快速引导以及重要交互
2013年05月22日,星期三今天,我们上线了一个小东西,基于Chrome浏览器语音识别功能实现的一个快速页面交互以及页面间跳转的效果,觉得大家都可以尝试尝试,因此,整理了下分享出来。
抛砖引玉、集思广益,有意见或建议什么的欢迎提出来,大家多多交流,共同进步。
小tip: DOM appendHTML实现及insertAdjacentHTML
2013年05月10日,星期五本文重点不在appendHTML
方法实现的本身,而是相关的一些DOM节点处理的熟悉,例如文档片段,子节点们,节点的后插以及前插等等……有代码有demo有截图,如果您是JS新手,本文的内容应该能对您的学习提供一些帮助。
我是如何理解”Another JavaScript quiz”中的题目
2013年05月7日,星期二
时光冉冉,或多或少见过一些JavaScript相关的题目,其中很多属于变态级别的!各种奇怪符号写法拼在一起、尼玛还有兼容性问题,估计达格拉斯都不知道答案。
对于这种整得亲妈都不认识的变态问题,实际上是没有什么参考价值的。好比要考察外星人对人类的了解,结果你那下面这货来做测试,看到亲戚的外星人一定会云里雾里的,但有意义吗?
好的JavaScript测试题目应该是:门外汉见了皱眉,行家见了疑惑题目是不是简单了点,同时考察点覆盖全面。
这里要介绍的”Another JavaScript quiz“中的题目(by非热火队的詹姆斯)不是属于变态题目,而是介于变态与不变态之间,因此,实际上面试价值不及格,但是学习价值good,故拿来说说……
ES5中新增的Array方法详细说明
2013年04月25日,星期四ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for
循环了。
ES5中新增了写数组方法,如下:forEach
, map
, filte
r, some
, every
, indexOf
, lastIndexOf
, reduce
, reduceRight
……
JS滚轮事件(mousewheel/DOMMouseScroll)了解
2013年04月17日,星期三本文内容如题,讲讲JS中滚轮事件的相关知识,这玩意,还是有点料的。尤其FireFox浏览器下独具一格的表现有不少槽点。还是那句撑篇幅的话,有详解的demo有完善的数据表格展示,有必要的demo以及源代码展示,总之,希望本文的内容能够对您的学习有所帮助。