이벤트 처리 기법
jQuery를 활용한 이벤트 바인딩과 엘리먼트 선택 방법을 설명합니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 이벤트 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.menu-container { width: 400px; margin-bottom: 20px; }
.menu-item {
display: inline-block;
padding: 10px 15px;
margin: 5px;
background: #e0e0e0;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="menu-container">
<div class="menu-item" data-id="item1">항목 1</div>
<div class="menu-item" data-id="item2">항목 2</div>
<div class="menu-item" data-id="item3">항목 3</div>
</div>
<input type="text" id="username" value="사용자명">
<input type="password" id="pwd" disabled>
<script>
$(function() {
// 엘리먼트 선택자 예제
$(".menu-item:first").click(function() {
alert("첫 번째 항목: " + $(this).data('id'));
});
$(".menu-item:last").click(function() {
alert("마지막 항목 선택됨");
});
$(".menu-item:even").click(function() {
console.log("짝수 인덱스 항목 클릭");
});
// 입력 필드 이벤트
$("#username").focus(function() {
$(this).val('');
});
$("#username").change(function() {
alert("사용자명 변경됨: " + $(this).val());
});
// 속성 확인
$(".menu-item").click(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
</script>
</body>
</html>DOM 조작 메서드
jQuery를 이용한 문서 객체 조작 기법을 다룹니다.
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.content-box {
padding: 15px;
margin: 10px 0;
border: 1px solid #ddd;
}
.highlight { background-color: #ffeb3b; }
</style>
</head>
<body>
<div id="contentArea">
<p id="text1">첫 번째 문단</p>
<p id="text2">두 번째 문단</p>
</div>
<div class="control-panel">
<button data-action="addClass">클래스 추가</button>
<button data-action="append">내용 추가</button>
<button data-action="css">스타일 변경</button>
<button data-action="attr">속성 확인</button>
</div>
<script>
$(document).ready(function() {
// DOM 조작 이벤트
$("[data-action='addClass']").click(function() {
$("#text1").addClass("highlight");
});
$("[data-action='append']").click(function() {
$("#text2").append("<span> (추가 내용)</span>");
});
$("[data-action='css']").click(function() {
$("#text1").css({
"color": "blue",
"font-weight": "bold"
});
});
$("[data-action='attr']").click(function() {
alert("text1 ID: " + $("#text1").attr("id"));
});
// 위치 정보 확인
$(".control-panel").click(function() {
console.log("패널 위치: ", $(this).position());
});
});
</script>
</body>
</html>모바일 WeChat 브라우저 감지
사용자 환경이 WeChat 인앱 브라우저인지 확인하는 방법
function detectWechatBrowser() {
const userAgent = navigator.userAgent.toLowerCase();
if(userAgent.indexOf('micromessenger') !== -1) {
console.log("WeChat 브라우저에서 실행 중");
return true;
}
console.log("WeChat 외부 브라우저");
return false;
}
// 사용 예제
if(detectWechatBrowser()) {
document.getElementById("wechat-pay").style.display = "block";
}