3장에 이어서 change 이벤트해봅세~ 긴 설명 필요없이 바로 시작!

소스먼저~

체인지2 란놈으로 변경! 했는데 왜 alert이 안뜨는거야??

포커스만 바뀌고 select box놈의 값은 아직 변경이 되지 않아서입니다.

그럼 체인지2로 선택!

오~ alert이 떳군요 ㅎㅎ change 이벤트도 끝

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

이번에는 jquery로 클릭, 체인쥐등 여러가지 이벤트를 적용해볼까 합니다~

​

이벤트들이 많은 관계로 http://api.jquery.com/category/events/ 

​

제가 작성한 이벤트 외에도 해당 jquery 사이트의 이벤트 api를 찾아보시면 더욱더 많은 이벤트들을

​

보실수 있으실거예요~

​

이벤트들은 모든 태그들에 적용가능합니다 body도 되고~ text 태그도 되고~ select 태그도 되고~

​

잡솔은 집워치우고 시작할께요;;

​

여러 이벤트들이 있고 화면상 글들을 나눠서 등록을 할게요~

​

​기본적으로 버튼 클릭으로 이해를 돕고자 하겠습니다

소스는 역시 캡처로!

​

​소스와 실행화면

​

오잉? 소스에는 alert창이 있는데 왜 안나오지?

​alert은 click을 해야 나오는거야~~

​

그럼 클릭 해볼까? 버튼 클릭!

​

오~ 나왔다!! ㅋㅋ ​

클릭 이벤트 끝~~

​

참~ 쉽죠잉~

​

이번에는 jquery로 태그들을 찾는것을 해볼까~ 합니다

1. 주로 쓰는 방식은 태그의 id,name,class로 찾는 방식입니다.

모두 작성하는것이 에디터상 힘들어서... 캡처로!

[소스화면]

태그 id로 특정 태그를 찾고 싶을때  : #을 붙여준다

태그 class로 특정 태그를 찾고 싶을때 : .을 붙여준다.

태그 name으로 특정 태그를 찾고 싶을때 : 태그시작[name=네임명]으로 찾는다

클릭이벤트 첫번째 설명

아이디로 찾기 버튼 클릭시 아이디가 txt1 인놈을 찾는다

실행화면에서 콘솔을 확인했을 경우

1번콘솔 : id가 txt1 인놈이 한개 있어서 0 : input#txt1 이란놈이 출력됐다

클릭이벤트 두번째 설명

클래스로 찾기 버튼 클릭시 클래스가 txt1 인놈을 찾는다

2번콘솔 : class가 txt1 인놈이 두개 있어서 0: input.txt1

                                                        1: input.txt1

이렇게 2개가 출력됐다.

클릭이벤트 세번째 설명

input 태그중 name이 txt1 인놈을 찾는다.

3번콘솔 : 0 : input 한놈 출력

클릭이벤트 네번째 설명

화면상에 없는 태그를 찾는다.

4번콘솔 : 없는 놈을 호출하였으므로 로그에는 값은 찍히지만 태그를 못찾아서

             1,2,3번과 같이 배열값 0 : inpuxxx 어쩌구 하는것이 보이지 않는다.

​

​

해당 방법 말고도 다른방법으로도 태그들을 찾을 수 있겠지만, 자주 쓰이는 방법으로만 기술했습니다.

​다음에는 이벤트를 올리도록 하겠습니다.

​

끝​

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

* 해당 내용은 본인의 생각으로 작성하는것으로... 잘못알고 있는 부분들은 댓글이나 쪽지를 통해 알려

   주시면 감사하겠습니다 ^^

jquery는 http://jquery.com 에 들어가셔서 다운받으시면 되고요.

저는 1.9 버전으로 진행을 하도록 하겠습니다.

우선은 환경은 에디트플러스나 메모장이나 모든지 상관이 없습니다.

저는 jsp 환경으로 샘플작업을 하므로 이클립스로 작업했습니다.

$(document).ready(function(){

});

저게 무엇이냐! 자바스크립트의 onload와 같은 기능을 하는놈으로 알고 있습니다.

모든 html 페이지가 화면에 뿌려지고 나서 저 ready안에 서술된 이벤트들이 동작준비를 하는것이죠.

저 위의 놈을 다음과 같이 줄여서 해주셔도 같습니다.

$(function(){

});

더 간결 해졌죠? ㅎㅎㅎ

뭐 어찌됏든... 버튼 클릭시, helloworld 를 화면에 찍어보도록 하겠습니다.

첫번째, onload안에 기술을 안하고 click 이벤트를 작성할경우

어라? 클릭을 했는데 안먹힙니다. 왜그런거지???

이유는 $("#clickButton").click << 이거 설명을 풀어 설명을 하자면

​

1) # - (태그 id가)

​2) clickButton - (clickButton라고 지정되있는태그를)

3) click - (클릭이벤트를 주었을때)

4) alert("HelloWorld!!")  - HelloWorld!! 라는 경고창을 화면에 뿌려준다 입니다.

​

하지만 html 소스 흐름은 위에서 아래로 순차적으로 진행이 되는걸로 알고 있습니다.

그래서 clickButton 아이디를 가진놈은 밑에있죠? 그래서 위에서는 이미 clickButton 아이디를 가진놈에 한 클릭이벤트를 정의를 해주었으나 clickButton 아이디가 없는 상태로 기술된거라 버튼클릭할때 인식을 못하는거예요

이게 중요합니다 위에서 -> 아래로... ㅎ

짜잔~ 경고창이 떳군요!! ㅋ 저런식으로 해도 결과물은 나오긴 하지만 본인은 이벤트들은 onload를 통해서 진행을 해야한다고 생각을 해서 onload 안에 넣기로 했습니다!

​

자 첫번째랑 같은 소스인대 click이벤트가 onload 안에 넣었을뿐입니다.

아까는 안나왔는데 이번에는...??? 

경고창이 잘나왔네요 ㅎㅎㅎ

도대체 onload가 뭐길래 나오는거냐! 라고 궁금해하시는 분들을 위해서 제가 생각하는 흐름을 말씀드릴게요

소스는 위 --> 아래라고 아까도 말씀 드렸었죠?

​

추가내용을 붙이자면...

위 -> 아래 -> 스크립트 onload 입니다.

혹시 당신말대로 위->아래면 위-> onload -> 아래 아니냐? 이러실 분이 계실거 같아서 흐름을 한번 찍어봤습니다.

아 -> 아아 -> 아아아

이런 순서로 console.log가 찍혔죠?

onload가 제일 마지막에 호출이 된다는것이 확인이 됐습니다.

이제 $(document).ready(function(){})  이놈이 왜 필요한지 감이 오시나요?

안오신다면 계속 연습만 살길입니다 ㅎㅎ

다음에는 정확한 명칭이 무엇인지 기억은 안나지만 태그? 들을 찾는 방법을 작성하겠습니다~

끝

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