jQuery层次选择器实例详解

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

2、2.添加如下html代码和css文件

注意，各个div和span的层级关系

3、3.预览效果如下，4个按钮，6个div,3个span,

其中第六个div和第三个span在form外边

第二个div包含第三个div

第四个div包含第一个span

4、4.引入jQuery文件，并给第一个按钮编写代码

$("form span") 选中的是from下的所有span

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

6、6.给第二个按钮添加如下代码

$("form > span") 是选中from下的子元素span ,只要子元素，其他级别的span元素不要

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

8、8.给第三个按钮添加代码

$("#one + div") 是选中id为one后边的第一个div

9、9.one后边有好几个div，但是只选择紧挨着的一个div，

注意还必须是紧挨着，不挨着的话还选不中的。

10、10.给第四个按钮添加代码如下：

$("#one ~ div") 是选中One后边的所有div

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

12、12.总结

jQuery层级选择器主要包含4种

1.祖先元素下匹配所有的后代元素  中间用空格空开表示

2.父元素下匹配所有的子元素  中间用“>”

3.紧接在 prev 元素后的 next 元素 中间用“+” 注意，不紧挨着的话，不会被选中

4.元素之后的所有同级元素 中间用“~”注意，必须是同级的。