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. USACO 6.5 章节 世界上本没有龙 屠龙的人多了也便有了

    All Latin Squares 题目大意 n x n矩阵(n=2->7) 第一行1 2 3 4 5 ..N 每行每列,1-N各出现一次,求总方案数 题解 n最大为7 显然打表 写了个先数值后 ...

  2. Deepin环境下安装科学研究版Python和Pytorch--防网卡

    Deepin环境下安装科学研究版Python和Pytorch--防网卡 由于本教程所引起的一切损失作者概不负责,本教程不使用pip和conda命令,因此下载好包后配合U盘可以给某个机器进行离线安装 · ...

  3. spark streaming 笔记

    spark streaming项目 学习笔记 为什么要flume+kafka? 生成数据有高峰与低峰,如果直接高峰数据过来flume+spark/storm,实时处理容易处理不过来,扛不住压力.而选用 ...

  4. 从FreeBSD里面看到的网络协议列表，感觉可以保存一下

    # # Internet protocols # # $FreeBSD$ # from: @(#)protocols 5.1 (Berkeley) 4/17/89 # # See also http: ...

  5. git pull的时候发生冲突的解决方法之“error: Your local changes to the following files would be overwritten by merge”

    今天在使用git pull 命令的时候发生了以下报错 目前git的报错提示已经相关友好了,可以直观的发现,这里可以通过commit的方式解决这个冲突问题,但还是想看看其他大佬是怎么解决这类问题的 在网 ...

  6. bootstrap.yml

    spring: jpa: properties: hibernate.enable_lazy_load_no_trans: true application: name: paycore cloud: ...

  7. 过滤器为JSP文件生成静态页面

    用过滤器为JSP文件生成静态页面,这只是一个简单的实例,客户端浏览器第一次请求JSP页面时,服务器将生成对应的HTML文件,以后访问同一JSP文件,将转为访问生成的HTML文件.一.过滤器 packa ...

  8. C语言的文件操作

    在操作系统中,为了统一对各种硬件的操作,简化接口,不同的硬件设备也被看成一个文件.对于这些文件的操作,等于是对普通文件的操作.例如,通常把显示器称为标准输出文件,printf就是想这个文件输出,把键盘 ...

  9. Python3.5-20190506-廖老师-自我笔记函数

    函数就是将你的代码封装起来,可以重复利用.不需要每次就写重复的代码 def 函数名(位置参数,默认参数=10,可变参数,关键字参数): 代码块 return 值 定义函数时,需要确定函数名和参数个数: ...

  10. 前端导出excel表格

    前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...