HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>어느 버튼이 클릭되었는지 확인하기1 (bind)</title>
<!--
웹페이지에 버튼이 여러개 있고 각각의 버튼은 서로 다른일을 한다.
버튼에 대한 이벤트를 올바르게 처리하려면 어떤 버튼을 클릭했는지 알아야 한다.
-->
<link rel="stylesheet" href="css/01.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/01.js"></script>
</head>
<body>
<div id="firstDiv">
<span class="buttons bold">굵게</span>
<span class="buttons italic">기울임꼴</span>
<span class="buttons clear">지우기</span>
</div>
<div id="result"></div>
</body>
</html>JS
$(document).ready(function(){
// 굵게
$("span.bold").bind('click',function(){
$("div#result").html("<span id='result_bold'>" + $(this).text() + "버튼을 클릭하셨군요</span>");
})
// 기울임꼴
$("span.italic").bind('click',function(){
$("div#result").html("<span id='result_italic'>" + $(this).text() + "버튼을 클릭하셨군요</span>");
})
// 지우기
$("span.clear").bind('click',function(){
$("div#result").html("");
})
}) // end of $(document).ready(function(){}------------------------------CSS
@charset "UTF-8";
div#firstDiv, div#result {
border: solid 0px gray;
width: 80%;
margin: 0 auto;
text-align: center;
}
div#result {
margin-top: 20px;
font-size: 16pt;
}
div#firstDiv > span.buttons {
display: inline-block;
border: solid 2px orange;
width: 100px;
margin: 20px;
padding: 5px;
background-color: yellow;
color: #ff0000;
font-size: 15pt;
cursor: pointer;
}
span.bold, span#result_bold {
font-weight: bold;
}
span.italic, span#result_italic {
font-style: italic;
}정리
- jQueryStudy -> 01_eventHandling -> chap02 -> 01_bind.html, 01.js, 01.css
