IE6/7/8/9中使用innerHTML清空元素，其子元素也被清空
摘要：
如下代码<!DOCTYPE HTML><html> <head> <meta charset="gbk" /> <title>IE6/7/8中innerHTML "Bug"</title> </head> <body> <div id="d"> <div id="d2">d2 text</div> </div> <script> var d2 = documen 阅读全文
Snandy
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
写了10年Javascript未必全了解的连续赋值运算
摘要：
很喜欢 蔡蔡 的这个标题，实际蔡蔡已经分析过了，这里借用了。或许有点标题党的意思。看完就知了。一、引子var a = {n:1};a.x = a = {n:2};alert(a.x); // --> undefined这是蔡蔡在看 jQuery源码 时发现这种写法的。以上第二句 a.x = a = {n:2} 是一个连续赋值表达式。这个连续赋值表达式在引擎内部究竟发生了什么？是如何解释的？二、猜想猜想1：从左到右赋值，a.x 先赋值为{n:2}，但随后 a 赋值为 {n:2}，即 a 被重写了，值为 {n:2}，新的 a 没有 x属性，因此为undefined。步骤如下1, a.x = 阅读全文
Firefox中autocomplete="off" 设置不起作用Bug
摘要：
在实现补全提示功能时(Suggest)，都会给输入框(Input)元素添加autocomplete属性，且值设为off。自动补全也成自动完成，最经典的如google的搜索框，输入一个字母后会给用户很多提示选择查看源码会发现input输入框加上了autocomplete="off"，此为了屏蔽浏览器表... 阅读全文
给事件响应函数传参数的多种方式
摘要：
如何给事件handler传参数？在刚刚接触Javascript的时候，由于对闭包理解不深刻，常常纠结于该问题。在讨论群里也经常碰到这样的问题，如下<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>如何给事件handler传参数？</title></head><body> <a href="#" id="aa">Click me</a> <scri 阅读全文
IE6/7 and IE8/9(怪异模式)中form元素默认样式导致的bug
摘要：
做邮箱首页时碰到的，如下<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>IE6/7下form元素默认样式导致的bug</title></head><body style="padding:0 400px;"> <div style="height:20px;border:1px solid gray;"></div><div style=" 阅读全文
各浏览器对document.getElementById等方法的实现差异
摘要：
所有Web前端同仁对 document.getElementById 都非常熟悉了。开发过程中经常需要用其获取页面id为xx的元素，自从元老级JS库Prototype流行后，都喜欢这么简写它// 方式1function $(id){ return document.getElementById(id); }有没有人想过为什么要这么写，而不用下面的方式写呢？// 方式2var $ = document.getElementById;这么写的$更简洁啊，也很明了，将document的方法getElementById赋值给变量$，用$去获取页面id为xx的元素。实际上方式2在IE6/7/8中是可行的 阅读全文
JavaScript子类用Object.getPrototypeOf去调用父类方法
摘要：
每个function有个prototype属性，称为原型。每个对象也有个原型，Firefox/Safari/Chrome/Opera 中可以通过__proto__来访问，IE6/7/8中没有提供相关接口。function Person(){ this.method1 = function(){}}Person.prototype.method2 = function(){}function Man(){}Man.prototype = new Person();Man.prototype.m1 = function(){}Man.prototype.m2 = function(){}var m 阅读全文
使用隐藏的new来创建对象
摘要：
jQuery中发现的，jQuery.Event类。估计作者是为了减少代码量。定义一个类，但不用new关键字去创建该类对象，而使用方法调用()方式去创建该对象。很多时候我们是这样写类，然后使用new创建对象的。function Person(name,age){ this.name=name; this.age=age;}Person.prototype={ setName : function(n){this.name=n;}, getName : function(){return this.name;}}var p = new Person('jack',25);改... 阅读全文
谁调我:arguments.callee.caller
摘要：
某知名互联网公司的一道JS笔试题：有函数a，b，c，c可能是在a或b内调用的，怎么知道？马上就想到了arguments.callee.caller，实际上有许多值得商榷的地方。如function a(){ c(); //()调用 //c.apply(null);//apply调用 //c.call... 阅读全文
解决IE低版本不支持call和apply问题
摘要：
Function.prototype的apply和call是在1999年发布的ECMA262 Edition3中才加入的（1998年发布ECMA262 Edition2）。在此前的的浏览器如IE5.01(JScript 5.0)中是没有apply和call的。因此会带来一些兼容性问题，以下是修复方式：if(!Function.prototype.apply){ Function.prototype.apply = function(obj, args){ obj = obj == undefined ? window : Object(obj);//obj可以是js基本类型 var i = 0 阅读全文
解决Firefox下outerHTML不支持问题
摘要：
代码很简单，如下：var pro = window.HTMLElement.prototype;pro.__defineGetter__("outerHTML", function(){ var str = "<" + this.tagName; var a = this.attributes; for(var i = 0, len = a.length; i < len; i++){ if(a[i].specified){ str += " " + a[i].name + '="' + a[i] 阅读全文
各浏览器对apply第二个参数的实现差异
摘要：
每个函数都有个apply方法，该方法有两个作用：改变函数的执行上下文（第一个参数非null，undefined）执行/调用该函数apply方法第二个参数一般认为被实现为数组，见经典的《javascript权威指南-第五版》中章节8.6.4，145页:"apply()方法和call()方法相似，只不过... 阅读全文
各浏览器中option元素的表现差异
摘要：
1、IE6/7/8/9中无事件(如click,mouseover)，Firefox/Safari/Chrome/Opera则有示例：2、点击option，通过srcElement获取事件源目标在IE中是select，Firefox/Safari/Chrome/Opera则是option 示例：3、IE6下给option元素添加title属性实现tips功能无效示例：4、IE6中option无法完全显示当我们给select指定宽度，但option的内容有时比较多，这时其它浏览器的option会根据内容自适应宽度，以让option内容能完整显示。但IE6则不行，option内容显示不完全。如下代码 阅读全文
JavaScript声明全局变量三种方式的异同
摘要：
变量及变量声明是一门语言最基本的概念，初学者都会很快掌握。JavaScript中声明变量也是如此，很简单var（关键字）+变量名(标识符)。方式1var test;var test = 5;需注意的是该句不能包含在function内，否则是局部变量。这是第一种方式声明全局变量。方式2test = 5... 阅读全文
JavaScript中两种类型的全局对象/函数
摘要：
这里所说的JavaScript指浏览器环境中的包括宿主环境在内的。第一种是ECMAScript Global Object，第二种是宿主环境(Host)下的全局对象/函数。一、核心JavaScript内置对象，即ECMAScript实现提供的不依赖于宿主环境的对象这些对象在程序执行之前就已经（实例化）存在了。ECMAScript称为The Global Object，分为以下几种1， 值属性的全局对象(Value Properties of the Global Object)。有NaN，Infinity，undefined。2， 函数属性的全局对象(Function Properties o 阅读全文
各浏览器对typeof运算符的实现差异
摘要：
1，IE6/7/8中typeof运算符对BOM对象如window，document，location，history等对象的方法返回“object”，标准浏览器都返回“function”。alert(typeof window.alert); // objectalert(typeof document.write); // objectalert(typeof document.getElementById); // objectalert(typeof document.getElementsByTagName); // objectalert(typeof location.reload 阅读全文
JavaScript中的隐式类型转换
摘要：
如果把通过函数或方法调用，明确的将某种类型转换成另一种类型称为显示转换 ，相反则称为隐式类型转换 。google和维基百科中没有找到“显示类型转换”，“隐式类型转换”的字眼。暂且这么称呼。一、 运算中存在的隐式类型转换 1， “+”运算符var a = 11, b = '22';var c = a + b;这里引擎将会先把a变成字符串"11"再与b进行连接，变成了"1122"。有人会有疑问，为什么不把b变成数字22再进行算术加运算呢，这样的话c就是33了。没有为什么，当运算符“+”两边一个是数字类型，一个是字符串类型时，js引擎规定进行字 阅读全文
JavaScript函数参数的可修改性
摘要：
一道笔试题思考而来的，通常情况下没人会在函数内部修改参数值。这里仅拿出来讨论，有三种方式可以修改。1，直接修改函数声明时的形参function f1(a) { alert(a); a = 1;//修改形参a alert(1 === a); alert(1 === arguments[0]);}f1(10);函数f1定义了参数a，调用时传参数10，先弹出10，修改a为1，弹出两次true，a和arguments[0]都为1了。2，通过函数内部的arguments对象修改function f2(a) { alert(a); arguments[0] = 1;//修改arguments alert( 阅读全文
仅Chrome中函数实参与形参发生关联
摘要：
Chrome中也有不少 Bug ，但更新修复速度极快。下面又发现一个有趣的现象函数实参与形参发生了关联。function func(x,y){ //alert(x); arguments[1] = 5; alert(y); // --> 5} func(3);IE6/7/8/9，Firefox，Safari， Opera中 y 弹出为undefined，Chrome 则为5。函数func定义了形参x,y；调用时实参为3。func内部修改了实参arguments[1]，非Chrome浏览器中形参y不会与arguments[1]关联，即为undefined。Chrome则相反，修改argum 阅读全文
神奇的css属性pointer-events
摘要：
绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下CSS:pointer-events SinaMail SinaMail 开启穿透点击 默认情况下，链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应，即无法触发链接a的默认行为，无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏... 阅读全文
eval与window.eval的差别
摘要：
它们之间有区别吗？开发过程中似乎很少有人去加个额外的window，觉得多此一举。比如Ajax过程中回调函数解析JSON格式字符串...function callback(str){ var json = eval('(' + str + ')');}...通常直接使用eval，而非var json = window.eval('(' + str + ')');又比如调试时使用alert，很少有人使用window.alert；IE中获取事件对象使用event，很少有人使用window.event。（Firefox中在某些情况下也支持 阅读全文
iframe的onload在Chrome/Opera中执行两次Bug
摘要：
创建iframe对象，添加load事件， 再将iframe添加到body中。Chrome/Opera中会造成load事件的handler执行两次。<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>iframe的onload在Chrome/Opera中执行两次</title></head> <body> <script> var ifr = document.createElement('ifr 阅读全文
document.write/writeln非IE/Opera浏览器中可能会造成元素获取不到
摘要：
document.write/writeln在几年前的代码中见的比较多，多数情况下各浏览器表现一致。<!DOCTYPE html><html><head></head><body> <script> document.write('<div id="wraper"></div>'); var obj = document.getElementById('wraper'); alert(obj); </script></body&g 阅读全文
IE6/7 double padding-bottom Bug
摘要：
如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE6/7 double padding-bottom Bug</title></head> <body><div style="border:1px solid red;width:300px;padding:15px 0;"> <div style="float:left;border:1px solid g 阅读全文
IE6 double margin-left Bug
摘要：
在IE6下（标准模式/怪异模式），如果一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:15px)。那么会自动的加一倍变成30px。如下<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>IE6双空白边Bug</title></head> <body><div style="border:1px solid red;width:200px;"> & 阅读全文