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

选择器中的空格也是不容忽视的,多一个空格和少一个空格会得到不同结果

例子如下:

<div class="test">
    <div style="display:none;">aadiv>
    <div style="display:none;">bbdiv>
    <div style="display:none;">ccdiv>
    <div class="test" style="display:none;">dddiv>
div>

<div class="test" style="display:none;">eediv>
<div class="test" style="display:none;">ffdiv>

使用如下的JQuery选择器分别获取它们

var $t_a = $(".test :hidden"); //打空格的选择器
var $t_b = $(".test:hidden");  //不带空格的选择器
var len_a = $t_a.length;
var len_b = $t_b.length;
console.log(len_a) // 输出 4
console.log(len_b) // 输出 3

$(".test :hidden") 是选取样式为test的元素下的所有隐藏元素 (带空格)

$(".test:hidden") 是选取样式为test的元素的隐藏元素 (不带空格)

注意区分 空格 和 > 的区别
$("div span") 选取

里面所有的元素
$("div > span") 选取
元素下元素名是的子元素

你可能感兴趣的:(jQuery)