jQuery

✨ 과제. 지난시간에 만들었던 script를 querySelector 와 querySelectorAll을 사용해서 바꿔보자.

<script>
    document.querySelector('.navbar-toggler').addEventListener('click', function(){
        //1. querySelector 
        document.querySelector('#list1').classList.toggle('show');
        
        //2. querySelectorAll
        document.querySelectorAll('.list-group')[0].classList.toggle('show');
    });
</script>

HTML 조작문법을 쉽게 바꿔주는 라이브러리들

jQuery , React, Vue, Angular

그 중에 쉬운 jQuery를 사용해보자.

위의 javascript 코드를 jQuery로 변환한 예시

<script>
    $('.navbar-toggler').on('click', function(){
        $('.list-group').toggleClass('show');
        $('.list-group').fadeToggle('show');
        $('.list-group-item').html('items');
        $('.list-group-item').css('color', 'rgb(255,0,220)');
    });
</script>

💎jQuery 라이브러리 사용 방법

jquery cdn 검색

복사 한 코드를 head에 삽입

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

    <link rel="stylesheet" href="main.css">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

</head>

🎈설정 단축키는 Ctrl + Alt + S

✨ 과제. 버튼 누르면 modal 창 띄우기 (jQuery 사용하기)

js007.html

<div class="black-bg">
    <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
    </div>
</div>

main.css

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
}
.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
}

PreviousquerySelector Next간단한 애니메이션 만들기

Last updated 1 year ago

<script> document.querySelector('.navbar-toggler').addEventListener('click', function(){ //1. querySelector document.querySelector('#list1').classList.toggle('show'); //2. querySelectorAll document.querySelectorAll('.list-group')[0].classList.toggle('show'); }); </script>

<script> $('.navbar-toggler').on('click', function(){ $('.list-group').toggleClass('show'); $('.list-group').fadeToggle('show'); $('.list-group-item').html('items'); $('.list-group-item').css('color', 'rgb(255,0,220)'); }); </script>

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <link rel="stylesheet" href="main.css"> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> </head>

.black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; } .white-bg { background: white; border-radius: 5px; padding: 30px; }