jQuery (2)

hohoi·2023년 1월 21일


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

JQuery ?

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

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려 해야 함

미리 작성된 JAVASCRIPT 코드이기에 쓰기 전에 임포트 해줘야 함

jQuery 사용

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

<head>와 </head> 사이에 임포트

input 박스의 값 가져오기

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

id 태그를 이용함

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

$('#~').val() : 입력값 화면에 띄우기

div 보이기 / 숨기기

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

id 태그에 적절한 이름 지정

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

태그 내 html 입력하기

<div> ~ </div> 내에,
동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
카드가 붙는 div 에 id를 추가해주는 것이 핵심!

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
          ~
         </div>
    </div>
</div>

1) 버튼을 넣어보기

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

2) 버튼 말고, 카드를 넣어보기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

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">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

포스팅 박스 적용

'영화 기록하기'버튼을 누르면 포스트 박스 창이 나타나고, '닫기'를 누르면 없어지도록 해보자

1) 포스팅 박스 열기 버튼에 function 달기

function open_box(){
    alert('열린다!')
}
function close_box(){
    alert('닫힌다!')
}

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

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

버튼 눌렀을 때 반응해야 하므로 onclick 에 함수 적용

2) 클릭시 포스팅 박스 열고 / 닫기

포스팅 박스에 id값 주기

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

3) 포스팅 박스 제어하기

function open_box(){
    $('#post-box').show()
}
function close_box(){
    $('#post-box').hide()
}

$('#id값')

4) 포스팅 박스 시작부터 감춰두기

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

display: none;

Quiz

1번

1) 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기
2) 버튼을 눌렀을 때 아무것도 없으면 '입력하세요!' 얼럿 띄우기

 function q1() {
            let input_q1 = $('#input-q1').val()
            if (input_q1 == '') {
                alert('입력하세요!')
            } else {
                alert($('#input-q1').val())
            }
        }

2번

1) 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2) '@'가 없으면 '이메일이 아닙니다'라는 얼럿 띄우기
3) 이메일 도메인만 얼럿 띄우기

 function q2() {
            let input_q2 = $('#input-q2').val()
            if (input_q2.includes('@')) {
                let email = input_q2.split('@')[1].split('.')[0]
                alert(email);
            } else {
                alert('이메일이 아닙니다.');
            }
        }

'abcd'.includes('b') // True

3번

1) 이름을 입력하면 밑에 계속 추가로 등록되게 하기
2) 다지우기 버튼을 만들기

        function q3() {
            let input_q3 = $('#input-q3').val();
            if (input_q3 == '') {
                alert('이름을 입력하세요');
                return;
            }
            let temp_html = `<li>${input_q3}</li>`;
            $('#names-q3').append(temp_html);
        }

        function q3_remove() {

            $('#names-q3').empty();
        }

$('...').empty()

hohoi

응애 개발러

이전 포스트

HTML & CSS 구성 (1)

다음 포스트