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개있는데 하나씩만 적어서 출력해보세요
그럼 이해를 하실듯.... ????
끝
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
---|---|
[jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
[jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
[jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
프로젝트 진행중이라 많이 올려봐야 한두개네요;;
빨리빨리 글을 등록하고 싶지만... 바쁘다는 핑계로... ㅈㅅ;;
오늘 이벤트의 예제순서는~
1. 버튼을 클릭
2. 두번째 태그에 포커스 주기
3. 포커스가 주어진 상태에서 키보드의 이벤트 코드를 크롬(콘솔)에 찍어 볼것이다.
이번에도 소스 + 결과 화면부터 보고 가시죠..
아 전달 못드린게 있었는데 연습만이 살길입니다!
이해 못하신다? 그럼 무한 반복~ 제가 해드릴수있는거는 답은 못드리지만 길은 드릴려고 하는 것입니다!
자 그럼 소스를 설명하자면~
위 -> 아래 -> onload 였죠?
html 소스를 화면에 뿌려줍니다.
onload로 가면~
id가 button인 놈에게 클릭이벤트를 줬네요? 주면 뭐가 반응 하게 되있나... 보자...
id가 txt2인놈에게 forcus() <---??? 모지? 포커스... 정확히 뭐하는 놈인지 모르니 패스~
그다음은
id가 txt2인 놈에게 keypress 이벤트 줬네요? 암튼 이벤트 동작하면 실행되는놈은
console.log e.which 아 어려워~~
샘플이나 실행해봐야 겄다
캡처에는 나오지 않지만 버튼 클릭해서 두번째 텍스트 태그에 깜빡깜빡 가게 되어있는 상태입니다.
그리고 깜빡이는 태그상태에서 123456을 입력하니까
크롬 console에 코드번호 : 숫자값
이렇게 나왔습니다.
소스랑 대입하면 아하~ 이해 가실듯...
button click 이벤트내에 기술되어있는 소스는
버튼 클릭하면 txt2 아이디 태그에 포커스를 주는 거고..
keypress 태그는
키보드 이벤트를 받는 거였군요!!!
이해 가셨나요? 이해 못하셨다면 연습연습!!
이벤트는 대략 적으로 여기에서 마무리 하고요 나머지 이벤트들이 많긴할텐데 다른 동작들이랑 연동하면서 사용할 예정입니다~
다른 이벤트들이 필요하신 분들이 계시다면
전에 알려드린
http://api.jquery.com/category/events/
jquery 이벤트 문서를 보시면서 공부하시길~
끝.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
---|---|
[jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
[jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
[jQuery 3장] 버튼 클릭클릭! (0) | 2014.05.14 |
3장은 한번 클릭이었다면 이번에는 더블클릭이다!! 따닥?
소스보기~
오~ alert 나왔다~
jquery 쉬우다 쉬워!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
---|---|
[jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
[jQuery 3장] 버튼 클릭클릭! (0) | 2014.05.14 |
[jQuery 2장] 태그들을 id,class,name으로 찾고 싶어요~ (0) | 2014.05.14 |
3장에 이어서 change 이벤트해봅세~ 긴 설명 필요없이 바로 시작!
소스먼저~
selectbox 가 화면처럼 뜹니다 그럼 select box 다른 놈으로 변경해봅시다
체인지2 란놈으로 변경! 했는데 왜 alert이 안뜨는거야??
포커스만 바뀌고 select box놈의 값은 아직 변경이 되지 않아서입니다.
그럼 체인지2로 선택!
오~ alert이 떳군요 ㅎㅎ change 이벤트도 끝
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
---|---|
[jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |
[jQuery 3장] 버튼 클릭클릭! (0) | 2014.05.14 |
[jQuery 2장] 태그들을 id,class,name으로 찾고 싶어요~ (0) | 2014.05.14 |
[jQuery 1장] $(document).ready 가 모예요? (11) | 2014.05.14 |
이번에는 jquery로 클릭, 체인쥐등 여러가지 이벤트를 적용해볼까 합니다~
이벤트들이 많은 관계로 http://api.jquery.com/category/events/
제가 작성한 이벤트 외에도 해당 jquery 사이트의 이벤트 api를 찾아보시면 더욱더 많은 이벤트들을
보실수 있으실거예요~
이벤트들은 모든 태그들에 적용가능합니다 body도 되고~ text 태그도 되고~ select 태그도 되고~
잡솔은 집워치우고 시작할께요;;
여러 이벤트들이 있고 화면상 글들을 나눠서 등록을 할게요~
기본적으로 버튼 클릭으로 이해를 돕고자 하겠습니다
소스는 역시 캡처로!
소스와 실행화면
오잉? 소스에는 alert창이 있는데 왜 안나오지?
alert은 click을 해야 나오는거야~~
그럼 클릭 해볼까? 버튼 클릭!
오~ 나왔다!! ㅋㅋ
클릭 이벤트 끝~~
참~ 쉽죠잉~
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
---|---|
[jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
[jQuery 2장] 태그들을 id,class,name으로 찾고 싶어요~ (0) | 2014.05.14 |
[jQuery 1장] $(document).ready 가 모예요? (11) | 2014.05.14 |