1. jQuery 란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장
- JQuery는 개발자들이 짜둔 코드를 가져오는 형태로 사용전 임포트를 해야한다.
- https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
2. jQuery 다뤄보기
- Javascript의 복잡함을 단순하게 만들었다고는 하나.. 뜬금 $와 #이 나오니 혼란스러웠지만 이내 적응은 되었다.
- css는 class로 지정해줬다면 JQuery는 id로 값을 지정해준다.
- 동적으로 html 넣기 연습
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) 홀따옴표(')가 아닌, backtick(`)으로 깜싸기!!
(2) 문자 중간에 Javascript 변수 삽입하기.
- 포스팅 박스 '열기-닫기' 기능 붙여보기
<script>
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>
onclick="open_box", onclick="close_box" // 열기 버튼에 function 달기
id = "post-box" // 버튼에 id 값 주기
- 포스팅 박스 '열기-닫기' 기능 실제 적용
<script>
function open_box () {
$('#post-box').show()
}
function close_box () {
$('#post-box').hide()
}
</script>
</head>
<body>
<div class="mytitle">
<h1>2022년 가사 외울 노래</h1>
<button id="open_box" onclick="open_box()">노래 등록하기</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="url" 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>별1~5개</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">Comments</label>
</div>
<div class="mybtns">
<button type="button" class="btn btn-dark">기록하기</button>
<button id="close_box" onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
- post-box를 시작부터 감춰두기 (css의 display:none 속성!)
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
display: none;
}
```
3. jQuery 연습하기
- 처음에는 0문제 성공 두번째도 어려웠다..
<script>
function q1() {
let text = $('#input-q1').val()
if (text == '') {
alert('빈칸입니다!')
} else {
alert(text)
}
}
function q2() {
let txt = $('#input-q2').val()
if (txt.includes('@') == true) {
alert(txt.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다')
}
}
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
let txt = $('#names-q3').empty()
}
</script>- 1번 문제를 text로 지정했는데, 강의에선 좀더 단순하게 txt로 지정했다.
- 항상 let 으로 값을 가져와서 시작하는 버릇을 들여야할거같다.
'항해 99 > 사전 기본 스터디' 카테고리의 다른 글
| WIL _ visit jeju(비짓 제주) open API 활용 (0) | 2022.02.23 |
|---|---|
| WIL _ Ajax 활용 (0) | 2022.02.23 |
| WIL _ Javascript 기초 문법 (0) | 2022.02.22 |
| WIL _ 부트스트랩 활용하여 포스팅 박스 만들기 (feat.모바일 처리) (0) | 2022.02.22 |
| WIL _ 구글 웹 폰트, 부트스트랩 활용 (0) | 2022.02.22 |