[jQuery] 1. jQuery 기본

앙버터·2023년 12월 7일
0

Web Programming

목록 보기
4/7

1.1 개요

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

  • 기능
    1) 문서 객체 모델(DOM)과 관련된 처리를 쉽게 구현
    2) 일관된 이벤트 연결을 쉽게 구현
    3) 시각적 효과를 쉽게 구현
    4) Ajax 애플리케이션을 쉽게 개발

1.2 다운로드

1) CDN 호스트를 사용 (구글, ms에서 지원)
2) 직접 내려받아 사용하는 방법

	// CDN
    <script src="jquery-3.1.1.js"></script>
  • CDN : Content Delivery Network

1.3 $(document).ready()

  • jQuery를 사용한 모든 웹 페이지는 이 코드로 시작한다.
  • onload : 웹브라우저의 html의 모든 tag를 javascript object로 변환한 후에, window에 모든 tag를 화면에 display하기 전에 발생하는 event
    window.onload = function () { };
  • $(document).ready()는 window.onload와 동일한 기능

$(document) : JS object
.ready : $(document) object의 method

// javascript에서는 1개의 event에 대하여 여러개의 함수를 등록 가능
$(document).ready(function () {
    alert('First READY');
});
$(document).ready(function () {
	alert('Second READY');
});
$(document).ready(function () {
	alert('Third READY');
});

1.4 기본 선택자

  • 제이쿼리 메소드의 가장 기본적인 형태
  • CSS selector(선택자)와 동일한 문법
  • $('h1').css('color', 'red');
    $ : JS Object
    ('h1') : 선택자
    .css('color', 'red') : 메소드

'*' : 전체 선택자
'태그 이름' : 태그 선택자

 <head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        // $('selector') => selector사용 문법은 CSS selector 사용문법과 동일
        $(document).ready(function () {
            // 전체 선택자(wild card selector) : '*'
            $('*').css('color', 'red');
        });
        // 태그 선택자(tag selector)
        $(document).ready(function () {
            // $('h1') => document.getElementsByTag() 함수를 사용하는 것과 동일한 효과제공
            $('h1').css('color', 'orange');
        });
        $(document).ready(function () {
            $('h2, h3').css('color', 'blue');
        });
    </script>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <h1>Lorem ipsum</h1>
    <p>consectetur adipiscing elit.</p>
    <h2>Lorem ipsum</h2>
    <h3>Lorem ipsum</h3>
</body>
  • 결과

'#id 이름' : 아이디 선택자

<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            // id selector
            $('#target').css('color', 'orange');
            // $('h1#target').css('color', 'orange');
        });
    </script>
</head>
<body>
    <h1>Header-0</h1>
    <h1 id="target">Header-1</h1>
    <h1>Header-2</h1>
</body>
  • 결과

'.클래스 이름' : 클래스 선택자

<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            // class selector
            $('.item').css('color', 'orange');
            $('h1.item').css('background', 'red');
            $('.item.select').css('color', 'blue');
        });
    </script>
</head>
<body>
    <h1 class="item">Header-0</h1>
    <h1 class="item select">Header-1</h1>
    <h1 class="item">Header-2</h1>
</body>
  • 결과

1.5 자손 선택자와 후손 선택자

  • A > B : 자손 선택자
    A의 자손 중 B를 선택
  • A B : 후손 선택자
    A의 모든 후손 중 B를 선택
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            // child selector
            $('div > *').css('color', 'red');
            // all descendent(자식, 손자 등 모든 후손을 선택) selector
            $('div *').css('color', 'red');
        });
    </script>
</head>
<body>
    <div>
        <ul>
            <li>Apple</li>
            <li>Bag</li>
            <li>Cat</li>
            <li>Dog</li>
            <li>Elephant</li>
        </ul>
        <p>this is paragraph</p>
    </div>
</body>
  • 결과

1.6 속성 선택자

속성 선택자

<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            // val() : input tag의 내용(값, value)을 설정하는 메소드
            $('input[type="text"]').val('Hello jQuery..!');
        });
    </script>
</head>
<body>
    <input type="text" />
    <input type="password" />
    <input type="radio" />
    <input type="checkbox" />
    <input type="file" />
</body>
  • 결과

1.7 필터 선택자

기본 선택자 뒤에 사용

  • 입력 양식 필터 선택자
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            // 5초 후에 코드를 실행합니다.
            setTimeout(function () {
                // 변수 value 선언
                // select > option => select의 자손 중 option 선택
                // option:selected => (filter) option 객체 중 선택된 태그를 선택
                var value = $('select > option:selected').val();
                // 출력
                alert(value);
            }, 5000);
        });
    </script>
</head>
<body>
    <select>
        <option>Apple</option>
        <option>Bag</option>
        <option>Cat</option>
        <option>Dog</option>
        <option>Elephant</option>
    </select>
</body>

  • 위치 필터 선택자
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            $('tr:odd').css('background', 'red');
            $('tr:even').css('background', '#9F9F9F');
            // $('tr:first').css('background', '#000000') => javascript object
            // css method의 return값은 javascript object
            $('tr:first').css('background', '#000000').css('color', '#FFFFFF');
        });
    </script>
</head>
<body>
    <table>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
    </table>
</body>

  • 함수 필터 선택자
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            $('tr:eq(0)').css('background', '#000000').css('color', 'white');
            // 3n+1 => 3으로 나누었을 때 나머지가 1
            $('td:nth-child(3n+1)').css('background', 'yellow');
            $('td:nth-child(3n+2)').css('background', 'red');
            $('td:nth-child(3n)').css('background', 'blue');
        });
    </script>
</head>
<body>
    <table>
        <tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
        <tr><td>강민수</td><td>AB형</td><td>서울특별시 송파구</td></tr>
        <tr><td>구지연</td><td>B형</td><td>미국 캘리포니아</td></tr>
        <tr><td>김미화</td><td>AB형</td><td>미국 메사추세츠</td></tr>
        <tr><td>김선화</td><td>O형</td><td>서울 강서구</td></tr>
        <tr><td>남기주</td><td>A형</td><td>서울 노량진구</td></tr>
        <tr><td>윤하린</td><td>B형</td><td>서울 용산구</td></tr>
    </table>
</body>

1.8 배열 관리

each() 메소드 사용
매개변수로 입력한 함수로, 반복문처럼 객체나 배열의 요소를 검사

$.each(object, function(index, item){})
$(selector).each(function(index, item){})
<script>
        $(document).ready(function () {

            var array = [
                { name: 'Hanbit Media', link: 'http://hanbit.co.kr' },
                { name: 'Naver', link: 'http://naver.com' },
                { name: 'Daum', link: 'http://daum.net' }
            ];
  
            // $.each() 메서드를 사용
            // $ => javascript object, each : method
            // index : array 배열의 index, item => { name: 'Hanbit Media', link: 'http://hanbit.co.kr' }
  			// each method의 callback function 선언
            $.each(array, function (index, item) {

                var output = '';

                output += '<a href="' + item.link + '">';
                output += '    <h1>' + item.name + '</h1>';
                output += '</a>';

                document.body.innerHTML += output;
            });
        });
</script>

<head>
    <style>
        .high-light-0 { background: yellow; }
        .high-light-1 { background: orange; }
        .high-light-2 { background: blue; }
        .high-light-3 { background: green; }
        .high-light-4 { background: red; }
    </style>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
  • addClass()
            // $('h1') => 5개 h1 객체를 갖고 있는 array 가 return
            $('h1').each(function (index, item) {
                $(item).addClass('high-light-' + index);
                // $(this).addClass('high-light-' + index);
      		});
  • $(selector).each()
            $('h1').addClass(function (index) {
            	return 'high-light-' + index;
            });
        });
    </script>
</head>
<body>
    <!-- <h1 class="high-light-0">item - 0</h1> -->
    <h1>item - 0</h1>
    <h1>item - 1</h1>
    <h1>item - 2</h1>
    <h1>item - 3</h1>
    <h1>item - 4</h1>
</body>

1.9 객체 확장

  • $.extend() : 많은 수의 속성을 추가할 때 사용
<script>
        $(document).ready(function () {
            var object = { name: '윤인성' };
            // $.extend()
            $.extend(object, {
                region: '서울특별시 강서구',
                part: '세컨드 기타'
            });

            var output = '';
            // each method : array, object 둘 다 사용가능
            // key : object의 속성이름, item : object 속성 값
            $.each(object, function (key, item) {
                output += key + ': ' + item + '\n';
            });
            alert(output);
        });
</script>

1.10 jQuery 충돌 방지

  • $.noConflict() ➡ 더이상 식별자 $ 를 사용할 수 없음
profile
그래도 해야지 어떡해

0개의 댓글