6. jQuery 이벤트 처리
페이지 정보
작성자 관리자 댓글 0건 조회 538회 작성일 22-01-09 13:14본문
6. jQuery 이벤트 처리
현재 웹문서가 로딩 되었을 때 명령들을 수행함
$(document).ready(function(){
명령들
});
<!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>
같은 결과를 출력한다.
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>
함수를 만들고 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>
실습 : 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>
실습 : 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>
과제. 라디오 버튼의 change 이벤트가 몇번 발생했는지를 코딩하시오.
댓글목록
등록된 댓글이 없습니다.