<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）时，冒号前必须加空格才是子元素选择器
在学习《锋利的jQuery》时，发现伪类选择器加不加空格得到的结果截然不同，特总结如下，个人观点，如有错误，欢迎指正：目录加空格的伪类选择器不加空格的伪类选择器原因及使用空格的总结正文本文使用的html代码如下: <div class="one" id="one"> id为one，class为one的div <div class="mini">clas
最近学习
jquery
，发现它的选择器的写法与css的基本语法很像，
加
不加
空格
差别很大。
$(“:first-child)——：first只是返回单个元素，而first-child选择符将为每个父元素匹配第一个子元素。例如子元素过滤选择器
li:first-child(
不加
空格
),这
里
的父元素指的是li标签的父元素；
li :first-child(
加
空格
)，这时候因为变成了ance de
CSS中关于多个选择器中是否含有
空格
的
区别
CSS中多个选择器中含有
空格
和不含有
空格
区别
很大，区分下列含义：#header.callout { }#header .callout { }第一个表示ID为header的同时类名为callout的选择器，
第二个表示ID为header下子节点中含有类名为callout的选择器我们用以下例子表明：#header.callout { }<div id="
有如下两个
jQuery
表达式
$(".active :hidden")带
空格
的选择器，表示后代选择器，选择带有样式active内的所有隐藏的子对象。
$(".active:hidden")不带
空格
的选择器，表示筛选，选择带有样式active并且隐藏的对象。
看书的时候发现有些选择器中的带
空格
，起初并没有在意，但是当写选择器的时候发现怎么都没有反应，于是仔细比对自己写的和书上的代码，把
空格
给
加
上了，结果就有反应了，当是当时不明白是怎么回事，怎么也想不通。在看了几页书便知道怎么回事了，写成博客分享一下。
示例代码：
选择器
空格
的问题
$(document).ready(function()
jquery
过滤选择器前
加
不加
空格
产生的效果差别是比较大的。对于这种
区别
可以从css选择器的角度去理解，而且这种理解是完全正确的。可以把这些选择器当作我们css中的类，那么
不加
空格
的选择器就表示选取与该元素相关的对象，而
加
了
空格
的选择器则表示选取与之相关的后代元素对象。
//
加
空格
表示 选择class为test的元素当中的隐藏后代元素，由前往后读
alert($(".test :h
在用
jQuery
的事件绑定时，会用到on()、bind()、live()、 delegate()这几个方法，但对他们的
区别
缺从未注意过，现稍总结一下，如有错误，欢迎指正。
参考文档：
http://blog.csdn.net/xxd851116/article/details/8646899
http://www.jb51.net/article/57827.htm
http://
jQuery
与CSS在选择器方面，有很多的相似之处，本文稍
加
总结。
注：本文以
jQuery
1.9.1版本和CSS3为例进行说明，CSS在选择器方面存在兼容问题，请自行分辨。1
jQuery
的版本
jQuery
分 3 个系列版本 1.x 、 2.x与3.x，主要的
区别
：
a、2.x与3.x版本不再兼容IE6、7、8
b、2.x与3.x版本为移动端做了优化
jQuery
是一个流行的 JavaScript 库，可以用来简化 HTML DOM 的操作。如果你想用
jQuery
写一个时间选择器，可以这样做：
1. 在 HTML 页面中添
加
两个日期选择器，用来选择开始时间和结束时间。这
里
假设你已经引入了
jQuery
库。
```html
<!-- 开始时间 -->
<input type="date" id="start-date">
<!-- 结束时间 -->
<input type="date" id="end-date">
2. 在页面
加
载完毕后，给两个日期选择器添
加
change 事件监听器，用来监听用户选择时间的变化。
```javascript
$(document).ready(function() {
// 监听开始时间选择器的变化
$('#start-date').change(function() {
// 在这
里
写入逻辑，检查开始时间是否小于结束时间
// 监听结束时间选择器的变化
$('#end-date').change(function() {
// 在这
里
写入逻辑，检查结束时间是否大于开始时间
3. 在 change 事件监听器中写入逻辑，检查开始时间和结束时间的关系。
```javascript
$(document).ready(function() {
// 监听开始时间选择器的变化
$('#start-date').change(function() {
// 获取开始时间和结束时间的值
var startDate = $('#start-date').val();
var endDate = $('#end-date').val();
// 如果开始时间大于
