JQuery란?
우선 JQuery가 뭔지 알려주겠다.
JQuery는 Javascript를 사용하기 쉽게 미리 작성해둔 것 즉 '라이브러리'로 칭한다.
CSS 에서는 class= " " 로 지칭을 한다면,
Javascript 에서는 id= " " 로 지칭을 한다.
(참조) 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
해당 주소에 가면 JQuery CDN이 있다.
이 CDN은 미리 작성된 Javascript 코드를 지칭하는것이다.
* Code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
해당 코드를 head에 넣고 바로 사용할 수 있는 툴이라고 생각하면 되겠다.
개념적 정의는 간단하게 이렇게 설명할 수 있다.
참고로 해당 코드는 부트스트랩에 이미 적용되어있다.
JQuery 사용방법
Input 박스에 값을 주기 & 가져오기
$('#url').val('홍길동')
Console 창 ▶ $('#url').val('홍길동') ▶ id="url"에 홍길동 표시
↓ 이걸 가져온다?
$('#url').val()
↓
'홍길동' ▶ Console 창에 표시
Input 박스가 숨겨지기 & 보여지기
ex)
숨겨지기 ▶ $('#post-box').hide()
보여지기 ▶ $('#post-box').show()
버튼 넣기
let temp_html = `<button>버튼</button>`
$('#cards-box').append(temp_html)
See the Pen input by jaehun (@jaehunju) on CodePen.
카드 넣기
let temp_html = '카드뭉치'
$('#cards-box').append(temp_html)
See the Pen input by jaehun (@jaehunju) on CodePen.
클릭했을때 alert(알러트) 주기
<script>
function open_box(){
alert('열린다')
}
function close_box(){
alert('닫힌다')
}
</script><body>
<button onclick="open_box()">영화 기록하기</button>
<button type="button" class="btn btn-light" onclick="close_box()">닫기</button>
</body>
클릭했을때의 alert(알러트) 이용하여 열고, 닫기 + 항상 닫아놓기
<script>
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script><body>
<button onclick="open_box()">영화 기록하기</button>
<button type="button" class="btn btn-light" onclick="close_box()">닫기</button>
</body> <style>
.mypost {
display : none;
}
</style>
전체 페이지 작동 화면 & 코드
See the Pen input by jaehun (@jaehunju) on CodePen.
JQuery Quiz
'📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 > Python' 카테고리의 다른 글
| [Python] 파이썬 기초공부 (2) | 2022.12.28 |
|---|---|
| [Ajax] (4) Quiz_2 (0) | 2022.12.27 |
| [Ajax] (3) Quiz_1 (0) | 2022.12.27 |
| [Ajax] (2) 연습하기 (0) | 2022.12.27 |
| [Ajax] (1) 시작하기 (0) | 2022.12.27 |
