摘要：如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>有name为action的表单元素时取form的属性action杯具了</title> </head> <body> <form name="mform" action="http://xxx"> <input type="radio" name="action"
阅读全文
摘要：如下<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>IE中getElementsByTagName无法获取元素BUG</title></head><body><input type="button" id="test" value="TEST"><script> var html= '<input type=&quo
阅读全文
摘要：querySelector和querySelectorAll是W3C提供的 新的查询接口module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSel...
阅读全文
摘要：如下var obj = { 2:"2", 40:"40", 15:"15"};for (var k in obj) { console.log(k); };IE6/7/8/Firefox/Safari:24015IE9/Chrome10/Opera11:21540即IE9/Chrome10/O...
阅读全文
摘要：这两个属性首先是IE4提出且实现的，它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置，插入指定的 HTML 片段。 其它浏览器相继支持。唯有Firefox不支持，甚至新发布的FF4。insertAdjacentHTML已被HTML5采纳。如下扩展HTMLElement.prototype，为其增加这两个属性。if(HTMLElement.prototype.insertAdjacentHTML == undefined) { HTMLElement.prototype.insertAdjacentElement = function(where, ...
阅读全文
摘要：先了解几个事件对象属性target: 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。currentTarget: 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/...
阅读全文
摘要：ime是Input Method Editor的简称。它是一种专门的应用程序， 用来输入代表东亚地区书面语言文字的不同字符。使用此种输入法，不需特殊的键盘（对应各种语言的键盘）即可输入东亚诸国（如中文、日文、韩文、俄文等）的各种文字。日本IME，是可以输入表音文字 (かな)与変换表意文字 (汉字) 的 一种输入法，而且它具有人工智慧，可以将一般较常使用的表意语句置于输入法的词库中。日本IME输入法 ，则依据该词库所建立之词汇来判断所输入的表音文字以変换为恰当的表意文字。由于日文中发音相同的表意文字相当多的关系，日本IME在使用之初的表意文字的変换判断不甚恰当的情况是会发生的。因此，该输入法提供
阅读全文
摘要：如下代码<!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
阅读全文
摘要：很喜欢 蔡蔡 的这个标题，实际蔡蔡已经分析过了，这里借用了。或许有点标题党的意思。看完就知了。一、引子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 =
阅读全文
摘要：在实现补全提示功能时(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
阅读全文
摘要：做邮箱首页时碰到的，如下<!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="
阅读全文
摘要：所有Web前端同仁对 document.getElementById 都非常熟悉了。开发过程中经常需要用其获取页面id为xx的元素，自从元老级JS库Prototype流行后，都喜欢这么简写它// 方式1function
(id)returndocument.getElementById(id);有没有人想过为什么要这么写，而不用下面的方式写呢？//方式2var = document.getElementById;这么写的
更简洁啊，也很明了，将document的方法getElementById赋值给变量，用$去获取页面id为xx的元素。实际上方式2在IE6/7/8中是可行的
阅读全文
摘要：每个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
阅读全文
摘要：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);改...
阅读全文
摘要：某知名互联网公司的一道JS笔试题：有函数a，b，c，c可能是在a或b内调用的，怎么知道？马上就想到了arguments.callee.caller，实际上有许多值得商榷的地方。如function a(){ c(); //()调用 //c.apply(null);//apply调用 //c.call...
阅读全文
摘要：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
阅读全文
摘要：代码很简单，如下：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方法，该方法有两个作用：改变函数的执行上下文（第一个参数非null，undefined）执行/调用该函数apply方法第二个参数一般认为被实现为数组，见经典的《javascript权威指南-第五版》中章节8.6.4，145页:"apply()方法和call()方法相似，只不过...
阅读全文
摘要：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中声明变量也是如此，很简单var（关键字）+变量名(标识符)。方式1var test;var test = 5;需注意的是该句不能包含在function内，否则是局部变量。这是第一种方式声明全局变量。方式2test = 5...
阅读全文
摘要：这里所说的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
阅读全文
摘要：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
阅读全文
摘要：如果把通过函数或方法调用，明确的将某种类型转换成另一种类型称为显示转换 ，相反则称为隐式类型转换 。google和维基百科中没有找到“显示类型转换”，“隐式类型转换”的字眼。暂且这么称呼。一、 运算中存在的隐式类型转换 1， “+”运算符var a = 11, b = '22';var c = a + b;这里引擎将会先把a变成字符串"11"再与b进行连接，变成了"1122"。有人会有疑问，为什么不把b变成数字22再进行算术加运算呢，这样的话c就是33了。没有为什么，当运算符“+”两边一个是数字类型，一个是字符串类型时，js引擎规定进行字
阅读全文
摘要：一道笔试题思考而来的，通常情况下没人会在函数内部修改参数值。这里仅拿出来讨论，有三种方式可以修改。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中也有不少 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
阅读全文
摘要：绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下CSS:pointer-events SinaMail SinaMail 开启穿透点击 默认情况下，链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应，即无法触发链接a的默认行为，无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏...
阅读全文
摘要：它们之间有区别吗？开发过程中似乎很少有人去加个额外的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对象，添加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在几年前的代码中见的比较多，多数情况下各浏览器表现一致。<!DOCTYPE html><html><head></head><body> <script> document.write('<div id="wraper"></div>'); var obj = document.getElementById('wraper'); alert(obj); </script></body&g
阅读全文
摘要：如下<!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下（标准模式/怪异模式），如果一个元素向左浮动(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;"> &
阅读全文
摘要：在做《资治通鉴》、《书目》项目时采用的是struts2框架，用了struts2的json插件jsonplugin-0.30.jar输出json数据。此插件很强大，能输出各种复杂javaBean。在 http://www.json.org 上提供了各种语言转成json的开源lib。试用了下org.json ，对于java基本类型，list、map没有问题。对于复杂javaBean（如一个list里存放的是Person类型的对象，Person又具有Map等类型的属性）显得力不从心了。这里采用了json-lib ，目前最新版本是2.4（json-lib-2.4-jdk15.jar ）。它实现了以下功
阅读全文
摘要：jq1.4中新增了个静态方法
.isPlainObject，见http://api.jquery.com/jquery.isPlainObject/。对于通过字面量定义的对象和newObject的对象返回true，newObject时传参数的返回false，如varp1=newObject;p1.name=′tom′;varo1=newObject(′aa′);console.log(.isPlainObject({name:'Jack'})); //-> trueconsole.log($.isPlainObj
阅读全文
摘要：首先要感谢 EtherDream 的不同观点，在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。<!DOCTYPE HTML><html><head><meta charset="gbk"><title>事实证明cssText在多数浏览器中性能较高</title></head><body><input type="button" value="测试1" onclick="test1()&qu
阅读全文
摘要：这里讨论给Object传参时，其内部的处理。参考：ECMA262 V5 15.2.2.11, 参数是一个对象，核心js对象(native ECMAScript object)或宿主对象(host object)，那么将直接返回该对象。 其生成的对象构造器仍然是所传参数对象的构造器。这样造成的后果是虽然该对象是new Object，但其constructor不一定是Object。function Person(){this.name='jack';}var w = new Object(window), d = new Object(document), p = new Obje
阅读全文
摘要：采用Ajax的项目开发过程中，经常需要将JSON格式的字符串返回到前端，前端解析成JS对象（JSON ）。ECMA-262(E3) 中没有将JSON概念写到标准中，但在 ECMA-262(E5) 中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。1，eval方式解析，恐怕这是最早的解析方式了。function strToJson(str){ var json = eval('(' + str + ')'); return json;}记得str两旁的小括号哦。2，new Function形式，比较怪异哦。function strT
阅读全文
摘要：如下typeof Number('44.5');typeof parseInt('44.5');typeof parseFloat('44.5');typeof ('44.5'-0);typeof +'44.5';typeof ('44.5'*1);typeof ~~'44.5';//http://james.padolsey.com/javascript/double-bitwise-not/typeof '44.5'|0还有其它的吗？
阅读全文
摘要：这里把符合以下条件的对象称为伪数组（ArrayLike）1，具有length属性2，按索引方式存储数据3，不具有数组的push,pop等方法如1，function内的arguments 。2，通过document.forms，Form.elements，document.styleSheets, S...
阅读全文
摘要：网页设计中，我们经常需要设置一个元素向左或向右浮动。如<!DOCTYPE HTML><html><head> <title>IE6/7和IE8/9（怪异模式）浮动元素折行Bug</title> <meta charset="utf-8"></head><body><div style="width:300px;border:1px solid gray;padding:5px;"> <input type="text" /
阅读全文
摘要：给一个HTML元素设置css属性，如var head= document.getElementById("head");head.style.width = "200px";head.style.height = "70px";head.style.display = "block";这样写太罗嗦了，为了简单些写个工具函数，如function setStyle(obj,css){ for(var atr in css){ obj.style[atr] = css[atr]; }}var head= document
阅读全文
摘要：我们经常使用nodeType==1判断元素是否是一个HMTLElement元素。页面上的元素都是节点(Node)，有元素节点(Element Node)、属性节点(Attribute Node)、文本节点(Text Node)等。w3c nodeType 的定义如下const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2; const unsigned short TEXT_NODE = 3; const unsigned short CDATA_SECTION_NODE = 4; const
阅读全文
摘要：一，结尾没有分号如下<div style="color:red;">TEST</div><script> var div = document.getElementsByTagName('div'); alert(div[0].style.cssText);</script>各浏览器输出如下IE6/7/8 :IE9/Firefox/Chrome/Safari/Opera :可以看到IE6/7/8中少了分号。二，属性名（color）是大写的，见上图三，复合属性全部展开如下<div style="b
阅读全文
摘要：一，局部变量先使用后声明，不影响外部同名变量var x = 1; // --> 外部变量xfunction fn(){ alert(x); // --> undefined 局部变量x先使用 var x = 2; // 后声明且赋值}fn();alert(x); // --> 1第一点，函数fn内第一句输出x，x是在第二句才定义的。这在JS中是允许的，这里的允许是指不会出现语法错误程序可以运行。但在其它语言如C，Java中却是不允许的。变量必须先声明后使用，如public class Test { public static void main(String[] args)
阅读全文
摘要：1，childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况：IE6/7/8/Safari/Chrome/OperaIE9/FirefoxchildNodes(i)支持不支持有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行，空格，那么firstChi
阅读全文
摘要：51ditu地图网站开发过程中碰到的，Firefox/Safari/Chrome下（无论诡异模式或标准模式）当两个绝对定位的div发生重叠（即一个div盖在另一个div上）时，下面的div变得不可点击了。解决的方法是设置z-index，z-index值大的就可以点击了。而IE下，即使z-index值高的div，下面的div中的button仍然可以点击。<!DOCTYPE HTML><html> <head> <title>Firefox/Safari/Chrome绝对定位元素重叠造成不可点击问题</title> <meta ch
阅读全文
摘要：怪异模式中IE6/7/8/9均会产生此bug，标准模式中IE6会产生此bug，但条件稍微有些不同（外层div需指定宽度）。先看怪异下：div中包含的span都向左浮动，.tltle和.intro的宽度都是50%，这时候在IE6，7，8上都会出现一个多余的'e'。当然.title和.intro的宽度百分比可以任意指定，只要两者加起来为100%即可。<html> <head> <title>怪异模式中IE6，7，8多余字符bug</title> <meta charset="utf-8"> <st
阅读全文
摘要：4，继承工具函数四/** * @param {String} className * @param {String/Function} superClass * @param {Function} classImp */function $class(className, superClass, classImp){ if (superClass === '') superClass = Object; function clazz() { if (typeof this.init == "function") { this.init.apply(th...
阅读全文
摘要：3，继承工具函数三/** * @param {Function} subCls * @param {Function} superCls */function extend(subCls,superCls) { subCls.prototype = new superCls(); }父类，按原型方式写，即属性和方法都挂在原型上。/** * 父类Person */function Person(){}Person.prototype.nationality = 'China';Person.prototype.getNationality = function() {return
阅读全文
摘要：这篇开始写几个工具函数实现类的扩展。每个工具函数都是针对特定的写类方式（习惯）。这篇按照构造函数方式写类：属性（字段）和方法都挂在this上。以下分别提供了个类，分别作为父类和子类。// 父类Personfunction Person(nationality) { this.nationality = nationality; this.setNationality = function(n) {this.nationality=n;}; this.getNationality = function() {return this.nationality;};}// 类Manfunction .
阅读全文
摘要：前段时间温故了下JS OO之写类方式，从这篇开始我们看看JS OO之继承方式。 面向对象的语言多数都支持继承，继承最重要的优点就是代码复用，从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法，就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造
阅读全文
摘要：W3C标准属性是opacity,现代浏览器都支持，但IE6/7/8却不支持该属性。在Firefox，Safari，Opera，Chrome中测试都支持opacity。如设置div的透明度为40%。<!DOCTYPE HTML><html> <head> <title>set div opacity</title> <style> .wrapper { border:solid 1px gray; opacity:0.4; } </style> </head> <body> <div
阅读全文
摘要：在灵图时做的，效果如下Demo效果图Demo源码如下 JS实现自定义右键菜单 后退 前进 地图api 实时交通 地图搜索 驾驶导航 灵图UU 路书下载 关于本站 友情链接 右键此区域
阅读全文
摘要：如下<div style="width:100px;height:100px;background:gold"></div>用IE开发者工具，或IE8自带的开发者工具。结构如 图1 ：红色所圈之处可以看到给div添加的内联样式width，height，background都依次排列。正常！但给该div添加filter:alpha(opacity=20)后，<div style="filter:alpha(opacity=20);width:100px;height:100px;background:gold"><
阅读全文
摘要：有时需要用绝对定位元素去遮盖其它元素。多数时候没有什么问题。如果被遮盖的元素添加了鼠标事件（如点击事件），各浏览器下表现则不太一样了。1，绝对定位元素（未设置background）遮住Input元素，只在IE/Opera中，Input的点击事件能触发。.container{ width:200px; height:100px; border:1px solid red; position:relative;}<div class="container"> <input type="button" value="click me
阅读全文
摘要：Javascript中小括号有五种语义语义1，函数声明时参数表function func(arg1,arg2){ // ...}语义2，和一些语句联合使用以达到某些限定作用// 和for in一起使用for(var a in obj){ // ...}// 和if一起使用if(boo){ //...}// 和while一起使用while(boo){ // ...}// 和do while一起使用do{ // ...}while(boo)注意：在与if、while及do while一起使用时小括号会将其中的表达式结果隐式的转换成布尔值。见 JavaScript中的隐式类型转换 。语义3...
阅读全文
摘要：Javascript中括号有四种语义语义1，声明数组var ary = []; // 声明一个空数组var ary = [1,3]; // 声明一个数组，同时赋初值语义2，取数组成员var ary = [1,2,3];var item = ary[0];语义3，定义对象成员 （可以不遵循标识符规则 ）var obj = {};// 为obj添加一个属性name，name是合法的标识符，即也可以通过obj.name方式来定义obj['name'] = 'jack'; // 为obj添加一个属性2a，2a不是合法的标识符（不能以数字开头），不能通过obj.2a来定义
阅读全文
摘要：汇总下IE各版本的css hackhack示例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)**colorYYYYNYNY++colorYYYYNYNY--colorYYNNNNNN__colorYYNYNYNY##colorYYYYNYNY\0color:red\0NNNNYNYN\9\0color:red\9\0NNNNNNYN标准模式中：1，减号(-)是IE6专有hack2，反斜杠零(\0)是IE8/9的hack3，\9\0是IE9/10的hack
阅读全文
摘要：事件对象 的获取很简单，很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定var evt = window.event || arguments[0]; 下面分四种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。1，第一种添加事件的方式，直接在html的属性中写JS代码Div1 Element大概这是上世纪90年代的写法，那时候直接把js代码写在网页中很普遍，也许那时候的js并不太重要，只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事.
阅读全文
摘要：在IE5.5，6下，如果一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)。那么会自动的加一倍变成20px。如下html：在IE5.5，6下测试会发现marginLeft变成了20px<style type="text/css">#div2{ margin:0 0 0 10px; float:left; width:300px; height:50px; border:1px solid gray;}</style><div style="border:1px solid red;&quo
阅读全文
摘要：这篇我们看看各个JS库的写类方式，这也是写类系列的最后一篇。 1，Prototype的写类方式 Prototype中使用Class.create方法，如下 initialize完成对象的初始化（相当于构造函数，必不可少），方法依次往下写即可。有个问题，但是p.constructor == Perso
阅读全文
摘要：工具函数如下 定义一个Person类 创建对象看看 使用该工具函数写类需注意，this.init方法必不可少。使用过Prototype库的同学会知道Class.create后的initialize方法也是必不可少的。 因为没考虑继承，第二个参数superClass使用空字符串，即默认继承于Objec
阅读全文
摘要：续上篇， 构造函数+原型 组装一个类；同一构造函数可以定义出多个类型 与上一篇方式类似，仍然用构造函数，原型对象，定义两个类。 与上一篇不同的是，虽然Man和Woman都是用Person，proto组装的。但Man却不等于Woman。即同一个构造函数（Person）可以定义出不同的类。 相关： Ja
阅读全文
摘要：这篇开始会记录一些写类的工具函数，通过上篇我们知道本质上都是 构造函数+原型。理解了它碰到各式各样的写类方式就不惧怕了。 构造函数 + 原型 直接组装一个类；同一构造函数将组装出同一类型 用构造函数来生成类实例的属性（字段），原型对象用来生成类实例的方法。 这时候已经得到了两个类Man，Woman。
阅读全文
摘要：从这篇起，会由浅到深的分析JS OO之写类方式，大概会有5-8篇。后面陆续会分析流行库（框架）的写类方式。 一些写类工具函数或框架的写类方式本质上都是 构造函数+原型。只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码，或者说组织代码的方式使用面向对象方式。当然用JS也可写出函数
阅读全文
摘要：以函数中有无this来讨论。没有this时返回一个空的对象{},有this时返回一个非空对象。下面是一个没有this的函数// 返回值是基本类型function fun() { return "jack";}var c = new fun();for (var atr in c) { alert(atr);} alert(c); //[object Object]返回值c不是"jack", 从for in执行后没有输出任何属性可以看出 c 是一个空的对象{}。再看看有this的函数，函数中有this实际上是在写一个类。但由于js的灵活性，造成了许多诡异的
阅读全文
摘要：前面有一篇提到了 匿名函数的多种调用方式。这篇看看具名函数的多种调用方式。1、() 平时最常用的就是()运算符来调用/执行一个函数// 无参函数fun1function fun1() { alert('我被调用了');}fun1();// 有参函数fun2function fun2(param) { alert(param);}fun2('我被调用了');ECMAScript3后加入给Function加入了call和apply后，就有了下面两种2、call// 无参函数fun1function fun1() { alert('我被调用了');}f
阅读全文
摘要：abcc项目中碰到的，在一个表单中用P包含一个label和div，从Firebug中看html结构div却跑到P外面去了。甚是诧异，原来P元素是不能包含块级元素（包括P自身）的。The P element represents a paragraph. It cannot contain block-level elements (including P itself).以下是html片段，P包含了一个行内及块级元素，没有一个浏览器是按代码的结构去渲染的。<p> <label for="username">用戶名：</label> <
阅读全文
摘要：上一篇提到了 绑定 中的 类型绑定 。这篇说说存储绑定，程序设计语言的一种根本特征取决于这种语言的变量存储绑定的设计方式。变量名 与 存储单元 之间的关联的这个过程称为 存储绑定 ，或称为 存储空间分配。变量名与存储单元的解除绑定的这个过程称为 存储空间解除绑定 。变量的 生存期 指该变量名被绑定于...
阅读全文
摘要：在程序中引用一个变量前，变量名 必须被 绑定 到一种数据类型上。如 名字 abc 得知道它是语言中的基本类型（整型数字、浮点数字、布尔、字符串）或对象类型（内置类、自定义类）。根据 绑定时间 的早晚分为静态类型绑定和动态类型绑定。 一、静态类型绑定显示声明和隐式声明（JS等除外）都产生对类型的静态绑定。 二、动态类型绑定动态类型绑定时，变量的类型不是由声明语句来说明的，也不是像Fortain中通过名字的拼法来确定。而是通过赋值语句给变量赋值时，变量才与类型绑定的。与静态类型绑定不同，动态类型绑定给程序设计带来了极大的灵活性。如使用动态类型绑定的语言很容易写出一个通用程序。如求两个数的和// J
阅读全文
摘要：显示声明 是程序中的一条说明语句，它列出一批变量名并指明这些变量的类型。C、C++、Java中// 显示声明 变量count，类型为int，占用空间大小各语言可能有所不同int count;JavaScript中// 显示声明 变量count，但不知其类型，也不知其占用空间大小var count;隐式声明 指通过某种默认协定的方法将变量名与类型绑定。如在Fortain中，一个以字母I、J、K、L、M或者N（或其对应小写）开始，它们被隐式的声明为Integer类型。否则为Real类型。Javascript中// 赋值语句其实隐式的声明了变量count，类型为数字，占用8个字节（64位浮点格式）/
阅读全文
摘要：正常的for循环就不提了，直接进入正题。如下：//示例1for(var i=0,a;a=["jack","tom","lily","andy"][i++];){ console.log(a);}//示例2var ary = ["jack","tom","lily","andy"];for(var i=0,a;a=ary[i++];){ console.log(a);}从Firebug控制台能看到依次输出jack ，tom ，lily ，
阅读全文
摘要：三种种方式，其中 in 可以检测到原型继承过来的属性 1，in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 可看到无论是name，还是原形链上
阅读全文
摘要：for in 语句用来列举对象的属性(成员)，如下var obj = { name:"jack", getName:function(){return this.name}};//输出name,getName for(var atr in obj) { alert(atr);}注意了吗，没有输出obj的toString，valueOf等内置属性（或称内置成员，隐藏属性和预定义属性）。即for in用来列举对象的显示成员（自定义成员）。如果重写了内置属性呢，下面就重写obj的toStringvar obj = {name:"jack", getName:f
阅读全文
摘要：script不受Web浏览器跨域安全限制的束缚，即能实现跨域访问。这是它的最大优点。另外一点需要注意的是不同浏览器对script的触发事件不同，即回调函数要写在这些函数之中，且只支持异步调用IE下：加载完成后触发"onreadystatechange"事件firefox下：加载完成后触发"onload"事件，以下是同xmlHttpRequest的比较。
阅读全文
摘要：很多公司是用代理服务器来上网。浏览器，qq,msn等都要设置代理。每到一个地方都是一个网络配置，导致很多问题，其中就是在代理环境下eclipse的需要更新的时候出问题，以下就是解决方法：window-->preferences-->general-->network connections 选中 manual proxy configuration:填入http proxy , port代理需要用帐号和密码就需要选中 Enable proxy authentication,然后填上 user name 及password
阅读全文
摘要：最近回顾了下数据结构及算法，以下是用java和js实现的十进制数转换N进制。Java实现/** * baseString 递归调用 * @param num 十进制数 * @param base 要转换成的进制数*/public static String baseString(int num,int base) { String str = "", digit = "0123456789abcdef"; if(num == 0){ return ""; }else { str = baseString(num / base,base
阅读全文
摘要：某门户网站的一道笔试题public class Test { public static void stringUpd(String str) { str = str.replace("j", "l"); System.out.println(str); } public static void stringBufferUpd(StringBuffer bf) { bf.append("c"); System.out.println(bf); } public static void main(String[] args) { /**
阅读全文
摘要：abcc项目实现这样一个功能：点击“上载查询”，弹出一个绝对定位的div（类似qq文件中转站的“上传文件”按钮），里面有上传按钮等，点击后div在最上层。即z-index为最大。在firefox下表现良好，在IE6下无论如何也盖不住select。墨墨说是IE下一个著名的bug，解决方法用一个iframe包住select。以下是一个测试的静态html，为bug重现及及解决方法。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title he
阅读全文
摘要：08年一家公司JS面试题，职位是javascript工程师（赴google）面试官问我如何克隆一个数组，当时想了下js的Object没有clone方法，java的Object有。那怎么得到一个新数组呢？ 我当时回答：用一个loop将源数组元素依次push到新数组中。这是最简单的方法，但显然不是面试官想要的答案。最后告知我：利用Array的slice方法。示例如下：var ary = [1,2,3];//源数组var ary2 = ary.slice(0);//克隆一个新数组console.log(ary2);/* 改变ary2，不会影响到ary，说明的确是两个数组而非引用 * 如果是两个引用，
阅读全文
摘要：有时候网页很长，出现了滚动条。这时候如果要看这个网页的效果用windows提供的“印屏幕PRScrn”键就满足不了了。下面是自己使用过的截图软件。IE下测试css等可以用马桶浏览器（ 傲游Maxthon ） firefox3下的插件比较多，Fireshot就不错。以下是安装步骤1、打开firefox3浏览器，工具 > 附加组件，输入Fireshot搜索2、下一步下一步的即可3、提示重启firefox3，重启后安装成功嗯，看看如何使用4、重启firefox3后会发现工具栏右侧多了一个红色背景的大S标志，这个就是Fireshot5、点击旁边的小三角，出现弹出菜单，选择capture enti
阅读全文
摘要：JavaScript 1.6 引入了几个新的Array 方法，具体的介绍见：New in JavaScript 1.6 。这些方法已经被写进了ECMA262 V5。现代浏览器（IE9/Firefox/Safari/Chrome/Opera）都已经支持，但IE6/7/8不支持。jquery的工具方法中提供了类似的功能。1、Array.forEach()和jquery的$().each()。在数组中的每个项上运行一个函数。类似java5 增强的for循环。var ary = [2,4,6,8];// js1.6 Array.forEach方法ary.forEach(function(i){aler
阅读全文
摘要：CSDN上又有个网友提这样的问题，看来这个问题很多时候都会碰到。如下var a=['1','2','3','4'] var b=['1','2']如何比较才能得到数组c=['3','4']基本的算法就是挨个比较两个数组的元素，把不同的跳出来单独放到一个数组里，最后返回该数组。其实数组元素如果是基本类型（Number，String，Boolean）的很好比较，但如果是对象类型就麻烦一些，js对象的比较见：http://www.cnblogs.com/snandy/arc
阅读全文
摘要：首先，看看JS和Java中关系运算符的区别。这里拿大于号做示例(>)。1、Java中的大于号不能用于两个字符串的比较String s1 = "11", s2 = "12";System.out.println(s1>s2); //编译报错，不能通过2、JS中的则可以，比较的字符串中各个字符ASCII大小var s1="11",s2="12";console.log(s1>s2); //输出false.逐次比较字符的ASCII顺序嗯，利用js这个特性可以很好的对数据进行排序。这个是当时做abcc项目
阅读全文
摘要：变量的作用域指的是变量的可见性，而生命周期则（存活期）则是从另一个角度考察变量。JS中变量的作用域分为全局变量和局部变量，函数内定义的称为局部变量，函数外的称为全局变量。（“函数外的称为全局变量”是相对的，另此处讨论的前提是用var显式声明的变量，函数内不用var定义的变量默认是全局变量，当然忽略var声明变量是不赞成的）。var glob = 4;//函数外声明全局变量function fun() { var height = 20; //函数内用var声明的是局部变量 weight = 50; //函数内不用var声明的是全局变量}fun();alert(weight);JS中没有块级作用
阅读全文
摘要：这个标题实在拗口，Javascript命名变量所遵循的规则1、第一个字符必须是字母、汉字字符、 下划线(_)或美元符号(
)2、剩下的可以是下划线、汉字字符、美元符号和任何字母、数字以下声明变量是正确的varp,p,_p;var 长,宽;以下是错误的var .p;//只能是字母、数字、下划线或美元符号var -p;//只能是字母、数字、下划线或美元符号var p*;//只能是字母、数字、下划线或美元符号var 4p,4长;//不能以数字开头var 长 度;//中间不能有空格作为对象属性时，有两种方式存取。一是点号(.)运算符，一是中括号([])运算符。var p = {name:&quo
阅读全文
摘要：绑定/约束 （binding）指两个东西之间的关联。如 名字 与它所代表的事物。又如属性与实体之间的关联，又或者符号与操作之间的关联。早期的书翻译成约束，后期的多数称绑定。后续都称绑定。绑定发生的时间称为 绑定时间 （binding time）。绑定 和 绑定时间 是程序设计语言中了个非常重要的概念。绑定可以发生在语言设计时、语言实现时、编译时、连接时、载入时和运行时。 一、语言设计时多数语言中运算符、流程控制结构、内部类型、对象的构造形式等都是在语言设计时决定的。如星号（*）在语言设计时与乘法操作绑定。 二、语言实现时多数语言手册都留下了许多问题，要求语言的实现者去仔细考虑和决定如何实现？如
阅读全文
摘要：变量 是机器存储单元在语言中的抽象。它是编程语言最重要的概念之一。变量有6个属性（或者说从6个方面去描述变量）名字/别名地址/左值值/右值类型作用域生存期/生命期1 名字/别名名字的概念在 名字/标识符 已经提到。当多个名字访问的都是同一个存储地址时(或者说多个名字都 绑定/约束 于同一个存储地址)...
阅读全文
摘要：名字 是指代表某些东西的有助于记忆的字符序列。名字可以使我们采用符号形式标识符引用变量、常量、子程序、形参而不用采用更低级的如地址一类的概念。从低级语言到高级语言的发展过程中，名字 是抽象出来的最重要的概念之一。名字不只是用于变量，也常用于常量、子程序、形参等。标识符一词常常与名字概念互换使用。一、名字的长度早期的程序设计主要用来解决数学问题，数学中常用的就是单个字符的变量。如x，y，z。Fortran1 打破了使用单个字符名字的传统，它最多允许使用6个字符。直至到Fortran77。Fortran95 中变量名字最多允许31个字符。C89/Java/JavaScript/Ada/C# 对名字
阅读全文
摘要：有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。闭包演示 产品 0 产品 1 产品 2 产品 3 产品 4 以上场景是初学者经常碰到的。即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler...
阅读全文
