浏览 1356 次
锁定老帖子 主题:JS 框架使用及迁移(二)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-08-21
最后修改:2011-08-21
1、方法调用 Prototype: $$('.class').invoke('show'); Element.show($("id")); $("id").invoke("show") 是会出错的,因为$("id") 是 HTML 元素对象,并无 invoke 方法。 jQuery: $j("#id").show(); $j(".class").show(); 2、迭代: Prototype: [ 'hello', 'world'].each(function(s, index) { alert(index + ': ' + s); }); 可见javascript 的数组对象被扩展,加入了迭代功能。 jQuery: $j([ 'hello', 'world']).each(function(s) { alert(s+":"+this); }); 包装成 jQuery 对象,然后操作,这里值得注意的是,在回调函数中,this 被赋值为当前元素。 3、事件监听 jQuery 相比 Prototype 一个很好的地方,就是 ready() 事件。 $j(document).ready(function(){}); // 或者 $j(function(){}); 而 Prototype 早期只能通过 Event.observe(window,'load',function(){}) 后来提供了: document.observe("contentloaded", function() {}) 现在改为: document.observe('dom:loaded',function(){}) 值得注意的是,这些方法可以多次调用。并且在事件触发后,能按调用先后的程序执行相关代码。 像 BOM 本身的 window.onload 事件,如果多次赋值,会被覆盖。 function out1() { console.log("output 1"); } function out2() { console.log("output 2"); } window.onload = out1; window.onload = out2; 以上代码,只会输出 "output 2",而以下两段代码都会依次输出 "output 3 "、"output 4": Prototype: document.observe('dom:loaded',function(){ console.log("output 3"); }); document.observe('dom:loaded',function(){ console.log("output 4"); }); jQuery: $j(function() { console.log("output 3"); }); $j(function() { console.log("output 4"); }); Prototype: Event.observe('btnok', 'click', btnHandler); 或者 $('btnok').observe('click', btnHandler); 值得注意的是,对于同一个元素的同一个事件,注册同一个 handler ,Prototype 只注册一次。 也就是说,如下两次调用 observe 注册 Prototype function btnHandler() { console.log("btn clicked!"); } Event.observe('btnok', 'click', btnHandler); $('btnok').observe('click', btnHandler); 但是对于同一个元素、同一个事件,用不同的 handler ,可以注册多次。 function btnHandler() { console.log("btn clicked!"); } function btnHandler1() { console.log("btn clicked 1!"); } Event.observe('btnok', 'click', btnHandler); $('btnok').observe('click', btnHandler1); 移除事件绑定处理过程 btnHandler 用如下语句: $('btnok').stopObserving('click', btnHandler); jQuery 则为: $j('#btnok').bind('click', btnHandler); 或者更灵活简洁的方法: $j('#btnok').click(btnHandler); 值得注意的是,对于同一个元素的同一个事件,注册同一个 handler ,jQuery 可注册多次。 function btnHandler() { console.log("btn clicked!"); } $j('#btnok').bind('click', btnHandler); $j('#btnok').click(btnHandler); 在点击了元素 btnok 后,如上代码会有连续两次输出。 对于同一个元素、同一个事件,用不同的 handler ,当然可以注册多次。 function btnHandler() { console.log("btn clicked!"); } function btnHandler1() { console.log("btn clicked 1!"); } $j('#btnok').bind('click', btnHandler); $j('#btnok').click(btnHandler1); 移除事件绑定处理过程 btnHandler 用如下语句: $j('#btnok').unbind('click', btnHandler); 4、事件冒泡 使用场景,比如有时候,需要对链接进行点击事件处理,并且不想让它进入链接 href 属性指的目标页面,而是想让它有别的操作。 Protoype $('link').observe('click', function(event){ console.log(this); //输出 link 元素 console.log(this.readAttribute('href')); event.stop(); }); jQuery: $j('#link').click(function(event){ console.log(this); //输出空, event.target 才是 html 元素对象 console.log($j(event.target).attr('href')); //用 $j 转化成为 jQuery 对象才能调用 attr 方法 event.preventDefault(); }); 在如上代码中,点击了链接之后,不会被重定向到目标页面。而是执行完输出之后直接停止。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |