jQuery选择器中空格的注意事项

星期一,2010 八 9 15:20:58

jQuery中选择器中的空格一直都觉得是一个不起眼的小问题,可往往是小问题会给我们的结果带来很大的影响,多一个空格和少一个空格也许会得到截然不同的结果。所以空格问题不容忽视!

首先来解释一下选择器里带空格是什么意思,如果选择器中两个元素之间用空格隔开,则表示为前一个元素的后代元素。比如$(‘div :hidden’),表示的是div里所有的隐藏元素,这个隐藏元素可以是div的子元素,也可以是div子元素的子元素。如果选择器中没有空格的话,表示一个并且的关系,如果说$(‘div:hidden’),表示的是所有隐藏的div,这个就和元素的层次没有关系了!

下面看一个实例:HTML代码部分
<div>
<div style="display: none;">aa</div>
<div style="display: none;">bb</div>
<div style="display: none;">cc</div>
<div style="display: none;">dd</div>
</div>
<div style="display: none;">ee</div>
<div style="display: none;">ff</div>

jQuery部分
var $ta = $('.test :hidden'); //带空格的选择器表示class为test的元素中所有隐藏的元素,很明显结果是第一个div里所有的元素
var $tb = $('.test:hidden'); //不带空格的选择器,表示的是class为test并且是隐藏的元素,这里指的是后两个div以及第一个div中的最后一个子元素
alert($ta.length); //输出为4
alert($tb.length); // 输出为3

jQuery选择器中空格问题不容忽视,所以在开发过程中一定要理清思路,看看是否需要加空格。

相关文章导读

这篇文章已有 45 位网友发表了评论  

  1. coozd 说:

    低调的飘过

    [回复]

  2. 彩铃设置 说:

    学习下,jQuery刚好不会

    [回复]

  3. 博客弄的不错啊 背景很漂亮啊,比上次来看到的漂亮多了啊 加油啊 回踩济南婚纱摄影www.yadianshijue.com

    [回复]

  4. 博客不错啊。留个脚印再走。嘿嘿

    [回复]

  5. 戒烟产品 说:

    写的不错,哈哈,博主文笔不错,做网站多久了?呵呵!!!!

    [回复]

    依洋 回复:

    谢谢,一年半了,不过站点还不是很完善,一点一点来吧

    [回复]

  6. Firm 说:

    一般是放进去测试下

    [回复]

    依洋 回复:

    是个测试的好办法

    [回复]

  7. 写的不错,哈哈,博主文笔不错,做网站多久了?呵呵!!!!

    [回复]

  8. 捷易通 说:

    好,支持一个

    [回复]

  9. 上海家具 说:

    天上的云彩飘过,不明真相的围观群众路过,我从这里踩过!

    [回复]

  10. 快睡觉了,再来看看有更新没

    [回复]

    依洋 回复:

    谢谢你的关注,最近忙的要死!不过这里会尽快更新的!

    [回复]

  11. 苏囧 说:

    将我的链接修改为苏囧博客或者博客营销

    [回复]

    依洋 回复:

    改好了

    [回复]

  12. yesureadmin 说:

    又是一个牛人BLOG以后常来

    [回复]

    依洋 回复:

    谢谢

    [回复]

  13. 经常因为错写一个符号,调试半天是常有的事情.

    [回复]

  14. 公司简介 说:

    确实是不错~~~~~~

    [回复]

  15. 调试比写代码还累人

    [回复]

  16. 呵呵,博主写得很精彩!来看看。

    [回复]

  17. 学夫子 说:

    虽然是基本上都看不懂,但是还是需要支持地,呵呵

    [回复]

  18. 看文章 。en。。o(∩_∩)o 哈哈

    [回复]

  19. 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.

    [回复]

  20. 贝泉 说:

    飘过,支持一下

    [回复]

  21. 每日一狗 说:

    技术问题,很头痛……

    [回复]

  22. 主题风格不错,欢迎到我的论坛发表。http://www.alibibi.info
    主题交易

    [回复]

  23. WP应该出个插件,屏蔽下垃圾评论,博主的博客还好点,我的博客,整天都是垃圾评论,删除的手软啊.

    [回复]

  24. 哈哈,刚配了个8线程的CPU,高兴之余,来爽爽。

    [回复]

  25. 如何减肥 说:

    天天来学习,祝博主开心……

    [回复]

  26. ps 说:

    非常强悍。。

    [回复]

  27. 德克士 说:

    我来也,博主的博客还算干净,我那里都让垃圾评论充斥了。

    [回复]

  28. 很不错 又学习了

    [回复]

  29. nikeairmax 说:

    这也太麻烦了吧!我还是不整了!

    [回复]

  30. ADD~`` 说:

    学习了~以前也遇到过这种问题~~
    缺乏分析~只是纠结在问题上了 呵呵~

    博主中秋快乐啊

    [回复]

    依洋 回复:

    中秋快乐

    [回复]

发表新的评论



注意:
1、本站启用了审核机制,你的留言可能稍后才会显示,请不要重复提交,谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。