IT Cookbook, HTML5 프로그래밍 입문 (3판)

11장 jQuery 라이브러리

이 페이지의 예제들은 내용을 alert() 함수로 출력하지 않고, 화면에 출력하게 했습니다.

jQuery를 읽어 들이는 기본 코드입니다.

코드 11-1 jquery_basic.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

        });
    </script>
</head>
<body>

</body>
</html>

기본 예제 11-1 문서 객체 선택

371페이지

코드 11-2 jquery_select.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 스타일 속성을 변경합니다.
            $('h1').css('color', 'red');
            $('h1').css('background', 'black');
        });
    </script>
</head>
<body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
</body>
</html>

기본 예제 11-2 문서 객체 속성 추출

373페이지

코드 11-3 jqControl_attrGet.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 속성을 추출합니다.
            var src = $('script').attr('src');

            // 출력합니다.
            $('body').append(src);
        });
    </script>
</head>
<body>

</body>
</html>

기본 예제 11-3 문서 객체 속성 조작

375페이지

코드 11-4 jqControl_attrSetBasic.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 속성을 지정합니다.
            $('img').attr('alt', 'jQuery 라이브러리를 사용한 속성 지정');
            $('img').attr('src', 'http://placehold.it/100x100');
            $('img').attr('width', '100');
        });
    </script>
</head>
<body>
    <img>
    <img>
    <img>
</body>
</html>
코드 11-5 jqControl_attrSetObject.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 속성을 지정합니다.
            $('img').attr({
                alt: 'jQuery 라이브러리를 사용한 속성 지정',
                src: 'http://placehold.it/100x100',
                width: 100
            });
        });
    </script>
</head>
<body>
    <img>
    <img>
    <img>
</body>
</html>
코드 11-6 jqControl_attrSetFunction.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 속성을 지정합니다.
            $('img').attr({
                alt: 'jQuery 라이브러리를 사용한 속성 지정',
                src: function (index) {
                    // 변수를 선언합니다.
                    var size = (index + 1) * 100;

                    // 리턴합니다.
                    return 'http://placehold.it/' + size + 'x100';
                }
            });
        });
    </script>
</head>
<body>
    <img>
    <img>
    <img>
</body>
</html>

기본 예제 11-4 문서 객체 스타일 조작

378페이지

코드 11-8 jqControl_styleSetBasic.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 스타일을 적용합니다.
            $('.box').css('float', 'left');
            $('.box').css('margin', 10);
            $('.box').css('width', 100);
            $('.box').css('height', 100);
            $('.box').css('backgroundColor', 'red');
        });
    </script>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>
코드 11-9 jqControl_styleSetObject.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 스타일을 적용합니다.
            $('.box').css({
                float: 'left',
                margin: 10,
                width: 100,
                height: 100,
                backgroundColor: 'red'
            });
        });
    </script>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>
코드 11-10 jqControl_styleSetFunction.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 문서 객체를 추가합니다.
            var output = '';
            for (var i = 0; i < 256; i++) {
                output += '<div></div>';
            }
            document.body.innerHTML = output;

            // 스타일을 적용합니다.
            $('div').css({
                height: 2,
                backgroundColor: function (i) {
                    return 'rgb(' + i + ',' + i + ',' + i + ')';
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>

기본 예제 11-5 문서 객체 글자 조작

381페이지

코드 11-11 jqControl_textHtmlSet.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 내부 글자를 변경합니다.
            $('h1:nth-child(1)').text('<a href="#">text()</a>');
            $('h1:nth-child(2)').html('<a href="#">html()</a>');
        });
    </script>
</head>
<body>
    <h1>Header - 0</h1>
    <h1>Header - 1</h1>
</body>
</html>

382페이지

코드 11-12 jqControl_textHtmlGet.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 변수를 선언합니다.
            var text = $('h1').text();
            var html = $('h1').html();

            // 출력합니다.
            $('body').append("<p>text: " + text + '</p>');
            $('body').append("<p>html: " + html + '</p>');
        });
    </script>
</head>
<body>
    <h1>Header - 0</h1>
    <h1>Header - 1</h1>
</body>
</html>

기본 예제 11-6 클래스 조작

383페이지

코드 11-13 jqControl_classSet.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <style>
        #box {
            width: 100px; height: 100px;
            background-color: red;
        }

        #box.hover {
            background-color: blue;
            border-radius: 50px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            $('#box').hover(function () {
                // 스타일을 변경합니다.
                $('#box').addClass('hover');
            }, function () {
                // 스타일을 변경합니다.
                $('#box').removeClass('hover');
            });
        });
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

기본 예제 11-7 click 이벤트 연결

386페이지

코드 11-14 jqEvent_click.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 이벤트를 연결합니다.
            $('h1').click(function () {
                alert('클릭!');
            });
        });
    </script>
</head>
<body>
    <h1>Click</h1>
</body>
</html>

기본 예제 11-8 복합 이벤트 연결 메서드

387페이지

코드 11-15 jqEvent_hover.html
<!DOCTYPE html>
<html>
<head>
    <title>Animate Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 이벤트를 연결합니다.
            $('h1').hover(function () {
                // 색상을 변경합니다.
                $(this).css({
                    background: 'red',
                    color: 'white'
                });
            }, function () {
                // 색상을 제거합니다.
                $(this).css({
                    background: '',
                    color: ''
                });
            });
        });
    </script>
</head>
<body>
    <h1>Click</h1>
</body>
</html>

기본 예제 11-9 일반 이벤트 연결

388페이지

코드 11-16 jqEvent_on.html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basic</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            // 스타일 변경 및 이벤트 연결
            $('#box').css({
                width: 100,
                height: 100,
                background: 'orange'
            }).on('click', function () {
                $(this).css('background', 'red');
            }).on('mouseenter', function () {
                $(this).css('background', 'blue');
            }).on('mouseleave', function () {
                $(this).css('background', 'orange');
            });
        });
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

기본 예제 11-10 기본 이벤트 제거

391페이지

코드 11-18 jqEvent_preventDefault.html
<!DOCTYPE html>
<html>
<head>
    <title>Event Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 이벤트를 연결합니다.
            $('a').click(function (event) {
                // 출력합니다.
                alert('click');

                // 기본 이벤트를 제거합니다.
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
    <a href="http://hanb.co.kr">Hanbit Academy</a>
</body>
</html>

기본 이벤트 제거를 활용한 유효성 검사

392페이지

코드 11-19 reference_validate.html
<!DOCTYPE html>
<html>
<head>
    <title>Event Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 이벤트를 연결합니다.
            $('form').submit(function (event) {
                // input 태그의 값을 추출합니다.
                var value = $('input').val();

                // 유효성을 검사합니다.
                if (value.replace(/[가-힣]/g, '').length == 0) {
                    // 유효성 검사 통과
                    alert('과정을 진행합니다.');
                } else {
                    // 유효성 검사 실패
                    alert('한글 이름을 입력해주세요.');
                    event.preventDefault();
                }
            });
        });
    </script>
</head>
<body>
    <form>
        <label>이름</label>
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

기본 예제 11-11 태그가 사라졌다가 나타나는 효과

396페이지

코드 11-20 jqAnimate_fade.html
<!DOCTYPE html>
<html>
<head>
    <title>Event Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 이벤트를 연결합니다.
            $('button').click(function () {
                // 간단한 효과를 적용합니다.
                $('.page').fadeToggle('slow');
            });
        });
    </script>
</head>
<body>
    <button>Toggle Show</button>
    <div class="page">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
</body>
</html>

기본 예제 11-12 애니메이션 효과

398페이지

코드 11-21 jqAnimate_animate.html
<!DOCTYPE html>
<html>
<head>
    <title>Animate Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 스타일을 변경합니다.
            $('#box').css({
                width: 100,
                height: 100,
                background: 'red'
            }).animate({
                width: 300,
                opacity: 0.5,
            }, 500);
        });
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

기본 예제 11-13 애니메이션 효과 정지

402페이지

코드 11-24 jqAnimate_stop.html
<!DOCTYPE html>
<html>
<head>
    <title>Animation Basic</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {
            // 변수를 선언합니다.
            var clearQueue = false;
            var goToEnd = false;

            // 이벤트를 연결합니다.
            $('#clearQueue').change(function () {
                clearQueue = $(this).prop('checked')
            });

            $('#goToEnd').change(function () {
                goToEnd = $(this).prop('checked');
            });

            $('#stopButton').click(function () {
                $('#box').stop(clearQueue, goToEnd);
            });

            // 스타일을 변경합니다.
            $('#box').css({
                width: 100,
                height: 100,
                background: 'red'
            })

            // 타이머를 연결합니다.
            setInterval(function () {
                $('#box').animate({
                    width: 200
                }, 1000).delay(1000).animate({
                    width: 100,
                    height: 100
                }, 1000);
            }, 3000);
        });
    </script>
</head>
<body>
    <!-- 입력 양식 -->
    <label>clearQueue</label>
    <input id="clearQueue" type="checkbox">
    <br>
    <label>goToEnd</label>
    <input id="goToEnd" type="checkbox">
    <br>
    <button id="stopButton">Stop</button>
    <!-- 애니메이션 -->
    <div id="box"></div>
</body>
</html>

← 12장 →