贝网博客

我的分类
流水记事
源码下载
Asp.net
其它
数据库
Javascript
.Net技术
我的相册
友情链接
博客园
CSDN博客
Start0
最新回复
嗷嗷的cCC
fasdfasdf
[:..
lz这个东西好厉害,我..
哈哈,好照片
不错,以前一直用黄色..
终于找到支持ff的修正..
终于找到支持ff的修正..
新鲜性
看看,试试,好不好使。
Javascript 日志列表    
本站一共有博客83条,当前显示5条
 发表于:2012-11-22 15:35:37

51CTO推荐专题:jQuery从入门到精通

DOM树

首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:

jQuery

 

事件冒泡(又称事件传播)

当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

  1. $('a').bind('click', function() { alert("That tickles!") });

因此一个单击操作会触发alert函数的执行。

jQuery

click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。

jQuery

在操纵DOM的语境中,document是根节点。

现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

.bind()

  1. $('a').bind('click', function() { alert("That tickles!") });

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live()

  1. $('a').live('click', function() { alert("That tickles!") });

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:

  1. $('a', $('#container')[0]).live(...);

.delegate()

  1. $('#container').delegate('a', 'click', function() { alert("That tickles!") });

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。

为什么.delegate()要比.live()好用

基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

  1. $('a').live('click', function() { blah() });
  2. // 或者
  3. $(document).delegate('a', 'click', function() { blah() });

速度

后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未“知道”被链接的方法将会是.live()。

而另一方面,delegate方法仅需要查找并存储$(document)元素。

一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力

live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。

仅支持CSS选择器

最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。

欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。

更新:感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

为什么选择.live()或.delegate()而不是.bind()

毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:

Ÿ 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。

Ÿ 如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

Ÿ 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

停止传播

最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:

  1. $('a').bind('click', function(e) {
  2. e.preventDefault();
  3. // 或者
  4. e.stopPropagation();
  5. });

不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。

转载自:http://developer.51cto.com/art/201103/249694.htm

使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,当点击一个按钮时,此按钮所绑定的事件会并执行n遍。
你可以使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。这样上面的情况就不会发生了。

另外,一个曲线使用stopPropagation的方案,在父节点的事件里,判断e.target,如果是子节点,直接return

回复:1  发表于:2012-06-17 08:44:08
更新于:2012-07-13 15:32:29

今天淘宝又开始抢红包了,下面是抢红包代码,同样也是在Firefox或Chrome的控制台执行,IE8的控制台也可以
var btn = document.getElementById('award_btn');
function alert(a){}
setInterval(function () {btn.click();}, 2000);

抢红包网页:http://www.taobao.com/go/act/sale/summer2012-yr.php

 

 

如果是ie浏览器,先打开网页:http://www.tmall.com/
然后在地址栏里输入:javascript:setInterval(function(){document.getElementById("J_Lucky").click();},100);void(0);
ok了,让它自己慢慢抽去吧,只不过中奖率太低,我昨天只自动抽到10元,上面的代码是每秒抽10次

也可以用Firefox,安装上Firebug插件,在Firebug里的脚本调试器里输入脚本:
setInterval(function(){document.getElementById("J_Lucky").click();},100);
也可以自动抽哦,呵呵

主要是看到网上很多兄弟写一堆代码,太复杂了,哥提供个简单版本的,呵呵

上面的代码是昨天的,看来淘宝今天加班在修改这个页面,今天最新的抢红包脚本修改为:
setInterval(function(){document.getElementById("J_Lucky").nextSibling.click();},100);

回复:3  发表于:2010-12-14 14:11:45
更新于:2011-11-18 10:34:06

 项目中测试出一个bug,就是在ie6下,下面的代码中的a标签,点击将没有任何反应:
<a href="b.htm" target="frm">xxx</a><script type="text/javascript">document.domain="beinet.cn";</script>
<iframe name="frm"></iframe>

而非常奇怪的是,在公司的电脑中,有的IE6能正常打开链接,有的IE6不能打开链接,使用IETester模拟的IE6也不能打开链接,在IE7,IE8或Firefox等均可以打开链接

经过反复的测试,发现是domain设置的问题,删除domain的设置就正常了,但是这个domain的设置是为了跨多个子域,不能删除,
经过测试,找到了另一个解决方案:创建一个html,里面就一句:<script type="text/javascript">document.domain="beinet.cn";</script>,然后上面的iframe的src指向这个html,也能正常,但是如果iframe所在的页面如果没设置domain,或设置的不一样,也会造成target无效

估计不能下载的ie6是有什么特殊设置吧,问题也一直没有搞清楚到底是什么特殊设置造成的,而IETester没有设置也不能下载。

 发表于:2010-09-01 11:27:58
更新于:2011-11-18 10:31:18
讲述了Javascript中的String.replace方法,replaceText使用函数里的参数说明
并有实例说明
回复:1  发表于:2011-01-29 16:52:22
更新于:2011-11-18 10:25:34

今天在开发中,遇到一点小问题,如下面的代码,目的是每秒弹出一个警告,第一次弹出1,第二次弹出2……:
function test() {
    for (var i = 0; i < 3; i++) {
        var a = i;
        setTimeout(function() {  alert(a); }, 100);
    }
}
运行结果,是弹出了3个2,跟我想象的完全不同,究其原因,是因为f这个匿名函数在整个循环结束后,再运行的,而循环结束时a的值已经递增到2了,在循环结束后这个a变量没有销毁,造成了这个结果,解决方法,就是把for循环里加一个匿名函数闭包,使a在当前循环结束时销毁即可:
写法1:
function test() {
    for (var i = 0; i < 3; i++) {
        (function() {
            var a = i;
            setTimeout(function() {  alert(a); }, 100);
        })();
    }
}
写法2:
function test() {
    for (var i = 0; i < 3; i++) {
        (function(a){setTimeout(function(){alert(a)}, 100);})(i);
    }
}
上面这两段代码成功输出了:0,1,2

btw1:上面出错的原因是在修改 在页面加载完成后,再显示广告 的问题时出现的,在onload里通过循环去加载广告内容,并显示在div里:
var divs = ["#a1", "#a2"];
var urls = ["t.aspx?flg=81959", "t.aspx?flg=aa"];

function adLoad() {
    for (var i = 0; i < divs.length; i++) {
        (function() {
            var url = urls[i];
            var div = divs[i];

            jQuery.get(url, null, function(data) {
                jQuery(div).html(data);
            });
        })();
    }
}

btw2:立即执行匿名函数的方法有下面3种:
(function(){alert(1);})();
(function(){alert(2);}());
void function(){alert(3);}();


©2008 Beinet.cn 版权所有