jQuery层次选择器实例详解

1、新建jQuery_cengjixuanzeqi.html 作为jQuery层次选择器讲解页面

2、添加如下html代码和css文件注意，各个div和span的层级关系

3、预览效果如下，4个按钮，6个div,3个span,其中第六个div和第三个span在form外边第二个div包含第三个div第四个div包含第一个span

4、引入jQuery文件，并给第一个按钮编写代码$("form span") 选中的是from下的所有span

5、运行预览效果如下，不管span在哪一级，只要在form下，都被选中了

6、给第二个按钮添加如下代码$("form > span") 是选中from下的子元素span ,只要子元素，其他级别的span元素不要

7、预览效果如下，子集的被选中了，孙子级的没被选中

8、给第三个按钮添加代码$("#one + div") 是选中id为one后边的第一个div

9、one后边有好几个div，但是只选择紧挨着的一个div，注意还必须是紧挨着，不挨着的话还选不中的。

10、给第四个按钮添加代码如下：$("#one ~ div") 是选中One后边的所有div

11、但注意，必须是同级的，例如div6就不是同一级的了，所以没有被选中

12、总结jQuery层级选择器主要包含4种1.祖先元素下匹配所有的后代元素 中间用空格空开表示2.父元素下匹配所有的子元素 中间用“>”3.紧接在 prev 元素后的 next 元素 中间用“+” 注意，不紧挨着的话，不会被选中4.元素之后的所有同级元素 中间用“~”注意，必须是同级的。