Day 36

dokiru·2023년 3월 21일

학원TIL정리

학원

목록 보기

28/51

jQuery

: 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리

$기호

'jQuery' 예약어의 별칭
제이쿼리 변수, 함수를 자바스크립트의 변수, 함수 등과 구별하는 역할
선택자 조건을 만족하는 노드들이 여러개면 배열 형식의 객체를 반환
사용 방법

$('div').click(function(){})

위치필터 기본 선택자

사용 예시

$('li:first')...
$('li:last')...

종류

형식	기능(첨자가 0부터 시작됨)
first	선택된 엘리먼트들 중에서 첫 번째 엘리먼트를 선택
last	선택된 엘리먼트들 중에서 마지막 엘리먼트를 선택
odd	선택된 엘리먼트들 중에서 홀수 첨자 엘리먼트들을 선택
even	선택된 엘리먼트들 중에서 짝수 첨자 엘리먼트들을 선택
eq(n)	선택된 엘리먼트들 중에서 첨자 n인 엘리먼트를 선택
lt(n)	선택된 엘리먼트들 중에서 첨자 n인 엘리먼트보다 앞 엘리먼트들을 선택
gt(n)	선택된 엘리먼트들 중에서 첨자 n인 엘리먼트보다 뒤 엘리먼트들을 선택
not()	선택된 엘리먼트들 중에서 필터링 조건을 만족하지 않는 엘리먼트들을 선택

위치필터 계층 선택자

형식	기능(첨자가 1부터 시작됨)
first-child	선택된 엘리먼트들 중에서 부모의 첫 번째 자식 엘리먼트들만을 선택
last-child	선택된 엘리먼트들 중에서 부모의 마지막 자식 엘리먼트들만을 선택
nth-child(odd)	선택된 엘리먼트들 중에서 부모의 홀수 번째 자식 엘리먼트들만을 선택
nth-child(even)	선택된 엘리먼트들 중에서 부모의 짝수 번째 자식 엘리먼트들만을 선택
nth-child(n)	선택된 엘리먼트들 중에서 부모의 n번째 자식 엘리먼트만을 선택
nth-child(Xn+Y)	선택된 엘리먼트들 중에서 부모의 X배수 번째(Y번째부터 시작해서)에 있는 자식 엘리먼트들만을 선택
only-child	선택된 엘리먼트들 중에서 (형제 엘리먼트가 없는) 유일한 자식 엘리먼트들만을 선택

css 스타일 지정

맵(map) 방식

$('#targetUl li').css({ 'color': 'red', 'font-weight': 'bold' });

메소드 체인 방식

$('#targetUl li').css('color': 'red').css('font-weight': 'bold');

DOM 탐색 메소드

형식	기능
find	선택된 엘리먼트 중에서 조건을 충족하는 모든 자손 엘리먼트를 반환
children	선택된 엘리먼트 중에서 조건을 충족하는 모든 자식 엘리먼트들을 반환
parent	선택된 엘리먼트 중에서 부모 엘리먼트를 반환
parents	선택된 엘리먼트 중에서 조건을 충족하는 모든 조상 엘리먼트들을 반환
siblings	선택된 엘리먼트 중에서 자신을 제외한 조건을 충족하는 모든 형제 엘리먼트들을 반환
prev	선택된 엘리먼트 중에서 바로 앞에 위치한 조건을 충족하는 형제 엘리먼트를 반환
prevAll	선택된 엘리먼트 중에서 앞에 위치한 모든 조건을 충족하는 모든 형제
next	선택된 엘리먼트 중에서 바로 다음에 위치한 조건을 충족하는 형제 엘리먼트를 반환
nextAll	선택된 엘리먼트 중에서 다음에 위치한 조건을 충족하는 모든 형제 엘리먼트들을 반환

DOM 트리 엘리먼트 조작 메소드

형식	기능
append	선택된 엘리먼트의 마지막 자식 엘리먼트로 추가
prepend	선택된 엘리먼트의 첫 번째 자식 엘리먼트로 추가
after	선택된 엘리먼트의 뒤에 형제 엘리먼트로 추가
before	선택된 엘리먼트의 앞에 형제 엘리먼트로 추가
empty	선택된 엘리먼트의 내용을 비움(자식 엘리먼트만)
remove	선택된 엘리먼트를 제거(자신도 포함)
replaceWith	선택된 엘리먼트를 특정 엘리먼트로 바꿈
clone	선택된 엘리먼트를 복사
wrap	선택된 엘리먼트를 특정 엘리먼트로 둘러쌈(부모 엘리먼트로 삽입)
unwrap	선택된 엘리먼트의 부모 엘리먼트를 제거

ex. 동적으로 테이블 행을 추가하는 제이쿼리 코드

// html
<div class="container">
        <button id='addRowBtn' type="button" class="btn btn-primary">행 추가</button>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                    <th scope="col">Event</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>.</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                    <td>.</td>
                </tr>
                <tr id="tr3">
                    <th scope="row">3</th>
                    <td>Larry the Bird</td>
                    <td>3rd cell</td>
                    <td>@twitter</td>
                    <td><button type="button" id="3" class="btn btn-danger deleteBtn">삭제</button></td>
                </tr>
                <tr id="tr4">
                    <th scope="row">4</th>
                    <td>Larry the Bird</td>
                    <td>3rd cell</td>
                    <td>@twitter</td>
                    <td><button type="button" id="4" class="btn btn-danger deleteBtn">삭제</button></td>
                </tr>
            </tbody>
        </table>
    </div>

// Js (jQuery)
$(document).ready(function () {
            let rowCnt = 5;
            $('#addRowBtn').click(function () {
                //버튼을 누르면 실행할 코드
                $('#dynamicTbody').append(`<tr id=tr${rowCnt}><th scope="row">${rowCnt}</th><td>Larry the Bird</td><td>3rd cell</td><td>@twitter</td><td><button id=${rowCnt} type="button" class="btn btn-danger deleteBtn">삭제</button></td></tr>`);
                rowCnt++;
            });

            // 동적으로 만들어진 행의 버튼에 대한 이벤트를 관리해주기 위해 document.on 사용
            $(document).on('click', '.deleteBtn', function () {
                // 이벤트를 트리거한 요소에 접근하기 위해 $(this)로 접근
                // attr('id')를 통해서 요소의 속성, id에 접근
                const rowIdx = $(this).attr('id');
                $(`#tr${rowIdx}`).remove();
            })

			// 원래 있던 삭제 버튼에 대한 이벤트 추가
            $('.deleteBtn').click(function () {
                console.log('기존에 있던건 클릭이 됨');
            })
        })

속성 값 불러오기, 세팅하기

$('a').attr('href'); // 불러오기
$('a').attr('href', "https://www.daum.net"); // 설정하기

$("#inp").val(); // 불러오기
$("#inp").val("세팅할 값"); // 설정하기

animate()

기본적인 효과 이외에 맞춤형 효과를 사용자가 직접 정의하여 사용
수치값을 사용하는 CSS3 스타일 속성값은 모두 사용 가능

animate(객체[properties],지속시간[,ms],콜백함수[,function( ))

예시

$('p').animate({font-size: "3em"}, 2000); // 문단 글자 크기를 3배로 확대하는 효과
$('div').animate({height: "25%"}, "slow"); // div 영역의 높이를 1/4로 축소하는 효과
$('div:has(img)').animate({width: "0px"}, 1000); // 이미지가 포함된 div 영역을 왼쪽으로 접는 효과

ex. 그림의 animate

1. 
$(document).ready(function () {
		// 물고기 노드 구하기.
		var $fish = $("#fish");
        
        // 플래그 세우기
		let isAtRight = false;
		let leftVal = "50px";

        // 버튼에 이벤트 걸기.
        $("#btnStart").click(function () {
          	leftVal = isAtRight ? "50px" : "430px";
            $fish.animate({
            left: leftVal,
            }, 1000);
            isAtRight = !isAtRight;
        });
})

2.
$(document).ready(function () {
		// 물고기 노드 구하기.
		var $fish = $("#fish");
        
        // 플래그 세우기
		let isAtRight = false;
        
        // 버튼에 이벤트 걸기.
        $("#btnStart").click(function () {
          	if (isAtRight) {
            $fish.animate({
            left: "50px",
            }, 1000);
            } else {
            $fish.animate({
            left: "430px",
            }, 1000);
            }
            isAtRight = !isAtRight;
       })
 })

+++ 참고하기 좋은 사이트

설명	주소
css 템플릿 참고용	https://www.free-css.com/free-css-templates
색상 조합	https://colorhunt.co/
css 및 기능 오픈 라이브러리	https://getbootstrap.kr/
한글 폰트	https://noonnu.cc/
아이콘 활용	https://fontawesome.com/
애니메이션 css	https://animate.style/
jQuery UI 플러그인	https://jqueryui.com/