jQuery 계층적 선택기를 사용하여 elements_jquery를 선택하는 방법 소개

코드 복사 코드는 다음과 같습니다. 1. 계층적 선택자: DOM 요소 간의 계층적 관계를 통해 요소를 얻습니다. 주요 계층적 관계에는 자손, 부모와 자식, 인접, 형제 관계를 통해 기본 클래스 관계를 사용하여 요소를 편리하고 빠르게 찾을 수 있습니다. jQuery 선택기에 대한 자세한 설명 얻은 페이지의 다양한 요소에 따라 jQuery 선택기를 사용할 수 있습니다. 기본 선택기, 계층 구조 선택기, 필터 선택기, 양식 선택기의 네 가지 범주로 나뉩니다. 그 중 필터 선택기에는 단순 필터 선택기, 콘텐츠 필터 선택기, 가시성 필터 선택기, 속성 필터 선택기, 하위 요소 필터 선택기, 양식 개체 속성 필터 선택기 등 6가지 유형이 있습니다. 참고: 조상이 선택한 요소 집합 자손과 부모>자식은 다르다. 전자의 계층적 관계는 조상과 자손이고, 후자는 부모-자식 관계이다. 게다가 prev next는 .next()로 대체할 수 있고, prev~siblings도 사용할 수 있다. 대신 nextAll()을 사용하세요. --> 의 두 번째 블록에 태그를 추가하고 모든 요소의 초기 값을 숨긴 다음 jQuery 계층적 선택기를 사용합니다. . , 해당 페이지 마크업을 표시합니다. --> body{font-size:12px;text-align:center;} div,span{float:left;border:solid 1px #ccc;margin:8px;display:none} .clsFraA {너비:65px;높이:65px} .clsFraP{너비:45px;높이:45px;배경색:#eee} .clsFraC{너비:25px;높이:25px;배경색:#ddd } $(function () { $('#divMid').css('display', 'block'); $('divspan').css('display', 'block') //div의 모든 태그 표시 }) $(function () { $('#divMid').css('display', 'block') $('div>span').css('display', 'block'); 중성자 표시 }) $(function () { $('#divMid div').css('display', 'block'); / /Display 다음 $('#divMid').next().css('display', 'block') }) $( function () { $ ('#divMid ~ div').css('display', 'block'); //모든 표시 $('#divMid ').nextAll().css('display', ' block'); }) $(function () { $('#divMid').siblings('div').css('display','block'); //표시 ID가 divMid }) /* siblings() 메소드와 prev~siblings 선택기의 차이점은 전자는 앞면과 뒷면에 관계없이 모든 인접 요소를 가져오는 반면 후자는 앞 부분이 아닌 마크 뒤에 있는 모든 인접 요소만 가져옵니다.*/ 왼쪽 ;span class="clsFraC" id="Span2"> >오른쪽_1 오른쪽_2