[JS] JQuery 라이브러리

JQuery 라이브러리

모든 웹 브라우저에서 동작하는 클라이언트용 자바스크립트 라이브러리

파일을 여러 서버에 분산시키고 사용자가 접속하는 지역과 가장 가까운 곳의 서버에서 파일을 전송하는 기술

JQuery 기본

<head>
    <title>jQuery Basic</title>
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

window.onload 이벤트와 같은 기능을 수행한다.
    <script>
        $(document).ready(function () {	//window.onload 이벤트와 같은 기능을 수행한다.
        });
    </script>
</head>
<body></body>

JQuery 라이브러리 형태

$ ( 선택자 ) . 메서드 ( 매개변수, 매개변수 ) ;

window.JQuery = window.$ = jQuery

<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 스타일 속성을 변경합니다.
            $('h1').css('color', 'red');
            $('h1').css('background', 'black');
        });
</script>

속성 조작

attr() 문서 객체 속성을 조작할 때 사용하는 메서드

속성 추출

var src = $ (‘img’) . attr (‘src’) ;

img 태그의 src 속성 추출

<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>

속성 지정

① 속성 값을 입력해 지정하는 방법

attr() 메서드의 첫 번째 매개변수에 속성 이름을 입력, 두 번째 매개변수에 속성 값 입력

// 속성 값을 입력해 속성 지정
$(‘img’).attr(‘src’, ‘http://place~/300x200’);

② 객체를 입력해 속성을 지정하는 방법

attr() 매개변수에 객체 넣기

// 객체를 입력해 속성 지정
$(‘img’).attr({
	src : ‘http://place~/300x200’’ ,
	width : 300, height : 200
});

③ 함수를 이용해 속성을 지정하는 방법

attr() 메서드의 첫 번째 매개변수에는 속성 이름 입력, 두 번째 매개변수에 함수 입력

두 번째 매개변수에 함수를 입력하면 해당 콜백 함수의 매개변수로 문서 객체 인덱스 전달

$(‘img’).attr( ‘src’, function (index) {
	// 변수를 선언합니다.
	var size = (index + 1) *100;
	// 반환합니다.
	return ‘http://place~’ + size + ’x100‘;
});

속성값을 입력해 속성 지정하기

jQuery 라이브러리를 사용해 문서 객체를 선택하고 메서드를 실행하면 모든 문서 객체에 한 번에 적용됨

<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>

객체를 입력해 속성 지정하기

<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>

함수를 이용해 속성 지정하기

scr 속성에 함수를 지정하면 콜백 함수에 index 객체가 순서대로 지정되고, 반환 값을 속성에 적용

<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>

메서드 체이닝

jQuery 라이브러리에서 문서 객체를 조작하는 메서드는 호출 이후에 자기 자신을 다시 반환

따라서 $() 함수를 여러번 사용할 필요 없이 메서드를 연속해서 사용 가능

<script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 속성을 지정합니다.
            $('img').attr('alt', 'jQuery 라이브러리를 사용한 속성 지정').attr('src', 'http://placehold.it/100x100').attr('width', '100');
        });
</script>

스타일 조작

css() 스타일을 조작할 때 사용하는 메서드

하이픈(-)이 들어가는 스타일 속성은 두 가지 방법으로 입력하기 (문자열로 표현하기)

① $(‘body’).css(‘backgroundColor’);

② $(‘body’).css(‘background-color’);

- 속성 값을 입력해 스타일 속성 지정하기, css() 메서드 두 번째 매개변수에 속성 값 입력

<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>

- 객체를 입력해 스타일 속성 지정하기

<script>
        $(document).ready(function () {
            // 스타일을 적용합니다.
            $('.box').css({
                float: 'left',
                margin: 10,
                width: 100,
                height: 100,
                backgroundColor: 'red'
            });
        });
</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) {
		// ‘background-color’: function (i)   => 따옴표로 문자열 취급하면 사용 가능!
                    return 'rgb(' + i + ',' + i + ',' + i + ')';
                }
            });
        });
</script>

글자 조작

- html() 문서 객체 내부의 HTML 태그 조작

html() 메서드를 사용하면 글자에 태그가 적용

<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>

- text() 문서 객체 내부의 글자 조작

text() 메서드를 사용하면 일반 글자처럼 출력

<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>

text() 메서드는 선택된 모든 문서 객체의 글자를 추출
html() 메서드는 첫 번째 위치한 문서 객체의 글자를 추출

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

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

클래스 조작

addClass() 클래스 추가

removeClass() 클래스 제거

toggleClass() 클래스 전환

<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>

이벤트

- 이벤트 연결

ready() 이벤트(문서 객체 준비 완료 이벤트)가 연결됨

// 이벤트를 연결합니다.
$(document).ready(function() {
});

$(selector).method(function(event){});

- 클릭 이벤트 연결

$(document).ready(function () {
    // 이벤트를 연결합니다.
    $('h1').click(function () {
        alert('클릭!');
   });
 });

- 복합 이벤트 연결

<script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 이벤트를 연결합니다.
            $('h1').hover(function () {	// 마우스 커서 올린 후
                // 색상을 변경합니다.
                $(this).css({
                    background: 'red',
                    color: 'white'
                });
            }, function () {			// 마우스 커서 내려와있을 때
                // 색상을 제거합니다.
                $(this).css({
                    background: '',
                    color: ''
                });
            });
        });
</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');
            });
        });

기본 이벤트 제거

$('a').click(function (event) {
   // 출력합니다.
   alert('click');
   // 기본 이벤트를 제거합니다.
   event.preventDefault();
});

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

<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>

+ 회원가입 폼에 유효성 검사로 사용할 String.test 메소드

var pattern_num = /[0-9]/;	// 숫자 
var pattern_eng = /[a-zA-Z]/;	// 문자 
var pattern_spc = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
var pattern_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크

//pattern_OOO.test(str) => true면 해당 문자 있음, false면 해당 문자 없음!
if( (pattern_num.test(str)) && !(pattern_eng.test(str)) && !(pattern_spc.test(str)) && !(pattern_kor.test(str)) ){
    return true;
}else{
    alert("숫자만 입력 가능합니다.");
    return false;
}

시각 효과

문서 객체를 보이거나 보이지 않게 만드는 간단한 효과 메서드

show(속도) : 문서 객체가 커지며 표시

hide(속도) :문서 객체가 작아지며 사라짐

toggle(속도) : show() 메서드와 hide() 메서드를 번갈아 실행

slideDown(속도) : 문서 객체가 슬라이드 효과와 함께 표시

slideUp(속도) : 문서 객체가 슬라이드 효과와 함께 사라짐

slideToggle(속도) : slideDown()메서드와 slideUp()메서드를 번갈아 실행

fadeIn(속도) : 문서 객체가 선명해지며 표시

fadeOut(속도) : 문서 객체가 흐려지며 사라짐

fadeToggle(속도) : fadeIn()메서드와 fadeOut()메서드를 번갈아 실행

속도 문자열

slow : 600밀리초 속도

normal : 500밀리초 속도

fast : 400밀리초 속도

$('button').click(function () {
	// 간단한 효과를 적용합니다.
	$('.page').fadeToggle('slow');
});

애니메이션 효과

① $(selector).animate(속성 객체);

② $(selector).animate(속성 객체, 시간);

③ $(selector).animte(속성 객체, 시간, 콜백 함수);

left, top 속성과 같은 위치 속성을 지정하려면 position 속성을 absolute 또는 relative 지정

<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>

애니메이션 정지 메서드

- delay() 애니메이션을 특정 시간만큼 정지

- stop() 애니메이션을 완전히 정지

$('#box').stop(clearQueue, goToEnd);

ClearQueue 매개변수의 기본 값은 false로 현재 실행 중인 애니메이션만 멈추지만,

true를 입력하면 예약된 모든 애니메이션을 제거

goToEnd 매개변수를 사용하지 않고 애니메이션 진행 중에 stop()메서드를 사용하면 그 시점에서 애니메이션 멈춤

$('#box').animate({ }).delay(1000).animate({ });

1초 동안 멈춤

'WEB > JS' 카테고리의 다른 글

[JS] 자바스크립트 함수 표현식 (0)	2022.03.16
[JS] VSCode에서 JS 콘솔 실행하기 (node.js 설치) (0)	2022.03.12
[JS] let과 constant 변수 (0)	2022.03.12
[JS] 문서 객체 모델 (0)	2022.02.11
[JS] 자바스크립트 기본 문법 (0)	2022.02.11

❄snow_white의 개발자 일기❄

[JS] JQuery 라이브러리

'WEB > JS' 카테고리의 다른 글

댓글

티스토리툴바

[JS] JQuery 라이브러리

'WEB > JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바