티스토리 뷰
jQuery 사용하기
미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다
[코드스니펫] jQuery CDN
jQuery CDN 부분을 참고해서 임포트하기(https://www.w3schools.com/jquery/jquery_get_started.asp)
jQuery를 사용하는 방법
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 썼지요?
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.
백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!
들어가기 전에 - 모든 jQuery를 외워야 하나요?
절대!! 아닙니다. 예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나,
jQuery가 할 수 있는 일은 무척 많습니다.
그러니, 필요할 때에 필요한 기능을 구글링해서 쓰면 되는 거예요!
수업
위 링크에 들어가서 get start 에서 google cdn 복사
보통 <head>안에 넣으면됨
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="">
</div>▼ id 바꾸고 for를 수정하거나 삭제
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp"
placeholder="">
</div>그 후 아티클 url 에서 값을 입력한 후 console로 가서 $('#article_url').val(); 을 입력
이해보다는 외워야함
$('#article_url').val();
//세종대왕
$('#article_url').val('장영실');
하면 아티클 url 에 입력된 값이 장영실로 바뀜
※id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다. $('#post-url').val();
div 보이기 / 숨기기
<div class="posting-box">
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article_url" aria-describedby="emailHelp"
placeholder="">
</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">Submit</button>
</div>▼id 추가
<div class="posting-box">
<div class="form-group" id="post-box">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article_url" aria-describedby="emailHelp"
placeholder="">
</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">Submit</button>
</div>$('#post-box').hide()
사라짐
$('#post-box').show()
보임
$('#post-box').css('width')
//500px
$('#post-box').css('width','700px')
//700px
$('#post-box').css('dispaly')
//block
$('#post-box').hide()
$('#post-box').css('dispaly')
//none ← 안보여서 안됨
'항해' 카테고리의 다른 글
| 2주차_5(jQuery다뤄보기3) (0) | 2021.12.07 |
|---|---|
| 2주차_4(jQuery다뤄보기2) (0) | 2021.12.07 |
| 2주차_2(jQuery시작(남이 만든 javascript)) (0) | 2021.12.07 |
| 2주차_1(JAVASCRIPT-복습) (0) | 2021.12.07 |
| 1주차_10(JAVASCRIPT-연습) (0) | 2021.12.07 |
