Sizzle:开源JS选择器，如何自定义选择器
早上看了百度泛用户体验博客的博文初探 jQuery 的 Sizzle 选择器，让我对Sizzle选择器的知识又更加地深入了解。之前我就知道jQuery中有一个开源的Sizzle选择器程序，可以独立于jQuery单独使用。而在jQuery中使用到的各种强大的选择器都是通过Sizzle来解析返回值的。
一、Sizzle代码及注册：
在jQuery1.42版本中，Sizzle代码位于 2624行 至 3688行。相比单独的Sizzle.js，在jQuery框架中多了几行代码，将Sizzle注册到jQuery中：
单独的Sizzle.js可以到Github:http://github.com/jeresig/sizzle/blob/master/sizzle.js查看。
二、’:header’的用处：
就在我阅读Sizzle.js的源代码时，发现了’:header’选择器，代码如下（位于3132-3134行）：
1 2 3 | header: function(elem){ return /h\d/i.test( elem.nodeName ); } |
这个选择器在正常的CHM API文档中没有给出，估计大家也很少用到过（我自己就没用过）。它的用处是匹配（h1-h6)标题标签，知道有这个选择器了，以后工作中也要多多应用才是。
使用方法：
1 | $(':header').css('...', '...'); |
更多’:header’相关请阅读：http://api.jquery.com/header-selector/
三、如何自定义选择器：
Sizzle中给出了很多的选择器，那么我们也可以自己定义自己所需的选择器，代码如下：
html实例代码：
1 2 3 | <div id="box">
<span>找到我</span>
</div> |
1 2 3 4 5 6 7 8 9 | jQuery(function($) { $.extend($.expr[':'], { hasSpan : function(e) { return $(e).find('span').length > 0; } }); alert($('#box:hasSpan').html()); //输出：<span>找到我</span> }); |
四、附上百度博客的Sizzle选择器流程图：
点击查看大图：
John很强大，感谢他让我学习到如此美妙和优雅的代码。
- 上一篇: 资讯:2010年08月编程语言排行榜
- 下一篇: 示例:Selectbox模拟实现效果
其实操作dom的话，我更关注的这个玩意的性能如何呀？？
你速度也忒快了点吧！
话说，阿里前天给我发面试邮件通知，昨天给我面试电话通知，被我拒绝了！暂时没有去杭州发展的意愿。。。
没用到过…一脸无知地飘过~~
暂时只关注如何操作DOM，不关注性能
我现在比较关注性能！！
受教了！！收藏起来！
暂时用不了 有点复杂
好好收藏 呵呵。。。
书香阁来留个脚丫 以后常来往哈
好的，多多来往！
偶又来了 呵呵。。。
呵呵，兄弟，最好别去，去了做b2b的前端你会郁闷的
还好我没打算没杭州发展！！
此文被鉴定为技术类文章，完毕
目前Sizzle应该是最广泛应用的一种选择器了
链接已经加上 谢谢 多多交流
你的链接也已添加！
谢谢博主分享，受益了
好好收藏 呵呵
可以的，挺好的文章
对Sizzle选择器的知识又更加地深入了解
学习中
不错，学习学习
确实是不错～～～
美好的时光，我们一起度过
学习了。我也是技术博客，刚开的，呵呵。
This is a very interesting point of view. Your blog is refreshing, but I wish one could find more content, though. I am looking forward to reading more from you. Keep up the good work. thanks.
学习了。不错
确实是不错～～～～～～
学习
恩啊，想博主取经来了
这个貌似已经加到JQUERY1.4.4中了~~~