强悍的jQuery选择器

2007-12-02 19:07:00 / Front-End Programming / 4 comments

周四在公司加班到近凌晨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不行。

Comments

TT
TT over 4 years

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

Felix
Felix over 4 years

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

Joson
Joson over 2 years

唉, 强大的容错性在调试的时候才痛苦...

丁宇
丁宇 over 2 years

@Joson 怎么会?

Leave a comment