强悍的jQuery选择器

| 2 条评论 2007-12-02 11:02:00

周四在公司加班到近凌晨1点,期间在和开发部门的同事焦头烂额的编写js代码时,深深被jQuery强大的选择器所折服。

1、选择不存在的HTML对象时,jQuery不会报错

这点我早就深有体会。在此前使用的Prototype中,选择HTML对象前必须要保证这个对象的合法性,如果这个对象不存在,Prototype就会报错。这听起来很正常,但在jQuery中这种检查完全没必要,因为当一个对象不存在时,它会自动跳过那段代码!这样用起来非常方便。

2、parents()、children()和find()

利用parents()和children()可以很快捷地找到一个对象的父对象和子对象,但在实际使用时,常常遇到使用这两个函数编写好的js代码无法重用的问题,这是因为js代码是按照现有HTML的层级关系编写的,一旦HTML中的层级关系发生变化,js就失效了。幸好有find()这个函数,它可以让你完全不顾上下文的关系,而选择你想要选择的对象。

比如我想在用户点链接的时候,把如下代码中span的内容打印出来:

<div id="wrapper">
<p><a id="testLink">This is a test link.</a></p>
<div>
<p><span>Some text</span></p>
</div>
</div>

如果用parents()和children():

$('#testLink').click(function() { alert($(this).parents().parents().children().children().children('span').html()); return false; });

如果用find():

$('#testLink').click(function() { alert($(this).parents().parents().find('span').html()); return false; });

这看起来好像没什么区别?别急,find()还可以这样用:

$('#testLink').click(function() { alert($('').find('span').html()); return false; });

这一点当时就把我们给震了!虽然实际编写的代码比这个要复杂的多,但我们怎么也没想到前面为空时find()依然有效!我估计此时find('span')就相当于$('span')。

最后就是,有谁知道到底用什么工具可以给jQuery代码生成注释文档?之前提的JSDoc不行。

    
  1. TT 2007-12-03 09:58:29

    怎么支付宝做设计要求自己能够实现么,太强大了

  2. Felix 2007-12-03 22:33:16

    这个……不是绝对的。不过我个人认为在互联网公司的设计部,起码要会HTML吧。

有什么要说的,尽管来

关于

丁宇(Felix Ding),电脑Geek,狂热的爱书和爱乐分子。现就职于上海的一家设计工作室。

我的Email:

订阅到RSS