jQuery_jquery를 시작하기 위한 계층적 선택기 예제에 대한 간략한 분석

이 기사에서는 jQuery를 시작할 때 계층적 선택기의 사용을 분석합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

다음은 jQuery 계층 선택기의 조상 자손과 부모>자식의 차이점에 대해 간략하게 소개합니다.

parent>child: 상위 요소를 기준으로 모든 하위 요소를 일치시킵니다. 계층적 관계는 상위-하위 관계입니다.

조상 자손: 조상 요소를 기준으로 모든 자손 요소를 일치시킵니다. 계층적 관계는 조상과 자손입니다.

코드를 작성하고 테스트하여 둘 사이의 차이점을 더 명확하게 구분하세요.

<div id="first">1
  <span>1.1 </span>
  <span>1.2 </span>
  <div>1.3
    <span>1.3.1 </span>
  </div>
 </div>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
  $(function () {
    $("#first>span").css("color", "red");
  });
</script>

실행 후 찾은 내용:

1.3.1의 텍스트 색상은 parent>child가 부모-자식 관계이므로 빨간색이 아닙니다.

선택기를 다음으로 변경하는 경우:

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

$("#firstspan").css("color", "빨간색" );

실행 후 다음을 찾습니다:

1.3.1의 텍스트 색상도 빨간색인데, 조상 후손 계층 관계가 조상과 후손이기 때문입니다. 즉, 자식이든 손자이든 관계없이 ID가 "first"인 요소 아래의 모든 범위 태그가 빨간색으로 변합니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.