Jquery伪类选择器加与不加空格的区别
来源:互联网 发布:linux 开机挂载硬盘 编辑:程序博客网 时间:2024/05/23 19:58
在学习《锋利的jQuery》时,发现伪类选择器加不加空格得到的结果截然不同,特总结如下,个人观点,如有错误,欢迎指正:
目录
- 加空格的伪类选择器
- 不加空格的伪类选择器
- 原因及使用空格的总结
正文
本文使用的html代码如下:
<div class="one" id="one"> id为one,class为one的div <div class="mini">class为mini的div </div> </div> <div class="one" id="two" title="test"> id为one,class为one,title为test的div <div class="mini" title=other>class为mini,title为other的div</div> <div class="mini" title=test>class为mini,title为test的div</div> </div>
1、 加空格的伪类选择器
$('div.one :nth-child(2)').css("background","#bbffaa");
代码运行效果如下:
加空格表示:选择class为one的div内的第二个子元素
2、不加空格的伪类选择器
$('div.one:nth-child(2)').css("background","#bbffaa");
代码运行效果如下:
不加空格表示:选择class为one的div并且该div是其父元素下第二个子元素
3、原因及总结
之所以会出现上述不同的结果,就是由于后代选择器和过滤选择器的不同造成的:
- 伪类选择器前加空格:选择的是元素的后代子元素;
- 伪类选择器前不加空格:选择的是元素本身;
再看《锋利的jQuery》中提到的例子
$(".test :hidden");
//带空格的jQuery选择器
//选取class为“test”的元素内的隐藏子元素。(空格为后代选择器)
$(".test:hidden");
//不带空格的jQuery选择器
//选取class为“test”并且隐藏的元素本身
使用伪类选择器时,一定要注意空格的使用,加与不加空格结果会截然不同
使用如下伪类选择器(即 :nth-child()、:first-child、:last-child、:only-child)时,冒号前必须加空格才是子元素选择器
0 0
- Jquery伪类选择器加与不加空格的区别
- JQuery里的子元素过滤选择器,加空格与不加空格的区别
- jquery过滤选择器前加空格与不加空格的区别
- css中新增加的伪类选择器
- URL末尾加“/”与不加“/"的区别
- JavaScript函数加括号与不加括号的区别!
- grep中加单引号与不加引号的区别
- 正则表达式加^$与不加的区别
- new对象加括号与不加的区别
- 函数前加static与不加static的区别
- 关于路径前面加"/"与不加"/"的区别小记
- 【springmvc】@RequestParam详解以及加与不加的区别
- 【springmvc】@RequestParam详解以及加与不加的区别
- 函数调用加括号与不加括号的区别
- 【springmvc】@RequestParam详解以及加与不加的区别
- Android—实体类toString加与不加的区别
- 加和不加的区别
- HTML&CSS——选择器中间加空格和逗号的区别?
- 学习笔记之深入浅出MFC 第8章 C++重要特性---类与对象大解剖(虚拟函数的实现方式)
- 容联短信验证
- Hadoop-2.3.0-cdh5.0.1完全分布式环境搭建(NameNode,ResourceManager HA)
- 发送短信的时间计时器
- NoSuchMethodError: org.hibernate.SessionFactory.openSession
- Jquery伪类选择器加与不加空格的区别
- Android ExpandableListView 实现购物车页面 全选 多选编辑删除
- 锋利的jQuery ajax(三)
- 未能加载 noesis.javascript ......
- flume的memeryChannel中transactionCapacity和sink的batchsize需要注意事项
- WINDOWS 64位机ODBC的数据源DSN添加和移除问题
- bootstrap响应式设计简单实践。
- Android TextView实现滚动跑马灯效果Marquee
- shell数组处理