jQuery层次选择器实例详解

 时间:2024-11-03 12:51:23

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

jQuery层次选择器实例详解

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

  • js如何获取表单的值?
  • XML序列化xmlns=和xmlns:xsi
  • 如何用jQuery动态在某个DIV里写入HTML代码
  • JS怎样替换a标签的链接值?
  • HTML文件怎样引入js脚本,怎样引入javascript
  • 热门搜索
    黄光裕什么时候能出来 萌萌什么意思 我行我素的意思 高考提前批是什么意思 椰子汁什么味道 炙手可热的意思 一视同仁的意思 平邮是什么意思 食品添加剂的作用 秀外慧中什么意思