# jQuery

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

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



<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fjnwx17geHTI1uXwRxXyr%2Ffeatured_jquery-scaled.jpg?alt=media&#x26;token=7b0ceb75-9075-44c0-9921-741659ea251a" alt=""><figcaption></figcaption></figure>

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

jQuery , React, Vue, Angular

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



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

```javascript
<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 검색&#x20;

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FPIm4VvWN3XHEVQJeYSCk%2FScreenshot_48.png?alt=media&#x26;token=a3fab922-ddf7-4846-9706-765339d71d6d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FeONdUmOoiypeKzjfblBA%2FScreenshot_49.png?alt=media&#x26;token=5ce7aa54-5943-4e62-a5ed-b8d747d1cc06" alt=""><figcaption><p>script 복사 </p></figcaption></figure>

복사 한 코드를 head에 삽입

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

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FuzilEbMl9NGzmfmsq4pp%2FScreenshot_50.png?alt=media&#x26;token=7dbaee9f-db15-46d1-b3d1-b8143d6344eb" alt=""><figcaption><p>해당 코드위에 마우스 커서 가져간 후에 나타나는 팝업창에서 라이브러리 다운로드 클릭</p></figcaption></figure>

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2F3iIJdjyJYX3ZyU39mLKn%2FScreenshot_51.png?alt=media&#x26;token=320b9097-7e04-4d34-851a-43cb5ffacd51" alt=""><figcaption><p>설정에서 다운로드 된 jQuery 라이브러리 확인</p></figcaption></figure>

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



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

{% code title="js007.html" %}
```html
<div class="black-bg">
    <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
    </div>
</div>

```
{% endcode %}

{% code title="main.css" %}
```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;
}
```
{% endcode %}

