728x90
반응형
1. toggleClass를 hasClass, removeClass, addClass 체이닝으로 구현 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<title>jquery</title>
<style>
.chkbox-checkbox-default{
background: url(./images/sprite__common.png) no-repeat -532px -584px;
width: 48px;
height: 48px;
}
.chkbox-checkbox-checked{
background: url(./images/sprite__common.png) no-repeat -532px -532px;
width: 48px;
height: 48px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result = $("#my-chk").hasClass("chkbox-checkbox-default")
if(result===true){
$("#my-chk").removeClass("chkbox-checkbox-default")
.addClass("chkbox-checkbox-checked") //체이닝 : 접근지정자가 같고 다음에 바로 작업을 수행할 경우 사용함.
}else{
$("#my-chk").removeClass("chkbox-checkbox-checked")
.addClass("chkbox-checkbox-default")
}
}
</script>
</head>
<body>
<div class ="chkbox-checkbox-default" onclick="myFunc()" id = "my-chk"></div>
</body>
</html>
2. HTML button 태그 onclick = "myFunc()" -> Jquery Script에서 click과 콜백함수로 구현
<head>
~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//ready메서드의 콜백함수는 DOM이 완전히 로드되고 실행된다. (안정성 부여)
$("#my-btn").click(function(){ //콜백함수 : 메서드 안에 이름 없는 함수
alert("버튼 클릭!")
})
// document.getElementById("my-btn").addEventListener('click',function(){
// alert('버튼 클릭!')
// })
})
</script>
</head>
<body>
<div id = "my-div"></div>
<button id = "my-btn">클릭</button>
</body>
2.1 onclick과 .click()의 차이점
HTML에서 onclick="myFunc()"와 jQuery에서 $("#btnID").click(function(){})를 사용하는 것 사이에는 몇 가지 주요 차이점이 있습니다. 각 방식은 이벤트를 처리하는 방식과 코드의 구조화 측면에서 서로 다른 장단점을 가집니다.
2.1.1 코드 분리 (Separation of Concerns)
HTML onclick 속성:
- onclick은 HTML 요소 내부에 직접 JavaScript 함수를 호출합니다. 이는 HTML(구조)과 JavaScript(동작)가 혼합되어 있어, 장기적으로 유지보수가 어려울 수 있습니다.
- 더 크고 복잡한 웹 페이지에서는 HTML과 JavaScript 코드를 분리하는 것이 더 체계적이고 관리하기 쉽습니다.
jQuery .click() 이벤트 핸들러:
- jQuery의 .click() 메소드를 사용하면 JavaScript를 완전히 별도의 파일이나 <script> 태그 내부에서 관리할 수 있어 HTML과 JavaScript의 분리가 쉬워집니다.
- 이 방식은 코드의 가독성과 유지보수성을 향상시키는 모범 사례를 따르는 데 도움이 됩니다.
2.2.2 이벤트 핸들링 (Event Handling)
HTML onclick 속성:
- onclick 속성은 해당 HTML 요소에만 직접 이벤트 핸들러를 지정합니다. 이벤트 핸들링은 매우 명시적이지만, 동적으로 추가되는 요소에는 적용되지 않습니다.
jQuery .click() 이벤트 핸들러:
- jQuery를 사용하면 이벤트 위임을 통해 동적으로 생성된 요소에도 이벤트 핸들러를 쉽게 적용할 수 있습니다. 예를 들어, .on('click', selector, function(){}) 구문을 사용하면 나중에 페이지에 추가되는 요소에도 이벤트를 적용할 수 있습니다.
- 이벤트 리스너를 중앙에서 관리할 수 있어 다양한 요소에 대한 이벤트를 더 효율적으로 처리할 수 있습니다.
2.2.3 브라우저 호환성 (Browser Compatibility)
HTML onclick 속성:
- 대부분의 브라우저에서 일관되게 작동하지만, 복잡한 동작을 구현할 때는 브라우저 간 차이가 문제가 될 수 있습니다.
jQuery .click() 이벤트 핸들러:
- jQuery는 다양한 브라우저와 버전에서 일관된 동작을 보장하기 위해 내부적으로 많은 호환성 문제를 처리합니다.
- 특히 구형 브라우저를 지원해야 할 경우, jQuery는 브라우저 간의 일관성을 유지하는 데 도움이 됩니다.
2.2.4 결론
결론적으로, 코드의 구조화와 유지보수 측면에서 볼 때 jQuery의 .click() 메소드를 사용하는 것이 더 권장됩니다. 그러나 간단한 상황에서는 onclick 속성을 사용하는 것이 더 직관적이고 쉬울 수 있습니다. 프로젝트의 요구 사항과 팀의 코딩 스타일에 따라 적절한 접근 방식을 선택하는 것이 중요합니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<title>jquery</title>
<style>
#my-div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my-btn").on('click',function(){
$("#my-div").css("backgroundColor","red");
})
})
</script>
</head>
<body>
<div id = "my-div"></div>
<button id = "my-btn">클릭</button>
</body>
2.3 .click(function(){})과 .on('click', function(){})의 차이점
2.3.1 차이점
- 단순한 이벤트 핸들링 vs. 복합 이벤트 처리: .click() 메서드는 단순한 사용 사례에 적합하지만, 복수의 이벤트를 다루거나 이벤트 위임이 필요한 경우 .on() 메서드가 더 적합합니다.
- 동적 요소: 동적으로 생성되는 요소에 대한 이벤트 핸들링은 .click() 메서드로는 구현하기 어렵습니다. .on() 메서드를 사용하면 부모 요소에 이벤트 리스너를 설정하고 특정 자식 요소에서 발생하는 이벤트를 처리할 수 있습니다.
2.3.2 결론
.on() 메서드는 더 많은 기능과 유연성을 제공하므로 복잡한 어플리케이션과 동적 요소가 포함된 프로젝트에서 더 자주 사용됩니다. 간단한 상황에서는 .click() 메서드를 사용해도 충분하지만, 확장성과 유지보수를 고려한다면 .on() 메서드의 사용을 선호합니다.
3. val() 함수로 input값 반환받기 예제
<head>
~
<style>
#my-div1{
width: 100px;
height: 50px;
font-weight: bolder;
font-size: large;
background-color: aqua;
}
input{
display: block;
font-weight: bolder;
font-size: large;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
myByt()
})
function myByt(){
$("#my-btn").on('click', function(){
var val1 = $("#operand-1").val()
var val2 = $("#operand-2").val()
result = parseInt(val1) + parseInt(val2)
$("#my-div1").text(result)
})
}
</script>
</head>
<body>
<div id = "my-div1"></div>
<input type="text" id="operand-1">
<input type="text" id="operand-2">
<button id = "my-btn">클릭</button>
</body>
4. on() 함수 안에 그룹 이벤트 등록
- 두가지 이상의 메서드를 중괄호 안에 콤마로 구분해 넣는다.
<head>
~
<style>
#my-div1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
myByt()
})
function myByt(){
//$().on({...}) - on메서드로 그룹 이벤트 등록
$("#my-btn").on({
"click":function(){
$("#my-div1").css("backgroundColor","red")
},
"dblclick":function(){
$("#my-div1").css("backgroundColor","green")
}
})
}
</script>
</head>
<body>
<div id = "my-div1"></div>
<button id = "my-btn">클릭</button>
</body>- 버튼을 한 번 클릭하면 빨간색으로 변경되고, 더블 클릭하면 초록색으로 변경된다.
- doubleClick일것 같지만 dblclick이다.
4.1 mouseenter, mouseleave 이벤트
- hover와 비슷한 역할을 한다.
<head>
~
<style>
#my-div1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
myByt()
})
function myByt(){
$("#my-btn").on({
"mouseenter":function(){ //hover와 비슷함
$("#my-div1").css("backgroundColor","red")
},
"mouseleave":function(){
$("#my-div1").css("backgroundColor","green")
}
})
}
</script>
</head>
<body>
<div id = "my-div1"></div>
<button id = "my-btn">클릭</button>
</body>
<head>
~
<style>
#my-div1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
myByt()
})
function myByt(){
$("#my-btn").hover( //on과 달리 중괄호 안쓰고 소괄호 안에 function을 두개 적는다
function(){ //mouseenter시에 실행될 함수
$("#my-div1").css("backgroundColor","red")
},
function(){ ////mouseleave시에 실행될 함수
$("#my-div1").css("backgroundColor","green")
}
)
}
</script>
</head>
<body>
<div id = "my-div1"></div>
<button id = "my-btn">클릭</button>
</body>
5. scroll 함수로 scrollTop(), scroolLeft() 값 반환받기 예제
<head>
~
<style>
body{
width: 5000px;
height: 5000px;
background-color: aqua;
}
#pos-div{
position: fixed;
width: 200px;
height: 200px;
background-color: wheat;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
#pos-div>span{
display: block;
background-color: antiquewhite;
margin-bottom: 10px;
font-weight: bold;
}
#pos-div>span>b{
color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll',function(){
var curTop=$(this).scrollTop()
var curLeft=$(this).scrollLeft()
$("#pos-vertical>b").text(curTop)
$("#pos-horizontal>b").text(curLeft)
})
})
</script>
</head>
<body>
<div id ="pos-div">
<span id="pos-vertical">scrollTop:<b>0</b>px</span>
<span id="pos-horizontal">scrollLeft:<b>0</b>px</span>
</div>
</body>
6. blur 함수 예제
<head>
~
<style>
#my-input{
background-color: antiquewhite;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my-input").on({
"focus":function(){
console.log('focus') //입력창을 마우스로 클릭 했을 때, input창이 활성화 되어 있을 때
},
"blur":function(){
console.log('blur') //입력창 밖을 마우스로 클릭 했을 때, input창이 활성화 되어 있지 않을 때
}
})
})
</script>
</head>
<body>
<input type="text" id="my-input">
</body>- 보통 blur함수를 사용해서 입력한 텍스트의 유효성 검사 같은 것들을 한다.
- 구글에 blur함수 검색하면 다양한 예제가 나온다.
7. keydown 함수로 키보드 값 반환받기 예제
<head>
~
<style>
#my-input{
background-color: antiquewhite;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('keydown',function(e){//이벤트 객체정보
console.log(e.keyCode) //아스키 코드 값 또는 정해진 값이 나온다.
switch(e.keyCode){
case 37://arrow left
$("#my-input").val('LEFT')
break
case 38://arrow up
$("#my-input").val('UP')
break
case 39://arrow right
$("#my-input").val('RIGHT')
break
case 40://arrow down
$("#my-input").val('DOWN')
break
}
})
})
</script>
</head>
<body>
<input type="text" id="my-input">
</body>- keydown 콜백함수의 매개변수가 입력한 키보드 값을 읽어와 반환한다.
- e.keyCode는 아스키 코드 또는 정해진 값을 반환한다.
- e.key는 키값을 반환한다.
댓글