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

转载 2012年03月31日 14:22:42

此文摘自《锋利的jQuery》,另外添加了一点自己的东西
选择器中的空格是不容忽视的,多一个空格或少一个空格也许得到的结果会截然不同的。下面来看一个例子。

先构建如下的HTML代码:

1 <div class="test">
2 <div style="display:none;">Jquery教程</div>
3 <div style="display:none;">Jquery学习</div>
4 <div style="display:none;">Jquery插件</div>
5 <div class="test" style="display:none;">PHP学习</div>
6 </div>
7 <div class="test" style="display:none;">Jquery插件教程</div>
8 <div class="test" style="display:none;">Jquery插件学习</div>

jQuery代码:

1 var $test_a = $(".test :hidden");//带空格的jQuery选择器
2 var $test_b = $(".test:hidden");//不带空格的jQuery选择器
3 var len_a = $test_a.length;
4 var len_b = $test_b.length;
5 alert("带空格的jQuery选择器选出的jQuery元素是:"+len_a+"个");//输出为4个
6 alert("不带空格的jQuery选择器选出的jQuery元素是:"+len_b+"个");//输出为3个

之所以会出现不同的结果,这就是后代选择器和过滤选择器的不同了

1 var $test_a = $(".test :hidden");//带空格的jQuery选择器

上面这段代码是选取class为“test”的元素里面的隐藏元素。(后代选择器)

1 var $test_b = $(".test:hidden");//不带空格的jQuery选择器

这上面的代码则是选取隐藏的class为“test”的元素

注意:
有的选择器的用法,必须是空格,如果不带空格的话,那就取不到元素,比如:

1 $("select:selected").length;//不管任何时候,这个选择器都取不到元素,这个length必然是0
2 $("select :selected");//这样才是正确的

有的选择器的用法,必须不带空格,如果带空格的话,那就取不到元素,比如:

1 $("input :checked").length;//不管任何时候,这个选择器都取不到元素,这个length必然是0
2 $("input:checked");//这样才是正确的

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

此文摘自《锋利的jQuery》,另外添加了一点自己的东西 选择器中的空格是不容忽视的,多一个空格或少一个空格也许得到的结果会截然不同的。下面来看一个例子。 先构建如下的HTML代码: Jquery...
  • writtyflame
  • writtyflame
  • 2013年08月24日 21:44
  • 792

jquery选择器中的空格与大于号>、加号+与波浪号~的区别

jquery选择器中的空格与大于号>、加号+与波浪号~的区别以及使用
  • hsd2012
  • hsd2012
  • 2016年06月24日 10:17
  • 6503

JQuery里的子元素过滤选择器,加空格与不加空格的区别

最近学习jquery,发现它的选择器的写法与css的基本语法很像,加不加空格差别很大。 $(“:first-child)——:first只是返回单个元素,而first-child选择符将为每个父元素...
  • u010552788
  • u010552788
  • 2016年03月08日 14:25
  • 1946

jQuery中选择器空格注意事项

jQuery以它强大的选择器,给开发带来了极大的方便,有敲空格习惯的程序猿很容易在这这里栽跟头,jQuery中选择器中的空格是不容忽视的,下面是《锋利的jQuery》中的例子: ...
  • Kindle_code
  • Kindle_code
  • 2016年08月26日 20:26
  • 387

jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)备忘

转自:http://hi.baidu.com/vguishjxghimpxs/item/e893c42510a1c5102a0f1c54 在選擇器里面幾種符號 1,(逗號) 2 (空格) 3.(英文...
  • chelen_jak
  • chelen_jak
  • 2014年03月03日 16:56
  • 7883

jquery选择器中含有不含有空格的问题

在《jquery权威指南》中看到一个很有趣的例子,在jQuery中,含有或不含有空格的DOM对象是不一样的 书中源码 js $(function(){ var $objTmp0=$(".my...
  • acinblue
  • acinblue
  • 2017年01月06日 09:45
  • 845

选择器中含有特殊符号的注意事项

1.选择器中含有“.”、“#”、“(”或“]”等特殊字符 根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理出...
  • rdman
  • rdman
  • 2014年06月06日 11:33
  • 410

CSS选择器中的空格的不同作用

css的规则里总有不同的关系,一个空格也有不同的用法,不同的地方用空格可以有不同的效果,这就值得很多朋友们注意了,不要因为一个小小的空格到时连错在哪里都没发现.........
  • shakawjh
  • shakawjh
  • 2014年07月16日 13:07
  • 1947

jQuery各种选择器、节点、事件,删除、复制、插入元素的使用方法总结

《jQuery全面提速》笔记(2015年12月19日)  (1)表单域选择器     :input选择器,  用于选择所有input、textarea、select和button元素, $(":inp...
  • u012767607
  • u012767607
  • 2017年03月13日 21:00
  • 558

jquery 类和标签的空格

关于jquery选择器的问题 举报|2012-05-15 21:19轻轻的影子 | 分类:JavaScript | 浏览93次 我想为a标签中类名为more的应用点击事件,于是写了 $('...
  • bingqingsuimeng
  • bingqingsuimeng
  • 2014年09月01日 15:59
  • 1716
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery选择器中含有空格的注意事项
举报原因:
原因补充:

(最多只允许输入30个字)