jQuery / input 값 변화 감지하기 / change, keyup
input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다.
목차
input type="number"
숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보자.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<p>A <input type="number" id="a"></p>
<p>B <input type="number" id="b"></p>
<p>A * C = <span id="ab"></span></p>
</body>
</html>
change()로 감지하기
change()는 값을 입력하고 해당 폼을 벗어났을 때 변화를 감지한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( '#a, #b' ).change( function() {
var a = $( '#a' ).val();
var b = $( '#b' ).val();
var ab = a * b;
$( '#ab' ).text( ab );
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<p>A <input type="number" id="a"></p>
<p>B <input type="number" id="b"></p>
<p>A * C = <span id="ab"></span></p>
</body>
</html>
2를 입력하는 순간에는 아무 일이 없지만...
폼을 벗어나면 2와 0의 곱 0을 출력한다.
마찬가지로, 두 번째 폼에 3을 입력하는 순간에는 아무 일이 없지만...
폼을 벗어나면 2와 3의 곱 6을 출력한다.
keyup()으로 감지하기
change() 대신 keyup()을 사용하면 입력하는 순간 변화를 감지한다.
<script>
$( document ).ready( function() {
$( '#a, #b' ).keyup( function() {
var a = $( '#a' ).val();
var b = $( '#b' ).val();
var ab = a * b;
$( '#ab' ).text( ab );
} );
} );
</script>
on()
on()을 사용하여 여러 이벤트에 대해서 같은 작업을 할 수 있다. 다음은 폼을 선택했을 때도 계산한다.
<script>
$( document ).ready( function() {
$( '#a, #b' ).on( 'focus keyup', function() {
var a = $( '#a' ).val();
var b = $( '#b' ).val();
var ab = a * b;
$( '#ab' ).text( ab );
} );
} );
</script>
input type="checkbox"
체크박스에 체크하면 Checked를 출력하고, 체크를 지우면 아무 것도 표시하지 않는다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( '#a' ).change( function() {
if ( $( '#a' ).is( ':checked' ) ) {
$( '#b' ).text( 'Checked' );
} else {
$( '#b' ).text( '' );
}
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<p>A <input type="checkbox" id="a"></p>
<p id="b"></p>
</body>
</html>
on()을 사용해도 된다.
<script>
$( document ).ready( function() {
$( '#a' ).on( 'change', function() {
if ( $( '#a' ).is( ':checked' ) ) {
$( '#b' ).text( 'Checked' );
} else {
$( '#b' ).text( '' );
}
} );
} );
</script>
input type="radio"
라디오 버튼을 클릭하면, 그 버튼에 해당하는 값이 출력된다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'input[name="fruit"]' ).change( function() {
$( '#a' ).text( $( this ).val() );
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<p><input type="radio" name="fruit" value="Apple"> Apple</p>
<p><input type="radio" name="fruit" value="Banana"> Banana</p>
<p id="a"></p>
</body>
</html>
on()을 사용해도 된다.
<script>
$( document ).ready( function() {
$( 'input[name="fruit"]' ).on( 'change', function() {
$( '#a' ).text( $( this ).val() );
} );
} );
</script>
jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드
.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...
jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth
jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다. width - padding 안쪽 크기 innerWidth - border 안쪽 크기 outerWidth - border 포함 크기 다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드
.each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행한다. 문법 .each( function ) 특정 조건을 만족할 때 반복 작업에서 빠져려면 다음을 추가한다. return false 예제 1 p 요소에 각각 다른 클래스를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Method / .width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드
.width() .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 var jbVar = $( 'p' ).width(); 는 p 요소의 가로 크기를 변수 jbVar에 저장합니다. 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 $( 'h1' ).width( '100px' ); 는 h1 요소의 가로 크기를 100px로 만듭니다. 예제 1 선택한 요소의 가로 ...
jQuery / Method / .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드
.append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).append( ' 123' ); 라고 하면 <p>Lorem Ipsum Dolor 123</p> 으로 출력됩니다. 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 문법 1 - 속성의 값 가져오기 선택한 요소의 속성의 값을 가져온다. .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져온다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 선택한 요소에 속성을 추가한다. .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...
.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...
jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드
.has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...
jQuery / Method / .add() - 요소를 추가로 선택하는 메서드
.add() .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 $( 'ul' ).add( 'p' ) 는 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...
jQuery / Method / .insertBefore() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
.insertBefore()는 특정 요소 앞에 요소를 추가 또는 이동한다. 문법 p 요소 앞에 <h1>Hello</h1>를 추가한다. $( '<h1>Hello</h1>' ).insertBefore( 'p' ); p 요소 앞으로 h1 요소를 이동한다. $( 'h1' ).insertBefore( 'p' ); 예제 1 p 요소 앞에 <h1>Hello</h1>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...