1、jQuery 陷阱与javascript陷阱1.浮点运算这可能是挫败一些对javascript不熟悉并准备执行一些数学运算的人的主要原 因.1. 2. alert(0.02/0.1);/0.199999999999999983. alert(1.14*100);/113.99999999999999;)4. Math.round() 就能在这里派上用场.2.加号操作符的重载+加号运算符即能做算术运算,又能够做字 符串的连接.如果正确的使用它是很便利的.让我们看一看.1. 2. varmsg,one=1;3. msg=2+1;/msg=214. msg=2+one;/msg=215. msg=1
2、+1+1+musketeers;/msg=3musketeers6. msg=Bond+0+0+7;/msg=Bond0077. 上 述行为是因为这些运算都是从左到右执行的.类型的转换是基于其中的字符串或数字.3.行尾插入分号javascript 自动在行尾插入分号;,让我们来看看这在一个简单的示例中的情况.1. 2. functionreturnSame(a)3. return/Insertssemi-colontoconverttoreturn;4. a/abecomesa;-Unreachable5. 6. alert(returnSame(2);/Outputisundefined7.
3、 当 在创建对象或使用对象的值的时候这个神奇的分号能使事情变得更复杂.4.typeof操作符typeof 是一个一元操作符,运算结果往往并不是如预期的那样.令人吃惊的是对null的运算结果是object1. 2. varobj=;/objectcreatedusingobjectliteral3. vararr=;/arraycreatedbyarrayliteral4. alert(typeof(obj);/object-Good5. alert(typeof(arr);/object-Bad6. alert(typeof(null);/object-Ugly!;)7. 它仅仅能 查找对象的
4、原始类型.5. false, null, undefined, NaN, Infinity尽 管他们看起来相似,但他们代表着不通的意思.javascript有3种基本数据类型数字numbers, 字符串strings 和布尔 boolean,除此之外还有两个不重要的数据类型undefine和null.按照=运算符运算,null和undefine是相等的.1. 2. vara;3. alert(a);/undefined4. alert(1/0);/Infinity5. alert(0/0);/NaN6. 0/0=0/0;/false-aNaN!=NaN7. alert(b);/error8.
5、6. 字符串只替换第一个匹配的字符与PHP或其他程序语言不同,默认情况下,javascript的字符替换只替换第一个出 现的匹配的字符.1. 2. varnospace=Idontneedspaces.replace(,_);3. alert(nospace);/I_dontneedspaces-Onlyfirstoccurence4. varnospace=Idontneedspaces.replace(/g,_);5. alert(nospace);/I_dont_need_spaces6. 7.parseInt 函数parseInt 用来将一个字符串转换为整数类型.这个函数能传入两个参数
6、,第二个参数是指定多少进制的.这里十进制用 10 指定.如果没有指定进制,则parseInt函数自己会试图找到合适的进制.如果是这样,以0开头的字符串将会转换为8进制.1. 2. varstr=017;3. varstrInt=parseInt(str);/strInt=15;)4. varstrInt=parseInt(str,10);/strInt=175. 1）最近接触jquery，觉得jquery确实比较好用，但是在使用过程中碰到不少问题，最典型的问题是选择器通过元素的#id来查找元素对象时，如果id 中包含jquery的特殊字符就会导致查找失败，以下特殊字符需要转义： #;&,.+*
7、:!$()=|/If you wish to use any of the meta-characters (#;&,.+*:!$()=|/ ) as a literal part of a name, you must escape the character with two backslashes: /. For example, if you have an an input with name=names, you can use the selector $(inputname=names/).2） 使用$.ajax对功能的Ajax请求到服务器，避免使用complete事件处理响应
8、数据。过度使用选择器和不分配给本地变量，例如：$(#button).click(function() $(#label).method(); $(#label).method2(); $(#label).css(background-color, red););而不是： -$(#button).click(function() var label = $(#label); label.method(); label.method2(); label.css(background-color, red););我发现这个富有启发性的一刻，我意识到如何调用堆栈的工作。过量使用的链接。看 到这样的：t
9、his.buttonNextn ? bind : unbind(this.options.buttonNextEvent, this.funcNext)n ? removeClass : addClass(this.className(jcarousel-next-disabled ).attr(disabled, n ? false : true);解 释3)不理解的事件有约束力。 JavaScript和jQuery的工作方式不同。应 广大用户要求，例如：在jQuery：$(#someLink).click(function()/do something);没有jQuery的：LinkSom
10、eClickFunction(item) /do something基本上所需的JavaScript钩子不再需要。即使用内联标记（的onClick等），因为你可以简单地使用ID和 类，开发人员通常会利用对CSS的目的。4)如果您绑定（）相同的事件多次将大火多次。我通常总是拆散（点击）。绑定（点击） 以防万一场景：点击加号按钮自动复制加号按钮所在行，至下一行，然后在一行中补上减号按钮。问题：在IE下出现nodetype错误。分析：之前的代码是其它人写的，采用jquery的clone(true)。如果用clone()，就不会报错，然而复制所在行的组件上的事件，就 不起作用了。百思不得其解。方案：在
11、网上找了半天，每有正解。最后发现ie下报完这个错误后，再点击就可以正常运行了，然后再报错，再点击再正常运行。根据这个特点，给这条语 句加了个trycatch终于解决，try ,catch 中都是同样的语句 try/在IE下第一次运行以下语句会出异常，捕获异常再次执行该语句就没事了 var cloned = parent.clone(true); catch(err) var cloned = parent.clone(true); Query有個很方便的function：toggle，可以讓元素做指定的切換動作，若不指定任何參數，則可以讓元素做很簡單的隱藏、顯示的切換，很是方便。If they
12、 are shown, toggle makes them hidden (using the hide method). If they are hidden, toggle makes them shown (using the show method).但今天突然發現在針對大量元素的隱藏顯示時，這個function效能很差。看範例（另開視窗）第一種方式是click之後再跑一個for loop讓所有元素做toggle，很明顯的這個方式效能很差(用IE開更是慢到離譜)。範例裡頭的element有600個。view sourceprint?1functiondividend_toggle()2
13、$(.dividend).toggle();3dividend_toggled = !dividend_toggled;4$(#toggler).html(dividend_toggled?hide:show);56$(#toggler).click(dividend_toggle);第二種方式是利用toggle的切換直接決定show and hide，效能上就比第一種方式好多了。view sourceprint?1$(#toggler2).toggle(function()2$(td.dividend).hide();3$(this).html(show);4, function()5$(t
14、d.dividend).show();6$(this).html(hide);7);其實這是一個觀念上的陷阱，toggle()交由元素自己判斷顯示還是隱藏，在很多場合是非常方便的，但元素一多就會發生效能上的問題，因為你把顯示還是 隱藏的決定權交給元素去判斷，當元素一多，每個元素都要重複判斷。以下是jquery1.3.2的toggle的片段原始碼：view sourceprint?1this.each(function()2varstate = bool ? fn : jQuery(this).is(":hidden");3jQuery(this) state ? "show" : "hide" ();4) :see that?每次都要判斷元素是否被隱藏，然後再決定show or hide。 這也是為何在大量做toggle時效能會差的原因。因此在大量元素的顯示或隱藏時，不要使用toggle來讓元素自己決定要顯示或隱藏。換句話說，當要決 定兩個以上元素的顯示或隱藏時，這個決定(boolean值)就應該被存起來，而不應該再下一個元素還要再判斷這個決定。
