jquery의 계층적 선택기는 다음과 같습니다. 1. 하위 선택기, 구문 "$("M N")"; 2. 하위 선택기, 구문 "$("M>N")" 3. 형제 선택기, 구문 "$( "M~N")", 4. 인접 선택기, 구문 "$("M+N")". 이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터. 계층적 선택자는 요소 간의 계층적 관계를 통해 요소를 선택하는 기본 선택자입니다. 계층적 선택자는 실제 개발에서도 매우 중요합니다. 일반적인 계층 관계에는 아버지와 아들, 후손, 형제 및 이웃이 포함됩니다. jQuery에는 아래 표와 같이 4가지 유형의 계층 선택자가 있습니다.层jquery 계층적 선택기 선택기 M N 자손 선택 장치, 자손 N 요소 선택(모든 N 요소) m & n 안에 있는 아이 M 요소 생성 선택기, M 요소 내부의 하위 N 요소(모든 첫 번째 수준 N 요소) 선택 M~NSibling 선택기, M 요소 뒤의 모든 형제 N 요소 선택 M + N 인접 선택자, M 요소에 인접한 (다음) 요소를 선택합니다(M과 N은 형제 요소입니다) 🎜또한 다음 4가지 사항에 주의해야 합니다. $("M N") 대신 $(M).find(N)을 사용할 수 있습니다. li>$("M N") 可以使用 $(M).find(N) 代替； $("M>N") 可以使用 $(M).children(N) 代替； $("M~N") 可以使用 $(M).nextAll(N) 代替； $("M+N") 可以使用 $(M).next(N) 代替。 对于 find( )、children( )、nextAll( )、next( ) 这 4 种方法，我们之后会详细介绍，这里简单了解一下即可。 后代选择器 后代选择器，用于选择元素内部的所有某一种元素，包括子元素和其他后代元素。 语法：$("M N")“M元素”和“N元素”之间用空格隔开，表示选中 M 元素内部的后代 N 元素（即所有 N 元素）。 举例： $(function () { $("#first p").css("color","red"); }) 子元素 子元素 子元素的子元素 子元素的子元素 子元素 子元素 程序运行效果如图 1 所示： $("#first p") 表示选取 id="first" 的元素内部的所有 p 元素。因此，不管是子元素，还是其他后代元素，全部都会被选中。 子代选择器 子代选择器，用于选中元素内部的某一种子元素。子代选择器与后代选择器虽然很相似，但是也有着明显的区别。 后代选择器，选取的是元素内部所有的元素（包括子元素、孙元素等）； 子代选择器，选取的是元素内部的某一种子元素（只限子元素）。 语法：$("M>N")“M 元素”和“N 元素”之间使用>选择符，表示选中 M 元素内部的子元素 N。 举例： $(function () { $("#first>p").css("color","red"); }) 子元素 子元素 子元素的子元素 子元素的子元素 子元素 子元素 预览效果如图 2 所示： $("#first>p") 表示选中 id="first" 的元素下的子元素 p。我们将这个例子与后代选择器的例子对比一下，就可以很清楚地知道：子代选择器只选取子元素，不包括其他后代元素。 兄弟选择器 兄弟选择器，用于选中元素后面（不包括前面）的某一类兄弟元素。 语法：$("M~N")“M 元素”和“N 元素”之间使用~选择符，表示选中 M 元素后面所有的兄弟元素 N。 举例： $(function() { $("#second~p").css("color", "red"); }) 子元素 子元素 子元素的子元素 子元素的子元素 子元素 子元素 程序执行结果如图 3 所示： $("#second~p") 表示选取 id="second" 的元素后面所有的兄弟元素 p。记住，兄弟选择器只选取后面所有的兄弟元素，不包括前面的所有兄弟元素。 相邻选择器 相邻选择器，用于选中元素后面（不包括前面）的某一个“相邻”的兄弟元素。相邻选择器与兄弟选择器也非常相似，不过也有明显的区别。 兄弟选择器选取元素后面“所有”的某一类元素； 相邻选择器选取元素后面“相邻”的某一个元素。 语法：$("M+N")“M 元素”和“N 元素”之间使用+选择符，表示选中 M 元素后面的相邻的兄弟元素 N。 举例： $(function() { $("#second+p").css("color", "red"); }) 子元素 子元素 子元素的子元素 子元素的子元素 子元素 子元素 程序运行效果如图 4 所示： $("#second+p") 表示选取 id="second" 的元素后面的“相邻”的兄弟元素 p。 举例： $(function() { $("li+li").css("border-top", "2px solid red"); }) 第1个元素 第2个元素 第3个元素 第4个元素 第5个元素 程序执行效果如图 5 所示。 $("li+li") 使用的是相邻选择器，表示“选择 li 元素后面相邻的（下一个）li 元素”。由于最后一个 li 元素没有下一个 li 元素，所以对于最后一个 li 元素，它是没有下一个 li 元素可以选取的。$("li+li").css("border-top","2px solid red") $("M>N") 대신 $(M).children(N)을 사용할 수 있습니다. 🎜🎜🎜$("M~N" ) 대신 $(M).nextAll(N)을 사용할 수 있습니다. 🎜🎜🎜$("M+N") $(M).next를 사용할 수 있습니다. (N) 대신. 🎜🎜find( ), children( ), nextAll( ), next( ) 메소드에 대해서는 나중에 자세히 소개하겠습니다. 여기서 간단히 살펴보세요. 🎜🎜하위 선택기🎜🎜하위 요소 및 하위 요소를 포함하여 요소 내부의 특정 유형의 모든 요소를 선택하는 데 사용되는 하위 선택기 다른 하위 요소. 🎜🎜구문: 🎜rrreee🎜"M 요소"와 "N 요소"는 공백으로 구분되어 M 요소 내부의 하위 N 요소가 선택되었음을 나타냅니다(즉, 모든 N 요소). 🎜🎜예: 🎜rrreee🎜프로그램 실행 효과는 그림 1에 나와 있습니다:🎜🎜🎜🎜$("#first p")는 id="first"가 있는 요소를 선택하는 것을 의미합니다. code> 내부의 모든 p 요소. 따라서 하위 요소와 다른 하위 요소가 모두 선택됩니다. 🎜🎜하위 선택기🎜🎜하위 선택기, 요소 내부의 하위 요소를 선택하는 데 사용됩니다. 자손 선택자와 자손 선택자는 매우 유사하지만 분명한 차이점도 있습니다. 🎜🎜🎜🎜후손 선택기는 요소 내부의 모든 요소(하위 요소, 손자 요소 등 포함)를 선택합니다. 🎜🎜🎜후손 선택기는 요소 내부의 특정 하위 요소를 선택합니다(제한된 하위 요소만 선택). ). 🎜🎜구문: 🎜rrreee🎜 M 요소 내부의 하위 요소 N을 선택하려면 "M 요소"와 "N 요소" 사이에 > 선택기를 사용하세요. 🎜🎜예: 🎜rrreee🎜미리보기 효과는 그림 2에 표시됩니다. 🎜🎜🎜🎜$("#first>p")는 선택된 id="first"가 있는 요소 아래의 하위 요소를 나타냅니다. 코드> p. 이 예제를 자손 선택기 예제와 비교해 보면, 자손 선택기는 자식 요소만 선택하고 다른 자손 요소는 포함하지 않는다는 것을 분명히 알 수 있습니다. 🎜🎜형제 선택기🎜🎜형제 선택기, 요소(앞 제외) 뒤에 있는 특정 유형의 형제를 선택하는 데 사용됩니다. . 🎜🎜구문: 🎜rrreee🎜 M 요소 다음의 모든 형제 요소 N을 선택하려면 "M 요소"와 "N 요소" 사이에 ~ 선택기를 사용하세요. 🎜🎜예: 🎜rrreee🎜프로그램 실행 결과는 그림 3과 같습니다. 🎜🎜🎜🎜$("#second~p")는 id="second"가 있는 요소 뒤의 모든 요소를 선택한다는 의미입니다. 코드> 브라더 요소 p. 형제 선택자는 모든 이전 형제 요소가 아닌 모든 후속 형제 요소만 선택한다는 점을 기억하세요. 🎜🎜인접 선택기🎜🎜인접 선택기, "인접" 형제 요소 뒤에 있는(앞 제외) 요소를 선택하는 데 사용됩니다. 인접 선택자도 형제 선택자와 매우 유사하지만 중요한 차이점이 있습니다. 🎜🎜🎜🎜동위 선택자는 요소 뒤의 특정 유형의 "모든" 요소를 선택합니다. 🎜🎜🎜인접 선택자는 요소 뒤의 "인접한" 특정 요소를 선택합니다. 🎜🎜구문: 🎜rrreee🎜 "M 요소"와 "N 요소" 사이에 + 선택기를 사용하여 M 요소 다음에 인접한 형제 요소 N을 선택합니다. 🎜🎜예: 🎜rrreee🎜프로그램 실행 효과는 그림 4에 표시됩니다. 🎜🎜🎜🎜$("#second+p")는 id="second"인 요소 뒤에 있는 "인접" 형제 요소 p를 선택하는 것을 의미합니다. . 🎜🎜예: 🎜rrreee🎜프로그램 실행 효과는 그림 5에 나와 있습니다. 🎜🎜🎜🎜$("li+li")는 인접 선택기를 사용합니다. 이는 "li 요소 다음에 인접한 (다음) li 요소를 선택합니다"를 의미합니다. 마지막 li 요소에는 다음 li 요소가 없으므로 마지막 li 요소에 대해 선택할 다음 li 요소가 없습니다. $("li+li").css("border-top","2px solid red")는 두 li 요소 사이에 테두리를 추가할 수 있습니다. 🎜【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 개발 동영상】
