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

发表于 2010 年 8 月 9 日由 admin

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选择器中空格问题不容忽视，所以在开发过程中一定要理清思路，看看是否需要加空格。

《jQuery选择器中空格的注意事项》上有 45 条评论

coozd 在 2010 年 8 月 10 日上午 9:53 说道：

低调的飘过

回复 ↓
彩铃设置在 2010 年 8 月 11 日上午 10:36 说道：

学习下，jQuery刚好不会

回复 ↓
济南婚纱摄影在 2010 年 8 月 11 日下午 2:38 说道：

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

回复 ↓
减肥药排行榜在 2010 年 8 月 12 日下午 1:27 说道：

来学习了！！！

回复 ↓
Affliction Jeans 在 2010 年 8 月 12 日下午 11:46 说道：

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

回复 ↓
戒烟产品在 2010 年 8 月 14 日下午 4:07 说道：

写的不错，哈哈，博主文笔不错，做网站多久了？呵呵！！！！

回复 ↓
- 依洋在 2010 年 8 月 14 日下午 7:24 说道：
  
  谢谢，一年半了，不过站点还不是很完善，一点一点来吧
  
  回复 ↓
Firm 在 2010 年 8 月 14 日下午 4:09 说道：

一般是放进去测试下

回复 ↓
- 依洋在 2010 年 8 月 14 日下午 7:25 说道：
  
  是个测试的好办法
  
  回复 ↓
运动鞋批发在 2010 年 8 月 15 日下午 9:06 说道：

写的不错，哈哈，博主文笔不错，做网站多久了？呵呵！！！！

回复 ↓
捷易通在 2010 年 8 月 16 日下午 1:44 说道：

好，支持一个

回复 ↓
馋猫零食在 2010 年 8 月 16 日下午 1:45 说道：

留下我的足迹

回复 ↓
上海家具在 2010 年 8 月 17 日下午 9:53 说道：

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

回复 ↓
美瞳隐形眼镜在 2010 年 8 月 17 日下午 11:18 说道：

快睡觉了，再来看看有更新没

回复 ↓
- 依洋在 2010 年 8 月 18 日上午 12:39 说道：
  
  谢谢你的关注，最近忙的要死！不过这里会尽快更新的！
  
  回复 ↓
苏囧在 2010 年 8 月 18 日上午 9:52 说道：

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

回复 ↓
- 依洋在 2010 年 8 月 18 日上午 9:59 说道：
  
  改好了
  
  回复 ↓
多动症在 2010 年 8 月 18 日上午 10:17 说道：

不是很懂

回复 ↓
yesureadmin 在 2010 年 8 月 18 日下午 4:37 说道：

又是一个牛人BLOG以后常来

回复 ↓
- 依洋在 2010 年 8 月 18 日下午 6:34 说道：
  
  谢谢
  
  回复 ↓
栅栏在 2010 年 8 月 19 日上午 1:26 说道：

有点道理

回复 ↓
jszby 在 2010 年 8 月 19 日下午 9:23 说道：

一看就知道博主是一个很不错的程序员。欢迎博主回访。

回复 ↓
广州打折网在 2010 年 8 月 19 日下午 11:33 说道：

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

回复 ↓
无轨门在 2010 年 8 月 21 日下午 9:09 说道：

人才啊

回复 ↓
公司简介在 2010 年 8 月 22 日下午 10:15 说道：

确实是不错～～～～～～

回复 ↓
祛斑产品哪个好在 2010 年 8 月 23 日上午 9:32 说道：

调试比写代码还累人

回复 ↓
减肥药排行榜在 2010 年 8 月 24 日上午 9:24 说道：

呵呵，博主写得很精彩！来看看。

回复 ↓
学夫子在 2010 年 8 月 25 日下午 4:30 说道：

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

回复 ↓
淘宝网耐克在 2010 年 8 月 26 日上午 1:17 说道：

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

回复 ↓
拼客在 2010 年 8 月 26 日上午 11:27 说道：

不错的网站

回复 ↓
the Success Ladder 在 2010 年 8 月 26 日下午 3:42 说道：

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.

回复 ↓
贝泉在 2010 年 8 月 26 日下午 8:37 说道：

飘过，支持一下

回复 ↓
每日一狗在 2010 年 8 月 28 日上午 11:43 说道：

技术问题，很头痛……

回复 ↓
wp主题商店在 2010 年 8 月 30 日上午 11:06 说道：

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

回复 ↓
最有效的减肥药在 2010 年 8 月 31 日下午 12:42 说道：

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

回复 ↓
减肥药排行榜在 2010 年 8 月 31 日下午 9:07 说道：

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

回复 ↓
如何减肥在 2010 年 9 月 1 日下午 8:47 说道：

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

回复 ↓
ps 在 2010 年 9 月 2 日上午 8:09 说道：

非常强悍。。

回复 ↓
德克士在 2010 年 9 月 2 日上午 11:14 说道：

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

回复 ↓
去痘印面膜在 2010 年 9 月 8 日下午 5:12 说道：

很不错又学习了

回复 ↓
nikeairmax 在 2010 年 9 月 17 日下午 4:16 说道：

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

回复 ↓
ADD~`` 在 2010 年 9 月 22 日下午 5:29 说道：

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

博主中秋快乐啊

回复 ↓
- 依洋在 2010 年 9 月 22 日下午 10:09 说道：
  
  中秋快乐
  
  回复 ↓
最有效的减肥药排行榜在 2010 年 10 月 26 日上午 8:20 说道：

太强大了

回复 ↓
绿色减肥产品在 2010 年 10 月 26 日上午 8:21 说道：

哈哈支持

回复 ↓

发表评论取消回复