jQuery 계층적 선택기 사용 분석_jquery

HTML 문서에서 각 요소는 항상 DOM 노드 트리의 특정 위치에 있으며, 문서 계층의 요소 간에는 항상 부모와 자식 간의 관계와 같은 특정 계층 관계가 있습니다.

1. 하위 요소 선택자

은 지정된 상위 요소 아래의 모든 하위 요소를 찾는 데 사용됩니다. 구문 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("부모->자식");

2. 하위 요소 선택자

은 특정 조상 요소 아래의 모든 하위 요소를 일치시키는 데 사용됩니다. 구문 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :

$("조상 후손");

3. 직계 형제 요소 선택자

은 이전 요소 바로 뒤의 모든 다음 요소를 일치시키는 데 사용됩니다. 구문 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("이전 다음")

4. 인접 형제 요소 선택자

은 요소 뒤에 있는 모든 형제 요소를 선택하는 데 사용됩니다. 구문 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("prev~siblings")

종합예:

코드 복사 코드는 다음과 같습니다.

<스크립트 유형="텍스트/자바스크립트"> $(문서).ready(함수(){ 
$("form input").css("color", "red"); //양식 요소의 하위 입력 요소에 대한 글꼴 색상 설정
$("div>div").css("배경", "#FCF") //maindiv 아래의 하위 요소인 div1 및 div2의 배경색을 설정합니다.
$("div~input").css("border", "2px solid blue"); //div 요소 뒤의 모든 입력 요소에 대한 테두리 설정
$("div input").css("border", "2px solid red"); //div 요소 바로 뒤에 입력 요소에 대한 테두리를 설정합니다.
});
스크립트>

양식 요소의 하위 입력 요소는 input1, input2, input3입니다.           > & Lt; div id = "div1" & gt; maindiv 하위 요소: ID는 div1 & lt;/div & gt; & Lt; div id = "div2" & gt; maindiv 하위 요소: ID는 div2 & lt;/div & gt; >           ~                                                       ; & Lt; label & gt; maindiv의 모든 하위 요소는 div1, div2 & lt;/label & gt;