开发过程中将demo中的内容拆分进各子模块，发现之前好好的 hover 效果失效了，我排查的结果是因为在模块中没有定义doctype，页面默认使用 quirks mode，会导致非链接<a>标签的 hover 伪类在 IE7/8 和 firefox 均失去效果。
我们通常认为的非 IE6 以下浏览器都支持链接以外元素的 hover 伪类，其实还需要依赖 doctype，比如这样的代码就在 IE7/8 和 firefox 失去效果：
<html>
<head>
<style>
.hover-test:hover{color:#f00;}
</style>
</head>
<body>
<a class="hover-test" href="#">hover字体变红</a>
<p class="hover-test">hover字体变红,Quirks mode下失效</p>
</body>
</html>
从MSDN找到相关说法：
Internet Explorer 7 and later, in standards-compliant mode (strict
!DOCTYPE), can apply the :hover pseudo-class to any element, not merely
links.
而 Firefox 与 IE 也有区别，Firefox 下用标签名作为选择器可以使 hover 伪类恢复效用：
<html>
<head>
<style>
p.hover-test:hover{color:#f00;}
</style>
</head>
<body>
<a class="hover-test" href="#">hover字体变红</a>
<p class="hover-test">hover字体变红</p>
</body>
</html>
相关推荐：
html5 doctype与图片多余空白
doctype对盒子模型的影响
doctype, hover, quirks mode, 文档类型
背景
异步跨域请求时JSONP方式是最靠谱的选择，常规的，被请求页面应该返回诸如此类的数据格式：
handleName="xxx";doSomething();...;
需要时，我们还可以返回其他的JS语句，只要符合语法即可。
- – - – - – -分割线- – - – - – -
最近我做了一个任务，要把后台生成的HTML模板文件改造成JSONP的形式输出，供前端异步调用。
模板文件大致这样的格式：
<div class="xxx">
<h3>something</h3>
<div class="xxx">
she's
beautiful
</div>
</div>
制约条件：模板页面我不能动，因为它还需要被其他模板页面引用
分析
由于受到制约不能更改模板页面的内容，将其改造成JSONP形式很有难度，新建一个页面进行组织必不可少，我起初把步骤分为：
- 新建页面(php)
- 引入模板页面 @include
- 用单引号包含之
- 在其头部加上handleName = ，在其后加上分号结束
- 输出
php代码:
handleName = '<?php @include_once("filePath") ?>';
实际操作中遇到了麻烦，原因是模板内容都是换行的，最后组织好的内容成了这样：
handleName = '<div class="xxx">
<h3>something</h3>
<div class="xxx">
she's
beautiful
</div>
</div>';
- 赋值表达式换行在JS里是不合语法的！
- she’s的单引号更是扰乱了这个赋值表达式…
格式化来源文件势在必行！
…
file_get_contents, javascript, jsonp, PHP, readfile, 格式化
<embed>标签可用于在页面内嵌入 flash 文件，比较常见的就是在博客内嵌入视频，如嵌入世界杯主题曲：
<embed src="http://player.youku.com/player.php/sid/XMTU3NzUyMDUy/v.swf"
quality="high" width="480" height="400" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"></embed>
接到一个小需求：需要动态更新 embed 标签的 src 属性，拿上面的代码为例，很容易找到思路：
1.获取embed标签
2.setAttribute('src')
类似于对待 img 标签。
遗憾的是，此法对于 ie 浏览器并不奏效，给 src 加上时间戳也无济于事。
最后无奈用更新dom节点的方式才得以实现。
各浏览器在处理 embed 重载时并不尽相同，在此简单做了测试：Demo
测试结果：
Y：响应重载
N：不响应重载
| |
IE(6/7/8) |
Firefox |
Chrome |
Safari |
Opera |
| 重载(refresh movie) |
N |
Y |
N |
N |
Y |
| 更换(change movie) |
N |
Y |
N |
N |
Y |
| Display显示/隐藏 |
N |
Y |
Y |
Y |
Y |
| Visibility显示/隐藏 |
N |
N |
N |
N |
N |
| 设置innerHTML |
Y |
Y |
Y |
Y |
Y |
| Display hide > Change movie > Display show |
N |
Y |
Y |
Y |
Y |
embed, flash, reflow, reload, 兼容性, 标签重载, 测试, 浏览器
一、容易被忽略的局部变量
var a = 5;
(function(){
alert(a);
var a = a ++;
alert(a);
})()
alert(a);
思考这段代码的执行结果。
执行后，看看是否和你想象的一致？
ok，这段代码里核心的知识点是 var a = a++，其中两个变量 a 都是匿名函数内部的局部变量，是同一个，和全局变量 a 是不一样的。
为什么？我们来看看ECMA规范对变量声明语句的定义：
Description
If the variable statement occurs inside a FunctionDeclaration, the
variables are defined with function-local scope in that function, as
described in s10.1.3. Otherwise, they are defined with global scope
(that is, they are created as members of the global object, as described
in 10.1.3) using property attributes { DontDelete }. Variables are
created when the execution scope is entered. A Block does not define a new
execution scope. Only Program and FunctionDeclaration produce a new
scope. Variables are initialised to undefined when created. A variable with
an Initialiser is assigned the value of its AssignmentExpression when the
VariableStatement is executed, not when the variable is created.
声明中提到：进入作用域环境后，变量就会被创建，并赋予初始值undefined。在变量声明语句执行时才会把赋值表达式的值指派给该变量，而并不是在该变量被创建时。
因此上面的代码可以等价于…
ECMA, javascript, 全局, 变量, 局部, 特性
一、通配符选择器没有优先级
div{background:#f00}
*{background:#000}
前者优先级更高。
*.hello{color:#f00}
.hello{color:#000}
两者优先级一样，后来至上。
二、通配符选择器样式污染
#showEveryThing * {display:block}
将使 showEveryThing 内部所有元素显示为块元素，包括 <style> <script> <noscript>标签。这会破坏这些标签的本来面目，造成不必要的麻烦。
<style> <script> <head> 等元素本不可见，如果被强制加上样式，多多少少都会有问题，区别：
-
IE
不会输出内容，但可以控制边框。
-
非IE
基本可以当作普通元素对待，但不影响原有标签功能。如出现样式被修改情况，可以反方向重置。
因此，建议大家在使用通配符选择器时特别需要注意上下文环境，确认不会造成标签样式污染之后再使用
block, script, selector, style, universal, 优先级, 选择器, 通配符
问题及背景
今天项目组的开发同学急冲冲地叫上我看一个他写的JS脚本，好端端的一个form提交时参数无法正常传递。代码是这样的
<form method="get" name="xxx" id="xxx" action="uri?xxx=xxx&yyy=yyy" >
<input name="zzz" type="text" value="zzz" />
<input id="submit" type="button" value="提交" />
</form>
<script>
document.getElementById('submit').onclick = function(){
var form = document.xxx;
form.action = form.action +
(form.action.indexOf('?') > -1 ? '&' : '?') + form.zzz.value;
form.submit();
}
</script>
其本意是在提交是要同时提交xxx、yyy、zzz三个参数，但最终提交的参数只有zzz，即uri只是 uri?zzz=zzz。
分析
这是为什么呢？脚本没有问题呀，感觉方法也没什么问题，在调试了多次无果之后，我把注意点移到了form本身：在禁用了脚本之后，form同样只提交了zzz参数。
最后，终于知道原因是form使用了get方法。
HTML 4.01 specification 的解释
If the method is "get" - -, the user agent takes the value of action,
appends a ? to it, then appends the form data set,
encoded using the application/x-www-form-urlencoded content type.
The user agent then traverses the link to this URI. In this scenario,
form data are restricted to ASCII codes.
get方式是method的默认值，其方式是将form表单中的数据集值对组织到action中的uri之后，不过其组织方式是有讲究的：
- uri在submit最后才进行组织
- 在添加’?'时，uri中额外参数会被舍弃，接着只拼接表单内的域值
- uri hash值会被保留:uri?xxx=xxx#here，#here会被保留
form, get, post, uri
这么具有非洲特色的MV能否让你紧张了一天的心情放松下来呢? 朋友，来杯啤酒，一起欢畅！
歌词大意：
给我自由，给我激情，给我个理由，让我飞得更高
向着冠军，现在就上场吧，你让我明确，让我们自豪
在街道上，当我们失去了束缚
在我们身边庆祝吧，每个国家，在我们身边
歌唱永远的年轻，在太阳下歌唱
让我们在这美丽的运动中欢庆吧
相聚在这天的到结束
我们一起说
当我长大，我会变得更强
他们让我们自由，就像那旗帜飘扬
一切都回归
…
附：旗帜飘扬完整版
世界杯, 主题曲, 南非, 旗帜飘扬
昨日收到老婆大人送的生日礼物，感动到泪牛满面！扎库米是我一直想要的世界杯吉祥物，模样真太帅呆了！于是拍照炫耀！
PS：晚上光线不是很好，毕竟是纯炫耀贴，请大家无视我的拍照技巧=.=!
以扎库米的名义，期待世界杯早日到来！
附：南非世界杯对阵&比分统计表
zakumi, 世界杯, 南非, 扎库米, 生日礼物
前日对iframe的几种文档对象获取方式做了测试，发现一些有趣现象，与大家分享！
假设在页面嵌入如下iframe:
<iframe id="testFrame" name="testFrame" src="#" frameborder="0" border="0" scrolling="no" style="display:none"></iframe>
众所周知，iframe是内嵌窗口，我们可以通过多种方式获取iframe对象及其window\document对象（同域前提），不过哪些是哪些有时会搞不清，测试目的也是为了加深记忆。
比较常见的方法有以下几种，分别测试：
- A:document.getElementById(‘testFrame’)
- B:window.frames['testFrame'];
- C:document.getElementById(‘testFrame’).contentWindow
测试结果(非IE浏览器及IE8)
从测试结果及其比对结果可以看出，A得到的是iframe这个html标签对象，B和C得到的是iframe浏览器对象(window)，有意思的是IE7及以下版本浏览器认为这两者是不恒等的
…
document, dom, iframe, window, 兼容
Javascript开发中，需要与0,undefined,null,false进行等同比较时，我们知道，用’===’(恒等)比较靠谱，我是在第一次使用jslint时知道这点的，例如在Jslint中验证
var test = '';
alert(test==0);
会得到提示：
Use '===' to compare with '0'
看看ECMA规范中是如何对==和===操作符进行定义的，了解其深层的规则以及jslint提示的缘由
首先介绍==
11.9.1 等同运算符( == )
运算符规则如下所示：
1. 计算运算符左侧表达式;
2. 对第1步的结果调用GetValue;
3. 计算运算符右侧表达式;
4. 对第1步的结果调用GetValue;
5. 对第4步的结果与第2步结果执行比对（参考 11.9.3）;
6. 返回第5步结果;
再来详细了解比对过程(11.9.3)
11.9.3 抽象的等同比对算法…
ECMA, equals, identical, javascirpt, strict, 恒等, 操作符, 等同, 规范
