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

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

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

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

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

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

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

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

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

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

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

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

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

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

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