 |
 |
 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style>
input{border: 3px solid green;}
.active{border: 3px solid red;}
</style>
<script>
$(function(){
$('#input1').focus(function(){$('#input1').addClass('active');});
$('#input1').blur(function(){$('#input1').removeClass('active');}); //거두어주어라
});
</script>
</head>
<body>
<input type="text" id="input1">
</body>
</html>결과는 똑같지만 코드가 너무 길어져서 헷깔린다면 변수를 설정해서 간단하게 쓸수도 있다. 결과는 똑같으니 취향에 맞게 써주면 된다.
$(function(){
$('#input1').focus(function(){$('#input1').addClass('active');});
$('#input1').blur(function(){$('#input1').removeClass('active');});
});위에서 본 기존의 코딩이다.
$(function(){
var element = $('#input1');
element.focus(function(){element.addClass('active');});
element.blur(function(){element.removeClass('active');});
});var element = $('#input1');
변수 설정을 해줌으로서 아래에 있는 $('#input1') 이 부분을 element만 써주면 된다.
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| JavaScript를 Jquery로 바꾸기 예제 (0) | 2021.09.13 |
|---|---|
| [jquery] clickTest 줄여서 쓰기 $(this) (0) | 2021.09.13 |
| [jpuery] click 명령어 (0) | 2021.09.13 |
| [jquery] 사진 불러오고 효과주기 appendTo()명령어 (0) | 2021.09.13 |
| [jquery] append() 명령어 (0) | 2021.09.13 |
