자손 선택자,후손 선택자,속성 선택자(jQuery)

어려보이는 이름이지만 개념을 알고나면 쉬울거라 생각이 드는 선택자입니다. 

처음으로 자손 선택자를 살펴보면, 

위 의 코드를보면 <div>로 부터 시작해서 아래에 갈수록 포괄적인 내용을 담고 있습니다.

이를 구조로 나타내면 아래와 같습니다. 

body에 바로 아래있는 div는 body의 자식입니다.

div바로 아래 있는 ul 또한 div의 자식입니다. 

이런식으로 상위에서 바로 아래있는 경우를 자식 선택자라고 부르고 

ul은 body 보다 2단계 밑에있기 때문에 후손이라고부릅니다. 

대략적인 자손과 후손의 개념은 이렇습니다. 그럼 실제 코드를 보면 

 

자손 선택자 같은 경우에는 ('body>*') 즉 body의 자식인 div 선택자에 .css('color','red'); 를 입혀주는 개념입니다. 

후손같은경우에는 이런식으로 활용합니다. 

자손과 다른점은 >이 붙어있지 않고 뒤에 *을 사용해 body의 후손을 전부 css('color','red');를 입혀준다고 생각할 수 있습니다. 

그러면 속성 선택자로 바로 넘어가서 

속성 선택자란 말그대로 속성값을 이용해 선택을 하는 경우입니다. 

위의 구절을 살펴보면 input의 type이 text인 경우에 hello jquert라는 벨류를 넣게 되는데,

속성선택자를 사용해 내가 원하는 속성에 이런 값을 넣는다. 정도로만 이해하시면 활용하는데 무리가 없을 것 같습니다. 

 

이 외에도 필터 선택자가 있지만, 이 구절은 이해가 조금 걸릴 수 도 있으니,

일단 앞에서 설명한 세가지 선택자를 완벽하게 이해하는게 첫 목표라고 생각합니다.