jquery는 id 값을 통해 문법을 조작 할 수 있다. 아래는 미리 짜여진 HTML이고 jquery를 통해 조작해보고자 한다.
...
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text"/>
<button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text"/>
<button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
...1. $("id").메서드 함수
1-1. input 창에 입력된 값을 가져온다.
$('#input-q1').val()1-2. html 요소를 추가한다.
function q3() {
let text = $('#input-q3').val(); // 입력된 값을 가져온다.
if (text === '') { // 입력된 값이 없으면
alert("이름을 입력하세요!!") // 알림
} else { // 그게 아니라면
let temp_html = `<li>${text}</li>` // 변수에 담긴 입력된 값의 요소
$('#names-q3').append(temp_html); // 해당 요소의 자식 태그로 temp_html을 추가한다.
console.log(text); // 확인용 console.log
}
}1-3. 요소를 제거
function q3_remove() {
$('#names-q3').empty()
}이 외의 html 요소를 숨기고 보여주기 위한 방법 예시
// 영화 기록하기
function open_box() {
$('#post-box').show(); // 보여주다.
}
// 기록함 닫기
function close_box() {
$('#post-box').hide(); // 숨기다.
}
// 기록하기 버튼
function record_url() {
let temp_html = `<div class="col">
<div class="card">
<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="my-comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>`;
$('#card-box').append(temp_html) // 자식 요소로 추가한다.
}
'항해99' 카테고리의 다른 글
| [2주차] [#03] Ajax 시작, 사용하기 (0) | 2022.10.04 |
|---|---|
| [2주차] [#02] 서버 - 클라이언트 통신 이해하기 (0) | 2022.10.04 |
| [1주차] [#04] JavaScript 조건문 예제 연습 (0) | 2022.10.02 |
| [1주차] [#03] JavaScript 함수, 조건문, 반복문 (0) | 2022.10.02 |
| [1주차] [#02] JavaScript 기초 (0) | 2022.10.02 |