티스토리 뷰

[jQuery] 제이쿼리 선택자 사용예시들 #두 번째

 오늘은 어제와 이어서 제이쿼리의 선택자들을 사용하는 방법예제들을 살펴봅니다.

jQuery 선택자

 그룹선택자를 사용해서 아이디와 태그를 선택한 모습입니다. 즉 위와 같이 여러개의 요소를 선택하는데에는 그룹선택자가 아주 제격입니다. 체이닝 기법은 계속해서 사용하고 있는 모습을 확인하세요. 체이닝 기법이 무엇인지 기억이안나신다고요? 이전 글(선택자)을 꼭 참고하세요!


html  코드

다음으로는 바로 종속 선택자입니다. 위는 사용예시인데 자세히 보시면 tit 클래스가 2개지만 h1요소 이면서 클래스명이 tit인 녀석만 선택이 된 것을 확인할 수 있습니다. 그리고 중간에 공백이없습니다. 하위 선택자는 공백이 있으니 이를 꼭 명확하게 기억하셔야합니다.

자식들을 선택해!

 이번에는 인접관계선택자에서 위에보이는 것은 부모선택자입니다. .parent()를 사용해서 부모요소를 가져옵니다. 부모요소를 간단히 설명하자면 선택한 객체기준으로 바로 상위 들여쓰기가 되있는 태그가 부모요소라고 생각하면 쉽습니다. 저도 그렇게 이해를 하고 넘어갔습니다.

모두 선택하자

그 다음은 하위 선택자로 위 예제에서는 아이디가 wrap인 녀석의 밑에있는 h1을 모두 선택합니다.


 결과를 브라우저에서 열어서 확인해보면 노란색의 빨간점선이 적용된 모습을 확인할 수 있습니다. 직접 한 번 코딩해보세요.

인접된 네 녀석들

이건 자식요소 선택자입니다. 여기 예제에서는 '>'라는 꺽쇄구호를 사용했는데 .children() 을 사용해도 똑같습니다. 결과를 보면 자식요소가 잘 선택되어 저장된 것을 알 수 있습니다. 아 11행에 보면 이미 사용해 주었군요. 그리고 css에서 {}를 사용해서 적용할 수 있다는 것도 알고 가시기 바랍니다.

어떤 색이 나올까요

초록 노란색

형과 동생 선택자입니다. 말이 형동생이지 바로위에 있으면 형(이전) 밑에있으면 동생(다음) 입니다. 위에서는 3가지의 사용방법을 제시해 두었습니다. 좀 신기했던 점은 바로 더하기 연산자를 사용해서 다음(동생)요소를 선택한다는 점 이었습니다. prev는 이전 next는 다음 선택자이므로 이해하기 딱 쉽죠.

 아 그리고 스타일이라는 변수를 미리 지정해서 적용해 주는 것을 알 수 있습니다. 저런식으로 미리 style를 정의해두면 여러곳에 동일 스타일을 적용할 수 있으니까 손이 많이 가지않아서 좋겠죠.

형제들이여 나오라

 여기서 보여주는 다음모두, 이전모두 선택자입니다. 즉 이전에있는 형들 모두다 선택, (형의형의형의...) 그 다음은 다음에 있는 동생들 모두 선택(동생의 동생의 동생...) 이런식으로 선택됩니다. 본인 기준로 이전과 다음이 선택되는 것을 알 수 있습니다.

모든 형제들이여

그 다음은 .siblings() 입니다. 형동생들 모두를 선택합니다. 즉 형제들을 모두 선택합니다. 계속 형, 동생 이러니까 좀 이상하게 들리긴 하지만 이해하는데는 최곱니다.

 글이 길어져서 여기서 마치고 다음 포스팅에 이어서 진행하도록 하겠습니다. 읽어주셔서 감사합니다. 다른 글들도 도움이 되니 참고하시면 좋습니다.

[jQuery] 제이쿼리 기본개념, 사용환경만들기

댓글
댓글쓰기 폼
네이버 이웃추가
«   2019/10   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함