새소식

인기 검색어

개발 공부 일지/웹

JQuery 시작하기

  • -
반응형

jQuery 란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!

  • 예를 들어 버튼의 색깔을 바꾸고 싶다면?
  • 예를 들어 div 박스를 하나 감추고 싶다면?
  • → 이런 것들 쉽게 해주는 것이, jQuery!
document.getElementById("element").style.display = "none";
$('#element').hide();

위처럼 Javascript로 길고 복잡하게 써야 하는 것을 jQuery로 보다 직관적으로 쓸 수 있고 편리하다.

jQuery를 사용하는 방법

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부르고 <head>와 </head> 사이에 아래를 넣으면 끝!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

아래는 오늘 사용할 페이지 코드

더보기 
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타 피디아</title>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        function hey(){
            alert('안녕!');
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="hey()">영화 기록하기</button>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안 보이게 해 줘!

css에서는 선택자로 class를 썼지만 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.

input 박스의 값을 가져와보기

input 박스

input 박스는 URL에 있는 값을 가져오는 것, 또는 입력하는 것!

값을 가져오려면 지정을 해주고 그 값을 가져와야 하는데 Css에서는 <div class="mytitle"> 처럼 class를 이용해서 이름표를 만들어 주었다.

jQuery에서는 id라는 걸로 사용한다.

<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<input type="email" class="form-control" id="url" placeholder="name@example.com">

부트스트랩에서 복사해온 코드 내용에 id가 있는데 floatingInput 이것을 알아보기 쉽게 url로 수정하였다.

console 창을 열고 $('#url').val('입력을 하고 싶다') 입력하고 enter를 치면 아래처럼 브라우저에 바로 반영된 모습을 확인할 수 있다.

값을 가져오는 것

$('#url') id url인 애에다가 jQuery를 먹일건데 그 먹일 것이 무엇이냐면 .val('입력을 하고 싶다') 걔의 value를 넣고 싶어 지금 이런 형식이다.

입력하는 것

console 창에서 $('#url').val() 입력하고 enter를 치면 '홍길동'이라고 value를 가져온다.

 

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

div 보이기 / 숨기기

<div class="mypost">
<div class="mypost" id="post-box">

mypost 이름표를 id 값을 주어 변경한 코드

반영된 모습

console 창에 $('#post-box').hide() 입력 후 enter를 치면 post-box가 사라진 모습을 확인할 수 있다.

post-box가 사라짐

box를 없애는 게 hidr() 이고 $('#post-box').show()하면 보여진다.

post-box가 다시 보여지는 모습

태그 내 html 입력하기

  • <div> ~ </div> 내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
  • 카드가 붙는 div에 id를 추가해주는 것이 핵심!
<div class="row row-cols-1 row-cols-md-4 g-4">
<div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">

id 코드를 추가해주었다.

console 창에 let temp_html = `<button>나는 버튼이다</button>` 코드를 입력하면 아무 반응이 없다.

temp_html(let temp_html)에 html과 비슷한 문자열(`<button>나는 버튼이다</button>`)이 들어가 있는 것이다.

그래서 `<button>나는 버튼이다</button>` 얘를 html화 시켜주는 jQuery의 기능을 써야 한다.

 

console 창에 $('#cards-box').append(temp_html) 입력 후 enter를 친다.

cards-box에다가 let temp_html = `<button>나는 버튼이다</button>`를 html화(append(temp_html)) 시키겠다는 말.

button이 생성 되었다.

console 창에 키보드 이동 키 윗키를 누르고 엔터를 쳐보자.

콘솔 창에서 실행한 모습
브라우저에 늘어난 버튼

만약에 let temp_html = `<button>나는 버튼이다</button>` 대신에 <div class="col"...> (아래 스샷에) 애가 있으면 카드가 붙는다.

코드를 접어논 모습

console 창에 let temp_html = `` 입력 후 아래 코드를 복사한 후 백틱 안에 코드를 넣는다.

<div class="col">
    <div class="card h-100">
        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
             class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">영화 제목이 들어갑니다</h5>
            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">나의 한줄 평을 씁니다</p>
        </div>
    </div>
</div>

 

콘솔 창에 입력한 후 엔터

그리고 console 창에 $('#cards-box').append(temp_html) 입력 후 enter 브라우저에서 확인하면 card가 붙는다.

console 창에 입력한 것

console 창에서 let mytitle = '타이타닉' 입력 후 엔터 let temp_html = `<div class="col"> 내용 중에 <h5 class="card-title">영화 제목이 들어갑니다</h5> 내용을 <h5 class="card-title">${mytitle}</h5> 이렇게 수정한 후 엔터 $('#cards-box').append(temp_html) 반복 입력해주고 브라우저에서 확인을 하면 제목이 타이타닉으로 바뀌어 있는 것을 확인할 수 있다.

타이타닉으로 바뀐 모습

포스팅 박스 열기 버튼에 function을 달기

영화 기록하기 버튼

영화 기록하기 버튼을 클릭하면 아래 박스가 나오고 닫기 버튼을 클릭하면 박스가 들어가게 만들어 보자!

영화 기록하기 버튼에 함수를 만들어서 붙이고 닫기 버튼에  하나 만들어 oneclock으로 붙이면 된다.

페이지 코드에서 script 안에 아래 코드를 넣고

function open_box() {
    alert('박스 열기')
}
function close_box() {
    alert('박스 닫기')
}

페이지 코드

<button onclick="hey()">영화 기록하기</button>
<button onclick="open_box()">영화 기록하기</button>

hey() 값을 open_box로 수정해준 후 닫기 버튼이 있는 부분도 찾아서 수정해준다.

<button type="button" class="btn btn-outline-dark">닫기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

onclick="close_box()" 내용을 추가해준 모습이다.

영화 기록하기 버튼을 클릭한 모습
닫기 버튼을 클릭한 모습

클릭해서 포스팅 박스를 여닫게 하기

function open_box() {
    alert('박스 열기')
}
function close_box() {
    alert('박스 닫기')
}
function open_box() {
    $('#post-box').show()
}
function close_box() {
    $('#post-box').hide()
}

위와 같이 코드를 수정해주고 브라우저에서 확인을 해보자!

닫기 버튼을 클릭한 모습
영화 기록하기 버튼을 클릭한 모습

.mypost {
    width: 95%;
    max-width: 500px;
    margin: 20px auto 0px auto;
    padding: 20px;
    box-shadow: 0px 0px 3px 0px gray;
    display: none;
}

위 코드처럼 mypost에 display: none; 을 추가해주면 브라우저를 열었을 때 기록하기 박스가 사라져 처음엔 나오지 않고 영화 기록하기 버튼을 클릭하면 박스가 나타난다.

반응형

'개발 공부 일지 > 웹' 카테고리의 다른 글

서버-클라이언트 통신 이해하기  (0) 2022.09.04
JQuery + Javascript 연습하기  (0) 2022.09.04
Javascript 복습 - 홀짝 판별 onclick 함수 만들어보기  (0) 2022.09.03
1주차 숙제하기  (1) 2022.09.02
숙제 아이유 팬명록 만들어 보자  (0) 2022.09.01
Contents

당신이 좋아할만한 콘텐츠

댓글 0

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

SHARE

DARK

MENU

티스토리툴바