'웹개발강좌/jQuery' 카테고리의 글 목록 IT Code Storage

/132

2015. 1. 15. 11:30

jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자

오랫만에 jQuery 포스팅을 하게 되었습니다.

오늘 작성해볼 포스팅은 jQuery 이벤트들에 대하여 알아볼까 하는대요.

그중 몇가지만 설명과 예를들어 포스팅 해보도록 하겠습니다.

모든 이벤트의 테스트를 간단하게 적용하기 위하여 이벤트 발생시 alert 을 화면에 출력시켜보도록 하겠습니다.

1. click 이벤트

보통 button 및 a태그에 자주 적용되는 이벤트인대요.

꼭 버튼이나 a태그 말고도 그외의 태그에도 적용이 가능합니다.

한번 버튼 태그에 클릭이벤트를 적용해보는 코드를 작성해보겠습니다.

jQuery CDN을 이용하여 예를 드는 것이니 별도로 jQuery 버전에 대해서는 본인이 사용중인 버전을 이용하셔도 무관합니다.

2014/10/08 - [웹개발강좌/jQuery] - jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기

HTML button 태그 생성

1	`<input` `type="button"` `id="btn"` `value="클릭"/>`

click 이벤트 스크립트코드

$(function(){
    $("#btn").click(function(){
        //클릭이벤트 발생시 진행할 스크립트 작성
        alert("클릭입니다!!");
    })
})

2. double click 이벤트

클릭이벤트는 특정 타겟에 클릭이 한번 이루어졌을 경우 발생되는 이벤트일때 사용이 됩니다.

더 나아가 특정 태그에 연속으로 두번클릭이 이루어졌을 경우 더블클릭 이벤트를 실행시킵니다.

자주 사용되지는 않지만 알아보도록 해보겠습니다.

HTML button 태그 생성

1	`<input` `type="button"` `id="dblbtn"` `value="더블클릭"/>`

dblclick 이벤트 스크립트코드

$(function(){
    $("#dblbtn").dblclick(function(){
        //더블클릭이벤트 발생시 진행할 스크립트 작성
        alert("더블클릭입니다!!");
    })
})

3. change 이벤트

change이벤트는 보통 select 박스의 값이 변경되었을 경우 발생되는 이벤트입니다.

한번 selectbox 를 변경해보면서 선택값을 출력해보는 예제코드를 작성해봅니다.

HTML select 태그 생성

<select id="slct">
    <option value="1">첫번째</option>
    <option value="2">두번째</option>
</select>

change 이벤트 스크립트 코드

$("#slct").change(function(){
    //셀렉트박스 발생시 진행할 스크립트 작성
    //선택된 값을 alert으로 출력해보는 샘플코드
    var selectvalue = $("#slct").val();
    alert("변경이되었습니다.(선택된값은:"+selectvalue+")입니다.");
})

4. keypress/keydown 이벤트

일반적으로 input 박스에서 키보드의 키가 눌리는 현상이 나타날때 발생되는 이벤트입니다.

상황에 따라 사용을 해주셔야 할거 같습니다.

※ keypress 및 keydown은 키보드가 눌리는 즉시 발생되므로 console.log가 지원이 되는 브라우저 환경에서 진행 하시기를 권유합니다.

만약 console.log 이벤트가 지원되지 않는 브라우저진행 시 alert으로 변경해서 테스트 하시길 바랍니다.

HTML input 태그 생성

1	`<input` `type="text"` `id="key2"/>`

keyup 이벤트 스크립트 코드

$("#key2").keypress(function(){
      //input 키보드 눌리는 이벤트 발생시 진행할 스크립트 작성
      console.log("키보드누름 이벤트 발생중...");
})

5. keyup 이벤트

일반적으로 input 박스에서 키보드의 키가 눌렀다가 떼었을때 발생되는 이벤트입니다.

HTML input 태그 생성

1	`<input` `type="text"` `id="key"/>`

keyup 이벤트 스크립트 코드

$("#key").keyup(function(){
        //input 키보드 눌렀다 떼어지는 이벤트 발생시 진행할 스크립트 작성
    alert("눌렀다가 떼었다");
})

6. hover 이벤트

마우스 이벤트의 한 종류로 토글과 비슷한 기능을 가지는 이벤트입니다.

마우스 포인터가 특정 타겟에 위치했을 경우/ 벗어났을 경우에 대한 이벤트를 가집니다.

다음예제는 div 태그에 마우스포인터를 가져갔을 경우 특정 class를 적용하여 div 레이어의 배경색이 파란색으로 변경되며

글자색은 흰색으로 변경되는 class를 적용하고 벗어날경우 해당 class를 제외하는 기능입니다.

HTML div 태그 생성

<div id="mousehover">
    마우스를 올리면 영역의 색깔이 변합니다.
</div>

hover 이벤트 스크립트 코드

$("#mousehover").hover(
    //타겟에 마우스포커스가 잡혔을 경우
    function(){
               //div class 속성에 hover_class라는 클래스를 추가
        $("#mousehover").attr("class","hover_class");   
    }
    //타겟에 마우스포커스가 벗어났을 경우
    ,function(){
               //div class 속성에 hover_class라는 클래스를 제거
        $("#mousehover").attr("class","");
    })
})

mouse over 이벤트 발생시 추가하고자 하는 style 클래스 코드

.hover_class {
    background-color: blue;
    color: white;
}

7. focus 이벤트

포커스 이벤트는 특정 태그에 초점을 주기위한 이벤트로 주로 validation 체크시 종종 사용되는 이벤트입니다.

다음 코드를 보시면 쉽게 이해가 되실겁니다.

HTML text/button 태그 생성

1 2	`<input` `type="text"` `id="focusTxt"` `/>` `<input` `type="button"` `id="focusBtn"` `value="text포커스이동"` `/>`

click 이벤트 발생 후 focus 이벤트 스크립트 코드

$("#focusBtn").click(function(){
    $("#focusTxt").focus();
})
})

지금까지 주로 사용하는 이벤트들에 대해서 작성해보았습니다.

조금 더 상세하고 많은 이벤트가 궁금하시면 하단 Document URL 을 이동하여 확인 해주시기 바랍니다.

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

지금까지 작성한 코드를 일괄로 작성한 코드는 다음과 같습니다.

HTML코드

<input type="button" id="btn" value="클릭"/>
<br/>
<input type="button" id="dblbtn" value="더블클릭"/>
<br/>
<select id="slct">
    <option value="1">첫번째</option>
    <option value="2">두번째</option>
</select>
<br/>
<input type="text" id="key"/>
<br/>
<input type="text" id="key2"/>
<br/>
<div id="mousehover">
    마우스를 올리면 영역의 색깔이 변합니다.
</div>
<br/>
<input type="text" id="focusTxt" />
<input type="button" id="focusBtn" value="text포커스이동" />

자바스크립트코드

$(function(){
    $("#btn").click(function(){
        //클릭이벤트 발생시 진행할 스크립트 작성
        alert("클릭입니다!!");
    })
    $("#dblbtn").dblclick(function(){
        //더블클릭이벤트 발생시 진행할 스크립트 작성
        alert("더블클릭입니다!!");
    })
    $("#slct").change(function(){
        //셀렉트박스 발생시 진행할 스크립트 작성
        //선택된 값을 alert으로 출력해보는 샘플코드
        var selectvalue = $("#slct").val();
        alert("변경이되었습니다.(선택된값은:"+selectvalue+")입니다.");
    })
    $("#key2").keypress(function(){
        //input 키보드 눌리는 이벤트 발생시 진행할 스크립트 작성
        console.log("키보드누름 이벤트 발생중...");
    })
    $("#key").keyup(function(){
        //input 키보드 눌렀다 떼어지는 이벤트 발생시 진행할 스크립트 작성
        alert("눌렀다가 떼었다");
    })
    $("#mousehover").hover(
    //타겟에 마우스포커스가 잡혔을 경우
    function(){
        $("#mousehover").attr("class","hover_class");   
    }
    //타겟에 마우스포커스가 벗어났을 경우
    ,function(){
        $("#mousehover").attr("class","");
    })
    $("#focusBtn").click(function(){
        $("#focusTxt").focus();
    })
})

css코드

.hover_class {
    background-color: blue;
    color: white;
}

지금까지 자주 사용되는 jQuery 이벤트에 대하여 알아보았습니다.

다음장은 레이어를 화면에 보여주고 숨겨주는 몇가지 기능에 대하여 알아보도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > jQuery' 카테고리의 다른 글

jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자 (2)	2014.12.02
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2)	2014.12.01
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1)	2014.11.27
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4)	2014.11.15
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0)	2014.11.12

/114

2014. 12. 2. 09:00

jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자

이번장은 간단하게 공백제거 함수와 반복문에 대하여 알아보도록 하겠습니다.

$.trim() 공백제거함수

문자열 혹은 text와 같이 공백이 들어있을경우

데이터 전송시 문제가 발생할 일이 가끔 발생이 되곤합니다.

양쪽공백을 제거하기 위하여 $.trim()함수를 이용하여

공백을 제거할 수 있습니다.

1	`<input` `type="text"` `value=" aaaaa "/>`

$(function(){
    var value1 = '      abc     ';
    var value2 = $(":text").val();
    //공백제거 전
    alert("value1 : " + value1+"\n"+"value2 : " + value2);
     
    value1 = $.trim(value1);
    value2 = $.trim(value2);
    //공백제거 후
    alert("value1 : " + value1+"\n"+"value2 : " + value2);
})

위 예제는 공백이 존재하는 변수 value1값과 text태그에 양쪽 공백이 존재하는 값을

value 속성에 정의한 후 alert으로 각 출력을 해보았습니다.

위처럼 trim 함수를 이용하여 양쪽 공백을 모두 제거해보았습니다.

$.each / $("selector").each

이번에는 each 문법을 이용하여 동일 엘리먼트 및

json객체의 값들을 출력해보도록 하겠습니다.

동일한 class명칭 및 같은 엘리먼트들과 같이 하나가 아닌

두개이상일 경우 사용되는 문법입니다.

다음 동일한 text 태그 여러개를 태그로 만들어 본 후

each문을 이용하여 text태그들의 값을 출력해보도록 하겠습니다.

HTML태그

<input type="text" value="a"/><br/>
<input type="text" value="b"/><br/>
<input type="text" value="c"/><br/>
<input type="text" value="d"/>

jQuery코드

$(function(){
    $(":text").each(function(index){
        //방법 1
        console.log("this",$(this).val());
        //방법 2
        console.log("text eq",$(":text").eq(index).val());
    })
})

위처럼 각 index별로 콘솔에 값이 출력되었습니다.

위 console명령을 이용하여 2가지 방법으로 값들을 출력해보았습니다.

$("셀렉터").eq(index).val()

each문의 첫번째 값은 index값을 의미하고 두번째 값은 object를 의미하는것이지만 엘리먼트 each문에서는 무의미합니다.

$(this).val()

$("셀렉터").each({}) 내에서 $(this)를 주게 되면 현재 반복이 위치하는 엘리먼트를 의미합니다.

이어서 json과 같은 object 타입을 each문을 이용하여 출력해보도록 하겠습니다.

기존 body태그의 엘리먼트는 필요가 없으며 스크립트 코드를 다음과 같이 대체합니다.

$(function(){
    var json = [{
                    data : 'a'
                },{
                    data : 'b'
                },{
                    data : 'c'
                }]
    $.each(json,function(index,object){
        console.log(index,object.data);
    })
})

엘리먼트가 아닌 노드에서는 $.each문의 첫번째 입력값으로 json 배열값을 ,

두번째 입력값을 이전 each문과 동일한 function을 지정해주면 되겠습니다.

현재는 이해가 정확히 가지 않으시겠지만

이후 다른 샘플을 진행하면서 이해를 돕도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > jQuery' 카테고리의 다른 글

jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자 (1)	2015.01.15
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2)	2014.12.01
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1)	2014.11.27
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4)	2014.11.15
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0)	2014.11.12

/113

2014. 12. 1. 21:30

jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기

이번에는 지정 엘리먼트로부터 찾고자 하는 태그를 찾기위하여 Traversing에 대하여 알아보도록 하겠습니다.

"왜 쓰는가 그냥 찾고자 하는 엘리먼트에 id 값이나 class 값 또는 셀렉터를 이용하여 사용하면 되지 않느냐" 라고 의아해하시는 분들이 계실겁니다.

하지만 프로젝트를 진행하시다 보면 Traversing을 이용하여 작성 할 경우가 상당히 많습니다.

몇가지만을 예로들어서 포스팅하도록 하겠습니다.

$("selector").eq("index")

지정된 인덱스로 일치하는 엘리먼트들의 집합을 줄인다

$("selector").find("childSelector")

셀렉터에의해 필터링된 객체 또는 엘리먼트와 일치하는 요소의 자식엘리먼트 얻기

$("selector").parent()

셀렉터에의해 필터링된 영역으로부터의 부모노드를 가져오기

$("selector").prev()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 이전형제노드 가져오기

$("selector").next()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 다음형제노드 가져오기

상단 샘플구조는 다음과 같습니다.

상단 이미지들을 코드로 다시 작성하여 하나씩 설명해보도록 하겠습니다.

Body태그내 HTML 코드

<table>
    <tr>
        <td>
            첫번째 tr의 첫번째 td
        </td>
        <td>
            첫번째 tr의 두번쩨 td
        </td>
    </tr>
    <tr>
        <td>
            두번째 tr의 첫번쩨 td
        </td>
        <td>
            두번째 tr의 두번쩨 td
        </td>
    </tr>
</table>

Traversing별 스크립트 코드

$(function(){
    //eq() traversing
    alert($("tr").eq(0).html());
    alert($("tr").eq(1).html());
     
    //find() traversing
    alert($("tr").eq(0).find("td").eq(0).html());
    alert($("tr").eq(1).find("td").eq(0).html());
     
    //parent() traversing(둘다 같은 부모를 찾는 코드이므로 결과값 동일)
    alert($("tr").eq(0).parent().html());
    alert($("tr").eq(1).parent().html());
     
    //prev() traversing
    alert($("tr").eq(0).find("td").eq(1).prev().html());
    alert($("tr").eq(1).find("td").eq(1).prev().html());
     
    //next() traversing
    alert($("tr").eq(0).find("td").eq(0).next().html());
    alert($("tr").eq(1).find("td").eq(0).next().html());
})

위코드에 대한 작성이 완료되었다면 실행을 해보도록 하겠습니다.

$("selector").eq(index).html()

해석 : 선택된 엘리먼트의 index번째에 있는 HTML 태그

$("selector").eq(index).find("childselector").eq(childindex).html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째에 있는 HTML 태그

$("selector").eq(index).parent().html()

해석 : 선택된 엘리먼트의 index번째의 노드를 감싸는 부모노드내에 존재하는 HTML 태그

$("selector").eq(index).find("childselector").eq(childindex).prev().html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 이전 형제노드의 html 태그

$("selector").eq(index).find("childselector").eq(childindex).next().html()

해석 : 선택된 엘리먼트의 index번째내에서 자식엘리먼트의 childindex번째의 엘리먼트중 다음 형제노드의 html 태그

코드를 응용하여 다른 샘플을 만들어서 Traversing에 대하여 습득을 해보도록 합니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > jQuery' 카테고리의 다른 글

jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자 (1)	2015.01.15
jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자 (2)	2014.12.02
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1)	2014.11.27
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4)	2014.11.15
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0)	2014.11.12

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자

jQuery 7강 - 공백제거(trim) 및 반복문(each)에 대하여 간단하게 알아보자

jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기

1. click 이벤트

HTML button 태그 생성

click 이벤트 스크립트코드

2. double click 이벤트

HTML button 태그 생성

dblclick 이벤트 스크립트코드

3. change 이벤트

HTML select 태그 생성

change 이벤트 스크립트 코드

4. keypress/keydown 이벤트

HTML input 태그 생성

keyup 이벤트 스크립트 코드

5. keyup 이벤트

HTML input 태그 생성

keyup 이벤트 스크립트 코드

6. hover 이벤트

HTML div 태그 생성

hover 이벤트 스크립트 코드

mouse over 이벤트 발생시 추가하고자 하는 style 클래스 코드

7. focus 이벤트

HTML text/button 태그 생성

click 이벤트 발생 후 focus 이벤트 스크립트 코드

HTML코드

자바스크립트코드

css코드

'웹개발강좌 > jQuery' 카테고리의 다른 글

$.trim() 공백제거함수

$.each / $("selector").each

HTML태그

jQuery코드

$("셀렉터").eq(index).val()

$(this).val()

'웹개발강좌 > jQuery' 카테고리의 다른 글

$("selector").eq("index")

$("selector").find("childSelector")

$("selector").parent()

$("selector").prev()

$("selector").next()

Body태그내 HTML 코드

Traversing별 스크립트 코드

'웹개발강좌 > jQuery' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역