snandy

JQuery中html()方法使用不当带来的陷阱

摘要： .html方法当不传参数时用来获取元素的html内容，查看源码return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.replace(rinlinejQuery, "") : null;得知其通过非标准的但所有浏览器都支持的innerHTML实现。有些使用者会用html()方法的返回值作为代码分支的条件，比如：var str = $('#user').html();if( str=='jack' ){ ...}else if( str=='tom' 阅读全文

posted @ 2011-04-07 13:31 snandy 阅读(10089) 评论(8) 推荐(3) 编辑

仅IE6/7/8中innerHTML返回值忽略英文空格

摘要：如下 jack div[id=user]中的文本"jack"前有两个英文空格，各浏览器下结果如下IE6/7/8 : 弹出4，即忽略了空格IE9/Firefox/Safari/Chrome/Opera : 弹出6，即没有忽略空格另换成中文空格不会有这个问题。以下是Gray Zhang的补充：1、IE6-8下，对于一个元素的firstChild，如果其为TextNode，且nodeValue前n个字符为空格字符（包括空格、\t、\n、\r和一个分页符号U+000C），则这n个字符被忽略2、在IE6-8下，对一个元素的lastChild，如果其为TextNode，且nodeVal 阅读全文

posted @ 2011-04-07 10:23 snandy 阅读(2230) 评论(5) 推荐(1) 编辑

各浏览器中鼠标按键值的差异

摘要：我们知道标准鼠标有左，中，右三个键。鼠标按下时如何判断按下的是哪个键呢？W3C DOM-Level-2 定义如下W3C DOM 写道During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, one to indicate th 阅读全文

posted @ 2011-04-07 06:47 snandy 阅读(3373) 评论(5) 推荐(2) 编辑

JavaScript克隆对象的三个实用方法

摘要：方法1function clone(obj){ var o; if(typeof obj == "object"){ if(obj === null){ o = null; }else{ if(obj instanceof Array){ o = []; for(var i = 0, len = obj.length; i < len; i++){ o.push(clone(obj[i])); } }else{ o = {}; for(var k in obj){ o[k] = clone(obj[k]); } } } }else{ o = obj; } return 阅读全文

posted @ 2011-04-06 20:19 snandy 阅读(3039) 评论(5) 推荐(3) 编辑

JavaScript中链式调用之研习

摘要：方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。一、对象链：方法体内返回对象实例自身(this)function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null;}ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, method... 阅读全文

posted @ 2011-04-06 11:03 snandy 阅读(5102) 评论(6) 推荐(4) 编辑

我的函数链之演变

摘要：最易读版function chain(obj){ function fun(){ if (arguments.length == 0){ return fun.obj; } var methodName = arguments[0], methodArgs = [].slice.call(arguments,1); fun.obj[methodName].apply(fun.obj,methodArgs); return fun; } fun.obj = obj; return fun;}易读版function chain(obj){ return function(){ va... 阅读全文

posted @ 2011-04-06 09:48 snandy 阅读(2026) 评论(3) 推荐(1) 编辑

IE6/7/8/9中table元素align=center权重比margin:0大

摘要：重现很简单，如下<!DOCTYPE html><html><head><style> * {margin:0;}</style></head><body style="padding:50px;"> <div style="border:1px solid gold;width:400px;padding:10px 0;"> <table width="100" bgcolor="red" align=" 阅读全文

posted @ 2011-04-05 16:12 snandy 阅读(1347) 评论(5) 推荐(1) 编辑

IE6/7/8中Option元素未设value时Select将获取空字符串

摘要：如下<!DOCTYPE HTML><html><head><title>IE6/7/8中Option元素未设value时Select将获取空字符串</title></head><body> <select onchange="alert(this.value)"> <option>one</option> <option>two</option> <option>three</option> </sel 阅读全文

posted @ 2011-04-05 08:25 snandy 阅读(2479) 评论(0) 推荐(0) 编辑

IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug

摘要：新版邮箱项目中做页签功能时碰到的。table元素的 cellpadding 和 cellspacing 属性意义不提了。它们也有对应的css解决方案。如下table { border-collapse:collapse; border-spacing:0;}th,td { padding: 0;}JS操作这两个属性有两种方式。方式1，直接点操作table.cellSpacing = 10;table.cellPadding = 10;注意cellSpacing和cellPadding中间的 S 和 P 都要是大写的。方式2，setAttributetable.setAttribute(' 阅读全文

posted @ 2011-04-04 18:49 snandy 阅读(3047) 评论(2) 推荐(3) 编辑

IE6/7/8/9中Table/Select的innerHTML不能赋值

摘要： IE6/7/8/9中Table/Select的innerHTML赋值会报错，如下<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>IE6/7/8/9中TABLE的innerHTML不能赋值</title></head><body><script type="text/javascript"> try{ var table = document.createElement('t 阅读全文

posted @ 2011-04-04 17:10 snandy 阅读(4504) 评论(2) 推荐(2) 编辑

JavaScript中清空数组的三种方式

摘要：方式1，splicevar ary = [1,2,3,4];ary.splice(0,ary.length);console.log(ary); // 输出 []，空数组，即被清空了方式2，length赋值为0这种方式很有意思，其它语言如Java，其数组的length是只读的，不能被赋值。如int[] ary = {1,2,3,4};ary.length = 0;Java中会报错，编译通不过。而JS中则可以，且将数组清空了，var ary = [1,2,3,4];ary.length = 0;console.log(ary); // 输出 []，空数组，即被清空了目前 Prototype中数组阅读全文

posted @ 2011-04-04 13:24 snandy 阅读(206513) 评论(8) 推荐(15) 编辑

JavaScript中判断函数是new还是()调用

摘要：具名函数的各种调用方式在之前篇幅中已经介绍过了。这篇看看如何判断一个函数是被new调用的，还是被其它方式调用的。方式1function Person(n,a){ this.name = n; this.age = a; if(this instanceof Person){ alert('new调用'); }else{ alert('函数调用'); }}var p = new Person('jack',30); // --> new调用Person(); // --> 函数调用方式2function Person(n,a){ th 阅读全文

posted @ 2011-04-03 10:41 snandy 阅读(5843) 评论(8) 推荐(1) 编辑

IE6/7 and IE8/9(Q)中td的上下padding失效

摘要：如下<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8"> <title>IE6/7 and IE8(Q) 中td的上下padding失效</title> <style> table { border:1px solid #555; } td { background:#CCC; padding:40px;} </style> </HEAD> <BODY> <table cellpadding=&quo 阅读全文

posted @ 2011-04-03 09:37 snandy 阅读(2274) 评论(2) 推荐(1) 编辑

给body标签和document.body都添加点击事件后仅Firefox弹出了两次

摘要：这是菜菜刚刚发现的<!DOCTYPE html><html style="background:red"> <head> <meta charset="utf-8"> <title>给body标签和document.body都添加点击事件后仅Firefox之弹出了两次</title> </head> <body onclick="alert(1)" style="background:yellow;"> <p& 阅读全文

posted @ 2011-04-02 16:52 snandy 阅读(6662) 评论(3) 推荐(2) 编辑

DOM3 textInput事件

摘要： DOM3中引入了文本事件，其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。与keypress不同的是，该事件只会在用户输入可视字符时触发，而keypres事件则只要按下键即触发(如CapsLock，Backspace)。可看到textInput考虑的主要是字符，可以通过事件对象的data属性获取所输入字符。示例DOM3 event textInput 目前只有IE9，Chrome，Safari支持。阅读全文

posted @ 2011-04-02 11:38 snandy 阅读(3041) 评论(0) 推荐(0) 编辑

书写css伪类时冒号前或后多个空格导致该规则失效

摘要：相信多数开发者不会多个空格。偶然发现的，网上多数css格式化将压缩后的css格式化后会发生这个情况。搜“css格式化”，以下网站http://www.jb51.net/tools/cssyasuo.shtmlhttp://www.ttmouse.com/geshi.html格式化后会多出个空格，多出空格后样式规则失效了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>书写css伪类时冒号前或后多个空格导致该规则失效</title> & 阅读全文

posted @ 2011-04-02 10:30 snandy 阅读(2567) 评论(5) 推荐(0) 编辑

各浏览器关键字/保留字作为对象属性的差异

摘要：最近记录了各种各样的标识符 “同名” 现象，有 Javascript中同名标识符优先级和有name为action的表单元素时取form的属性action杯具了。最近又碰到一个，后台同事返回了如下的JSON结构：{default:{name:'jack'}}在IE6/7/8中出错了，调试了很久才... 阅读全文

posted @ 2011-04-01 09:41 snandy 阅读(2197) 评论(6) 推荐(3) 编辑

各浏览器中disabled属性及对应css选择器的差异性

摘要： disabled属性只应用在以下元素BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA见 HTML 4.01 的属性表多数时候我们会遵循标准，不再其它元素上使用该属性。但部分人没有注意disabled的应用规则，误认为所有元素都可以使用该属性。并且在IE浏览器上生效，得到了证明。比如：<label disabled="disabled">启用</label><p disabled="disabled">段落</p><a href="http 阅读全文

posted @ 2011-04-01 08:15 snandy 阅读(9415) 评论(0) 推荐(0) 编辑

有name为action的表单元素时取form的属性action杯具了

摘要：如下<!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" 阅读全文

posted @ 2011-03-31 09:51 snandy 阅读(2589) 评论(5) 推荐(0) 编辑

IE中getElementsByTagName无法获取元素BUG

摘要：如下<!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 阅读全文

posted @ 2011-03-31 08:41 snandy 阅读(7414) 评论(5) 推荐(0) 编辑

各浏览器中querySelector和querySelectorAll的实现差异

摘要： 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... 阅读全文

posted @ 2011-03-30 07:55 snandy 阅读(24492) 评论(6) 推荐(9) 编辑

各浏览器中for in顺序的差异

摘要：如下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... 阅读全文

posted @ 2011-03-29 13:41 snandy 阅读(3396) 评论(6) 推荐(3) 编辑

让Firefox支持insertAdjacentHTML和insertAdjacentText

摘要：这两个属性首先是IE4提出且实现的，它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置，插入指定的 HTML 片段。其它浏览器相继支持。唯有Firefox不支持，甚至新发布的FF4。insertAdjacentHTML已被HTML5采纳。如下扩展HTMLElement.prototype，为其增加这两个属性。if(HTMLElement.prototype.insertAdjacentHTML == undefined) { HTMLElement.prototype.insertAdjacentElement = function(where, ... 阅读全文

posted @ 2011-03-29 06:46 snandy 阅读(2118) 评论(0) 推荐(0) 编辑

为非IE浏览器添加mouseenter，mouseleave事件

摘要：先了解几个事件对象属性target: 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。currentTarget: 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/... 阅读全文

posted @ 2011-03-28 11:43 snandy 阅读(4142) 评论(0) 推荐(4) 编辑

css非标准的ime-mode属性

摘要： ime是Input Method Editor的简称。它是一种专门的应用程序，用来输入代表东亚地区书面语言文字的不同字符。使用此种输入法，不需特殊的键盘（对应各种语言的键盘）即可输入东亚诸国（如中文、日文、韩文、俄文等）的各种文字。日本IME，是可以输入表音文字 (かな)与変换表意文字 (汉字) 的一种输入法，而且它具有人工智慧，可以将一般较常使用的表意语句置于输入法的词库中。日本IME输入法，则依据该词库所建立之词汇来判断所输入的表音文字以変换为恰当的表意文字。由于日文中发音相同的表意文字相当多的关系，日本IME在使用之初的表意文字的変换判断不甚恰当的情况是会发生的。因此，该输入法提供阅读全文

posted @ 2011-03-28 10:13 snandy 阅读(9120) 评论(0) 推荐(0) 编辑