浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2010, June 11, 9:17 AM
jQuery的bind的函数在实际应用中用的不是特别多，只是他可以绑定一个事件，但不会即时触发，也可以通过unbind来解除绑定。在没有看到这篇文章之前，我一直不知道原来bind也可以有命名空间。事实上，我看完这篇文章后，再去翻了一下手册，也才发现了一点点的注释。但手册也仅仅是一句话就带过去了。没有过多的深究，或许他认为命名空间这玩意很简单，没有必要多解释？
先看手册，由于bind方法有三个参数(type,[data],fn)，所以手册上这么介绍：
XML/HTML代码
- .bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为type参数传递进来的。
-
- jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('click')。一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
-
- 任何作为type参数的字符串都是合法的；如果一个字符串不是原生的JavaScript事件名，那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发，但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。
-
- 如果type参数的字符串中包含一个点(.)字符，那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说，如果执行 .bind('click.name', handler) ，那么字符串中的 click 是事件类型，而字符串 name 就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind()来获取更多信息。
-
- 当一个事件传到一个元素上，所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件处理函数，总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后，事件继续沿着普通的事件冒泡途径上浮。
Zeal这么理解，并解析了上面的一段：
http://www.zeali.net/entry/649
- jQuery的 bind / unbind 方法应该说使用很简单，而且大多数时候可能并不会用到，取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。
-
- 但假设如下情况：需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定，因而理论上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有可能的额外的同一事件绑定逻辑。
-
- 这时候如果直接用 .click() / .bind('click') 加上 .unbind('click') 来进行重复绑定的话，被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑，潜在会影响到该元素其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话，可以在unbind的时候提供 function作为第二个参数来指定只unbind其中一个处理逻辑，但实际应用中很可能会碰到各种进行匿名函数绑定的情况。
-
- 对于这种问题，jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加 .something 来区分自己这部分行为逻辑范围。
-
- 比如用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件（你可以用自己的命名空间多次绑定不同的行为方法上去），当unbind的时候用 .unbind('click.myCustomRoutine') 即可释放所有绑定到 .myCustomRoutine 命名空间的 click 事件，而不会解除其他通过 .bind('click') 或另外的命名空间所绑定的事件行为。
-
- 同时，使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定，通过 .unbind('.myCustomRoutine') 即可。
-
- 要注意的是，jQuery的命名空间并不支持多级空间。因为在jQuery里面，如果用 .unbind('click.myCustomRoutine.myCustomSubone') ，解除的是命名空间分别为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件，而不是 "myCustomRoutine 下的 myCustomSubone 子空间"。
如此看来，命名空间还是有点用的。只是不知道会有多少人用得上这个功能（不开发插件的人，估计永远用不到吧？）我也是仅作一下笔记而已
Tags: jquery, bind, 命名空间
Javascript | 评论:2
| 阅读:23670
Submitted by gouki on 2010, May 26, 10:09 AM
在PHP中可以直接对字符串进行比较，比如
PHP代码
- $a = 'A';
- $b = 'B';
- var_dump( $a > $b);
当然，在JS中也可以
JavaScript代码
- var s = 'A';
- var t = 'B';
- alert( s < t);
为什么可以比大小呢？那是因为，他们是直接转成ascii值来进行比较的，PHP中是 ord($a) 转成了65，B就是66了，所以$a>$b是返回false
PHP有两个函数用来互换，一个是ord，一个是chr，那么js中怎么办呢？也有，一个是charCodeAt()，一个是fromCharCode();看例子吧。。。
PHP代码
- <?php
- $a = 'A';
- echo ord($a);
- echo chr( ord($a) );
JavaScript代码
- var s= 'A';
- alert( s.charCodeAt() );
-
- alert( String.fromCharCode( s.charCodeAt() ) );
js中对于fromCharCode和php不太一样了。
Tags: ord, chr, php
Javascript | 评论:0
| 阅读:36881
Submitted by gouki on 2010, May 21, 5:32 PM
js没有parse_str这个函数，因此，对于querystring就要自己写了。
还好，在location这个对象里，对于querystring都是包含着的。于是乎就有了下面两个处理方式，很简单，没有做任何转换。。。只是演示而己
XML/HTML代码
- var param1 = 'name=123&psw=321&sex=男';
- var param2 = {name: '123',psw: '321', sex: '男'};
从param1转为param2
JavaScript代码
- var param1 = 'name=123&psw=321&sex=男';
- var s = param1.split("&");
- var param2 = {};
- for(var i=0;i<s.length;i++){
- var d=s[i].split("=");
- eval("param2."+d[0]+" = '"+d[1]+"';");
- }
-
- for(i in param2){
- alert(i+' -- '+param2[i]);
- }
从param2转为param1
JavaScript代码
- var arr = [];
- for(i in param2){
- arr.push( i + "=" + param2[i]);
- }
- alert(arr.join("&"))
当然应该有更好的办法，我这里只是简单处理一下
Tags: parse_str
Javascript | 评论:0
| 阅读:20402
Submitted by gouki on 2010, May 20, 11:55 AM
司徒正美在看到老赵的博客鄙视IE6用户时，不甘寂寞，放出了一段残忍的代码，可以对IE6、7进行封杀处理。。
代码如下：
XML/HTML代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta content="IE=8" http-equiv="X-UA-Compatible"/>
- <meta name="keywords" content="IE6与IE7封杀器 by 司徒正美" />
- <meta name="description" content="IE6与IE7封杀器 by 司徒正美" />
- <script type="text/javascript">
- //使用setAttribute也行，值好像是固定，为1（读作"日"，日得好！）
- document.createElement("li").value = 1;
- </script>
- <title>IE6与IE7封杀器 by 司徒正美</title>
- </head>
- <body>
- <h1>杀！杀！杀！</h1>
- <h2>不行请刷新页面（这是运行框的问题）</h2>
- </body>
- </html>
还有一段是可以关闭当前窗口的：
XML/HTML代码
- window.opener=null;window.open('','_self');window.close();
我的博客不能执行代码，如果你想测试，你可以到http://www.cnblogs.com/rubylouvre/archive/2010/05/18/1738370.html进行享受。
Tags: ie6, ie7, firefox, chrome
Javascript | 评论:0
| 阅读:18252
Submitted by gouki on 2010, May 10, 9:21 AM
不知道从什么时候起，网页上那烦人的alert,prompt,confirm框都成了很多人讨厌的对象，因为他的样式太丑了。ExtJS中的alert就是适合他自己的样式的弹出，可是其他不是框架的代码中要有漂亮的对话框怎么办？
jQuery Alert 是jQuery的官方插件，Ymprompt是国内开发人员写的，其于jQuery的一个插件，当然是各有所长。
jQuery Alert相对比较简单一点，用法也简单，而Ymprompt就复杂的多了。
这是关于jQuery Alert的介绍：
http://www.cnblogs.com/whitewolf/archive/2010/05/09/1731120.html，介绍请移步左边的链接
- 这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点：
-
- 1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。
- 2：允许你自定义对话框的标题。
- 3：在ＩＥ７中，可以使你避免使用JavaScript 的prompt（）函数带来的页面重新加载。
- 4：这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候，它能够自适应用户窗口的调整。
- 5：如果你引入了jQuery UI Draggable plugin插件，那这个插件也可以被自由拖动。
而Ymprompt在这里有一个简单的介绍：http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html，写的很多，但都是document，并非介绍，所以我就不贴了。
jQuery Alert在官方有的下载，我也就不提供啦。可以尝试一下。
在ThinkSNS中，用的是ymprompt，所以我才看了一下这玩意，但并非能够完全满足我的需求，如果仅仅使用简单的alert、prompt、confirm之类的，应该是够用了。
Tags: jquery, jqueryui, alert, ymprompt
Javascript | 评论:0
| 阅读:21820
