jQuery層次選擇器實例詳解?

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.元素之後的所有同級元素 中間用“~”注意，必須是同級的。