首页 > JavaScript > jQuery事件,扣动扳机(一)
2009四月14

jQuery事件,扣动扳机(一)

jQuery的工厂函数(就是“$()”啦~)有一种简写方式,初看之下感觉很开心,因为可以少写几个单词,我总是很懒。

可是,头和我们说过一句话,就是

写出来的代码是给人来阅读维护的,不是机器。代码写的再烂,计算机也可以看懂,但是人不行,所以代码要有逻辑性

这句话我会一直记着,在我编程的整个生涯中。

所以我不主张使用这种缩写的方法,但是了解一下还是有必要的,否则你可能真的看不懂别人的代码了。

//全写
$(document).ready(function(){

});
//简写
$().ready(function(){

});

啥?你说这还不够简单?看来你比我还懒,好吧,最简单的写法是这样的

//最简单的写法
$(function(){

});

当触发任何事件处理程序时,关键字this引用的都是携带相应行为的DOM元素。通过在事件处理程序中使用$(this),可以为相应的元素创建一个jQuery对象,然后就如同使用CSS选择符找到该元素一样对它进行操作。

这段话很明确的说出了this与$(this)的区别,即前者为DOM元素,后者为jQuery对象。

所以也只有后者才可以使用jQuery提供的一些函数及功能(详见其API

书中介绍的“事件冒泡”,和“事件捕获”我会在后面的文章来介绍及回忆,否则这一节未免太长了些,呵 :smile:

我们知道,人类一直是在模仿的,我也是,总是抄别人的东西,(我感觉抄这个词最恰当 :mrgreen: ),那么在jQuery中怎么模仿呢?

呵,有办法,那就是trigger()函数。

<a href="#" class="a_link">hover me </a>
<br/><br/>
<input type="button" class="button" value="click me alert" onclick="javascript:alert('Welcome to 小小子');" />

呵,加两个换行可以避免一会儿您认为您点到了按钮上面,

$(document).ready(function(){
    $("a.a_link").click(function(){
        $(".button").trigger('click');
    });
});

这段代码的意思是,当DOM加载进来的之后,如果您点击类名为a_link的a标签,那么将模拟触发类名为button的按钮的点击操作

呸,真绕嘴 :twisted: 。而模拟的意思其实就是“相当于”,呵。所以这么说您就理解了

即您点击这个a标签,相当于您点击这个按钮一样,那是一样一样一样滴~~

呼,可累死我了。 :razz: ,今天还写不写那个“事件冒泡”,和“事件捕获”了呢?嗯。这是个问题 :idea:

文章作者:simaopig
本文地址:http://www.xiaoxiaozi.com/2009/04/14/156/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

6 Responses to “jQuery事件,扣动扳机(一)”

  1. #1 LAONB 回复 | 引用 Post:2009-04-14 22:23

    不错,学习了,要是能做个DEMO观看效果就更好了 :roll:

    [回复]

  2. #2 simaopig 回复 | 引用 Post:2009-04-14 22:25

    @LAONB
    呵,欢迎捧场,不过我不太习惯在自己的站上做DEMO。
    不过我可以把源码完整发出来供大家下载。
    主要是看大家这个需求高不高吧。呵。 :smile:

    [回复]

  3. #3 wulinfo 回复 | 引用 Post:2009-04-15 01:31

    简约就意味着兼用差

    [回复]

  4. #4 simaopig 回复 | 引用 Post:2009-04-15 09:37

    @wulinfo
    呵呵,这个简单,但是不简约。

    [回复]

  5. #5 wulinfo 回复 | 引用 Post:2009-04-15 14:01

    jQuery相对JS就是简化了,精简了,jQuery确实是好东西,真的要好好学习一下才行

    [回复]

  6. #6 simaopig 回复 | 引用 Post:2009-04-15 14:06

    @wulinfo
    其实我喜欢jQuery主要是因为跨兼容性相当好,而且AJAX很方便。 :wink:

    [回复]

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)