하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

6. jQuery 이벤트 처리

페이지 정보

작성자 관리자 댓글 0건 조회 1,187회 작성일 22-01-09 13:14

본문

6. jQuery 이벤트 처리

현재 웹문서가 로딩 되었을 때 명령들을 수행함

$(document).ready(function(){

명령들

});


이벤트 처리
$('요소').click(function(){
..이벤트 발생시에 처리하는 명령들
});



실습 : jquery09.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 연습</title>
<script>
$(document).ready(function(){
$('body').append('Hello jQuery!!!');
});

</script>
</head>
<body>

</body>
</html>


1.PNG


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function(){

$('body').append('Hello jQuery!!!');

});

</script>

</head>

<body>


</body>

</html>


같은 결과를 출력한다.



1.PNG


onclick 이벤트를 jquery로 구현한 예제입니다.

html()메소드 : 선택한 요소의 html 내용을 읽어오거나 쓸 수 있는 메소드이다. 


실습 : jquery09.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function(){

$("div:eq(0)").click(function(){

$(this).html("div1을 클릭하셧네요....");

});

$("div:eq(1)").click(function(){

$(this).html("div2을 클릭하셧네요....");

});

});

</script>

<style>

div {

width:auto;

padding:5px;

margin: 5px 0;

border:3px solid #ff00ff;

text-align:center;

}

</style>

</head>

<body>

<div>클릭해보세요!!</div>

<div>이곳도 클릭해보세요!!</div>

<div>여기도 클릭해보세요!!</div>

<div>여기도 클릭해보세요!!</div>

</body>

</html>



2.PNG


3.PNG


함수를 만들고 click시 호출하여 실행할 수 있다.


실습 : jquery09.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function(){

$("div:eq(0)").click(function(){

$(this).html("div1을 클릭하셧네요....");

});

$("div:eq(1)").click(function(){

$(this).html("div2을 클릭하셧네요....");

});

$("div:eq(2)").click(clickMsg);

});


function clickMsg(){

$(this).html("축하합니다!!! 클릭!!!"); //innerHTML

}

</script>

<style>

div {

width:auto;

padding:5px;

margin: 5px 0;

border:3px solid #ff00ff;

text-align:center;

}

</style>

</head>

<body>

<div>클릭해보세요!!</div>

<div>이곳도 클릭해보세요!!</div>

<div>여기도 클릭해보세요!!</div>

<div>여기도 클릭해보세요!!</div>

</body>

</html>



4.PNG


실습 : jquery10.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function(){

$('button').click(htmlTest);

})

function htmlTest(){

var aa = $('.test1').html();

$('.test2').show();

$('.test2 textarea').val(aa);

}

</script>

<style>

.test1{

border-radius:5px;

borderf: 5px solid silver;

padding:10px;

}

.test2{

text-align:center;

display:none;

}

.test2 textarea{

width:80%;

height:100px;

}

</style>

</head>

<body>

<div class = "test1">

제이쿼리 재미 있지요!!!<br/>

제이쿼리는 웹을 만드는데.. 아주편리한 스크립트입니다.<br/>

</div>

<div class="test2">

<textarea></textarea>

</div>

<button>클릭하세요</button>

</body>

</html>



5.PNG


6.PNG



실습 : jquery11.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function(){

var cnt=0;

$('[name="sel"]').change(function(){

cnt++; //cnt = cnt+1

$("div:eq(0)").html("셀렉트박스가 " + cnt + "번 변경되었습니다!!!");

});

var chk_cnt=0;

$('[name="chk"]').change(function(){

chk_cnt++;

$('div:eq(1)').html("체크박스가 "+chk_cnt+"번 변경되었습니다!!!");

});

});

</script>

<style>

select{

display:block;

width:90%;

height:30px;

font-size:20px;

text-align:center;

}

div{

width:auto;

padding:5px;

margin:5px 0;

border:3px solid silver;

text-algin:center;

}

</style>

</head>

<body>

<select name="sel">

<option>선택하세요.</option>

<option value="html5">HTML5</option>

<option value="css3">CSS3</option>

<option value="jQuery">jQuery</option>

</select>

<div></div>

<input type ="checkbox" name="chk"/>

<input type ="checkbox" name="chk"/>

<input type ="checkbox" name="chk"/>

<div></div>

<input type="radio" name="rd" />

<input type="radio" name="rd" />

<input type="radio" name="rd" />

<div></div>

</body>

</html>



7.PNG


8.PNG


9.PNG


과제. 라디오 버튼의 change 이벤트가 몇번 발생했는지를 코딩하시오.


var rd_cnt=0;
$('[name="rd"]').change(function(){
rd_cnt++;
$('div:eq(2)').html("라디오박스가 "+rd_cnt+"번 변경되었습니다!!!");
});


10.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.