[jQuery 7장] 셀렉터가 모예요?

jQuery의 핵심중 하나라고 생각하는 셀.렉.터!!!

 

셀렉터란 무엇인가 예를 들어서 id로 특정 값을 찾는거는 쉽죠..

 

class로 같은 명의 버튼이 여러개고 또 같은명의 class를 가진 text 태그가 여러개일경우!

특정이벤트 발생시 특정 태그를 찾아가는 서비스~ 라고 생각하시면 되실려나.. 저도 머리는 아는데 설명을 잘 못하겠습니다...

 

셀렉터 이벤트들도 많고...

 

http://api.jquery.com/category/selectors/

 

필요한 셀렉터들은 여기에 다 모여있습니다 ㅎㅎㅎ

 

기본적으로 parent() / find() / next() / prev() 태그들을 설명드릴수 있겠는대요

 

parent() = 현재태그를 감싸고 있는 부모를 찾는다

예제)

<div>

  <input type="button" id="btn" />

  <input type="button" id="btn2" />

</div>

 

$("#btn").parent() <-  이렇게 줄경우는  btn 아이디를 감싸고 있는 div 태그놈을 찾는것입니다.

 

find(id or class or input ...)  = 현재태그 안에 속하는 자식을 찾는다

예제)

<div id="prnt">

<input type="text" id="aaa" />

</div>

$("#prnt").find("#aaa") = prnt 아이디를 가진 div 태그가 감싸고 있는 자식들중 id값이 aaa인놈을 찾는다.

 

next() = 현재태그 다음 태그를 찾는다.

<input type="text" id="a" />

<input type="text" id="b" />

$("#a").next() = a 아이디를 가진 input 태그의 형제태그들중 a태그 바로 다음에 있는 태그를 찾는다.

그 태그는 ? id가 b를 가진 text 태그이군요

 

prev() = 현재태그 직전 태그를 찾는다.

이건 next반대로

<input type="text" id="a" />

<input type="text" id="b" />

$("#b").prev() = b 아이디를 가진 input 태그의 형제태그들 중 b 태그 바로 전에 있는 태그를 찾는다.

그 태그는 ? id가 a를 가진 text 태그이군요

 

기존에 했던 풀소스가 아니여서 이해가 안가시나요?

그럼 샘플자료를 보시죠

 

무조건 예제는 버튼 클릭이벤트를 시작으로!!

 

 

길이 길어지면 저역시 피곤해하는 타입이라 일괄처리로 예제를 만들었습니다!

소스랑 화면은 다음과 같고요

 

 

실행 결과네요 ?

동작은 일괄처리 버튼 클릭해서 각각의 parent / find / next / prev를 이용하여 console에 값들을 뽑았습니다 ㅎㅎㅎ

 

첫번째 콘솔값 설명

id btn이란 버튼을 시작으로 부모태그의 클래스값을 찍어봤습니다!

 

두번째 콘솔값 설명

id prnt 라는 div 태그를 시작해서 안에 들어있는 태그들중에 id가 aaa라는 태그의 value를 찍어봤습니다!

 

세번째 콘솔값 설명

id가 a인놈의 다음 태그의 value를 찍어봤습니다

 

마지막 콘솔값 설명

id가 b인놈의 이전 태그의 value를 찍어봤습니다.

 

한꺼번에 뿌려져서 헷갈리다 하시는분은! console.log가 총 4개있는데 하나씩만 적어서 출력해보세요

그럼 이해를 하실듯.... ????

 

끝 

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!