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 요소가 사라진 후 ...
Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커
jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법
특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...
jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드
.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드
.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
jQuery / .ajax() / 동기식으로 사용하는 방법
Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...
jQuery / Method / .parent() - 부모 요소 선택하는 메서드
.parent() .parent()는 어떤 요소의 부모 요소를 선택합니다. 문법 .parents( ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 은 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 은 p의 부모 요소가 div일 때만 녹색으로 만듭니다. 예제 ef를 클래스 값으로 갖는 ...
jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...
jQuery / Plugin / bxSlider / 슬라이더 플러그인
bxSlider는 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://bxslider.com/ GitHub : https://github.com/stevenwanderski/bxslider-4 홈페이지의 예제는 단순하지만, 옵션을 이용하여 다양한 활용이 가능합니다. 기본 사용법 jQuery, jquery.bxslider.min.js, jquery.bxslider.css를 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 다음과 같은 형식으로 마크업합니다. 클래스 값인 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-01.jpg" alt=""></div> <div><img src="images/slider-02.jpg" alt=""></div> <div><img src="images/slider-03.jpg" alt=""></div> <div><img ...
jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드
.hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다. easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다. complete : 사라진 다음 실행할 함수를 넣을 ...