jQuery选择器的空格问题，看似很小，但是差之毫厘谬以千里，让人很是恼火，《锋利的jQuery》书中有个经典的例子，我这里也拷贝下来，再加点自己的想法

<html>

<head>

<title>选择器空格的问题</title>

<script type="text/javascript" src="jquery-1.3.1.js"></script>

<script type="text/javascript">

$(function()

{

alert("带空格的选择器的长度是："+$(".test   :hidden").length);

alert("不带空格的选择器的长度是："+$(".test:hidden").length);

});

</script>

</head>

<body>

<div class="test">

<div style="display:none;">我是内部div</div>

<div style="display:none;">我是内部div</div>

<div style="display:none;">我是内部div</div>

<div class="test" style="display:none;">我是内部div</div>

</div>

<div class="test" style="display:none;">我是外部div</div>

<div class="test" style="display:none;">我是外部div</div>

</body>

</html>

对于上边的这两行来说：

“alert("带空格的选择器的长度是："+$(".test    :hidden").length);”的弹出结果为4

“alert("不带空格的选择器的长度是："+$(".test:hidden").length);”的弹出结果为3

对于过滤选择器加上了空格的来说，它所获取的是其子元素的过滤，所以上边的例子是选取class为test的元素的子元素的隐藏元素。

而对于过滤选择器没有加上空格的来说，它所获取的是其自身元素的过滤，所以上边的例子选取隐藏的class为test的元素。

其实在表单选择器中也有这种情况：

表单对象属性过滤选择器深究：

#form1 :text   <=== >  input:text

前面有空格，后面没空格，按照上面红色两行的推理也可以成立，假设这里只有一个表单，#form1是form标签的id，那么它后面的 :text就要加空格，因为是选择它的子元素

而input:text中间就不能有标签，因为选择的就是它本身的属性

所以空格问题看似没有规律，其实是有迹可循的，jQuery选择器的规律和CSS一脉相承，所以学好了CSS的选择器，jQuery也不在话下！

jQuery选择器中空格的问题再探究的更多相关文章

  1. jquery选择器中两个class是什么意思？

    jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...

  2. jQuery选择器中的特殊符号和关键字

    一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HT ...

  3. 处理jQuery选择器中的特殊符号，如（、#等

    前几天解决一个外网问题,客服反馈页面数据加载不出来,首先看一下服务端日志也没报错异常,自己测试了一下,在chrome的Console发现有js报错,原来是js报错导致的数据加载不出来. 调试了一番,发 ...

  4. jQuery选择器 大于 空格 波浪线 加号

    JQuery选择器 大于 空格 波浪线 加号的区别 元素遍历 符号 说明 空格 $(‘parent child’)表示获取parent下的所有的child节点(所有的子孙). 大于号 $(‘paren ...

  5. jQuery选择器中的空格问题

    前几天就遇到过这样的问题,明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色,反复试了还是没改变.还问了度娘还是没找到原因所在(当时问题描述的 ...

  6. JQuery选择器中的一些注意事项

    1. 选择器中含有特殊符号的注意事项 1. 1 选择器中含有",","#","("或"]"等特殊字符 根据w3c的规定, ...

  7. jquery 选择器中含有空格注意

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery选择器中的find和空格，children和>的区别、及父节点兄弟节点，还有判断是否存在的写法

     一.find和空格,children和>及其它的区别   空格:$('parent childchild')表示获取parent下的所有的childchild节点(所有的子孙). 等效成  = ...

  9. jquery选择器中中>和空格的区别

    空格:$('parent childchild')表示获取parent下的所有的childchild节点 大于号:$('parent > childchild')表示获取parent下的所有下一 ...

随机推荐

  1. UVA1442_Cave

    Cave 大致题意: 一个洞穴,已经i位置地面高度和顶的高度,要求在这个洞穴里面储蓄尽可能多的燃料,而且任何位置燃料不能碰到顶点 思路: 先从左往右扫描一下得出每一个点燃料能达到的最大高度,然后右边一 ...

  2. JVM系列（一） — Jvm内存模型

    总结自<深入理解java虚拟机> 很多博客在讲虚拟机内存模型时,比较宽泛或者粗化,甚者,不准确,以下是我的一个笔记照片 运行时数据区可以分为两部分:线程共享区和线程私有区 一.线程共享区 ...

  3. 二、python基础之列表、元组

    一.列表 列表的概念: 列表由一系列按特定顺序排列的元素组成.你可以创建包含字母表中所有字母.数字0-9或所有家庭成员姓名的列表:也可以将任何东西加入列表中,其中的元素之间没有任何关系.鉴于列表通常包 ...

  4. 47-python基础-python3-字符串-常用字符串方法(五)-rjust()-ljust()-center()

    6-rjust().ljust()和 center()方法对齐文本 rjust()和 ljust()字符串方法返回调用它们的字符串的填充版本,默认通过插入空格来对齐文本. rjust()和 ljust ...

  5. 浏览器HTML自带懒加载技术

    对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行: 1.加载初始的 HTML 响应内容 2.加载懒加载库 3.加载图片 假如浏览器能直接支持 ...

  6. java synchronized的四种用法

    一 修饰方法 Synchronized修饰一个方法很简单,就是在方法的前面加synchronized,synchronized修饰方法和修饰一个代码块类似,只是作用范围不一样,修饰代码块是大括号括起来 ...

  7. 【记录】jquery动态控制div隐藏或者显示

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id").i ...

  8. until 循环语句

  9. Codeforces 1188B 式子转化

    思路:看到(a + b)想到乘上(a - b)变成平方差展开(并没有想到2333), 两边同时乘上a - b, 最后式子转化成了a ^ 4 - ka = b ^ 4 - kb,剩下的就水到渠成了. 0 ...

  10. 力扣——single number （只出现一次的数字） python实现

    题目描述: 中文: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 英 ...