JQuery
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리
코드가 복잡, 브라우저 간 호환성 문제 고려 -> jQuery 라이브러리 등장
jQuery로 보다 직관적으로 쓸 수 있다.
- jQuery를 쓰기 전에 '임포트'를 해야한다.
https://www.w3schools.com/jquery/jquery_get_started.asp
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
부분을 참고해서 임포트하기( <head> 와 </head> 사이에 넣기 )
- 사용하는 방법
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/...등을 가리키게 된다.
필요할 때에 필요한 기능을 구글링해서 사용하기!
크롬 개발자도구 콘솔창에서 쳐보기
<div class="posting-box" id="post-box">
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
placeholder="">
<small id="emailHelp" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">기사저장</button>
</div>- input 박스의 값을 가져와보기
input에 id 값을 주고 ( id="article-url" )
$('#article-url').val();
// id값 val()로 값을 가져온다- div 보이기 / 숨기기
클래스명이 "posting-box"인 div에 id 값을 준다 ( id="post=box" )
$('#post-box').hide() // hide()로 숨기기
// 이 때 css의 display 값은 none
$('#post-box').show(); // show()로 보이게 하기
// 이 때 css의 display 값은 block- css의 값 가져와보기 ( display 속성 값 )
$('#post-box').css('display');( width 값 )$('#post-box').css('width'); // 500px
// width 값 변경도 가능
$('#post-box').css('width','700px'); // 700px로 변경- 태그 내 텍스트 입력하기 ( 버튼의 텍스트 바꾸기)
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스
열기</a>$('#btn-posting-box').text('포스팅박스 닫기'); // .text를 사용
// '포스팅박스 열기' 에서 '포스팅박스 닫기' 로 바뀐다
- 태그 내 html 입력하기
<div> ~ </div> 내에, 동적으로 html을 넣고 싶을 때
html을 넣고 싶은 태그에 id값을 준다
<div class="card-columns" id="cards-box">
// 버튼 넣어보기
let temp_html = `<button>새로운 버튼</button>`; // 백틱(`)으로 감싸야 한다.
$('#cards=box').append(temp_html);
// 카드 넣어보기
let img_url = '...';
let link_url = '...';
let title = '...';
let desc = '...';
let comment = '...';
let temp_html = `<div class="card">
<img class="card-img-top" src="{img_url}"
alt="Card image cap">
<div class="card-body">
<a href="{link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html); // ${...} 부분에 넣어진다연습
// input의 id = input-q1
<script>
function q1() {
let text = $('#input-q1').val();
if(text == ' ') {
alert('입력하세요!');
} esle {
alert(text);
}
}
</script>
// input의 id = input-q2
<script>
function q2() {
let text = $('#input-q2').val();
if(text.includes('@')) {
let txt = text.split('@')[1].split('.')[0];
alert(txt);
} else {
alert('이메일이 아닙니다');
}
}
</script>
// input의 id = input-q3, ul의 id = names-q3
<script>
function q3() {
let text = $('#input-q3').val();
let temp_html = `<li>${text}</li>`; // 백틱(`)으로 감싸기
$('#names-q3').append(temp_html);
}
function q3_remove() {
$('#names-q3').empty(); // names-q3 내부 태그를 모두 지우기
}
</script>아무래도 자주 쓰던 기호들이 아니어서 많이 헷갈렸던 것 같다.
연습을 하는 도중에는 익숙해져서 괜찮은데 진도 나가면서 틈틈이 복습을 안 하면
처음으로 돌아갈 것 같다.. 처음엔 강의를 듣고 바로 해도 거의 따라 하듯이 풀었는데
이번에는 생각을 많이 하면서 풀어봤는데 아직은 완벽히 머릿속에 떠오르지가 않아서
해설 영상을 조금씩 보게 됐다. 이 부분은 복습을 많이 해야겠다😞
