JavaScript 복습
- 버튼을 홀수번 클릭하면 홀수라고 알려주고 짝수번 클릭하면 짝수라고 알려주는 버튼을 만들어보자!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝짝짝👏');
} else {
alert('홀홀홀🎅');
}
count += 1;
}
</script>
</head>
<body>
<button onclick="hey()">click me!</button>
</body>
</html>JQuery
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해 둔 것. 라이브러리!
- Javascript로도 모든 기능을 구현할 수 있지만, 코드가 복잡하고 브라우저간 호환성 문제도 고려해야 해서 JQuery가 등장했다!
- JQuery는 미리 Javascript로 작성된 코드이기 때문에 쓰기전에 꼭 임포트 해야한다!
JQuery VS Javascript
특정 요소 하나를 감추는 코드를 비교해보자. JQuery는 매우 직관적이다!
Javascript
document.getElementById("element").style.display = "none";JQuery
$('#element').hide();JQuery 사용하기
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer
www.w3schools.com
위 링크에 들어가서 Google CDN이라고 써있는 부분을 복사해서 사용하자.
아래를 복사해서 <head> ~ </head>사이에 넣어주자.
만약 이미 부트스트랩을 이용하고 있으면, 아래 코드가 이미 있을것이다!
부트스트랩을 사용하지 않으면 따로 임포트해주자!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>JQuery 선택자
element, id, class를 선택자로 사용할 수 있다.
$(' ')의 ' ' 사이에 element 선택자를 사용하고 싶으면 element이름, id선택자를 사용하고 싶으면 #id이름, class 선택자를 사용하고 싶으면 .class이름을 붙여주자
사용방법은 아래 표를 보고 참고하자!
| $('element이름') | element 선택자 |
| $('#id이름') | id 선택자 |
| $('class이름') | class 선택자. |
input 값 조작하기 val()
위와 같은 정보를 입력하는 창에서 아티클 URL이라고 써져있는 부분의 아래 element가 아래와 같이 input 태그를 사용하고 있을 때, 해당 element의 id를 이용해서 개발자 도구를 열고 안에 있는 값을 조작해보자!
<input id="url" type="email" class="form-control" aria-describedby="emailHelp" placeholder="">값 가져오기
$('#url').val();
값 변경하기
$('#url').val('변경할 값');
태그 숨기기, 보이기 hide()/show()
위와 같이 정보를 입력하는 창의 최상위 엘리먼트가 아래와 같다고 하면 id를 사용해서 이 창을 숨겨거나 보이게하자!
<div class="posting-box" id="post-box">숨기기 hide()
$('#post-box').hide();
보이기 show()
CSS값 조작하기 css()
위에서 사용했던 창의 넓이를 가져와보자.
$('#post-box').css('width');
창의 넓이를 변경해보자
$('#post-box').css('width','700px');
display의 값을 확인해보자.
$('#post-box').css('display');
hide()를 사용해서 element를 숨기고 display 값을 확인해보자.
아래처럼 요소를 숨기고 display 값을 확인하면 none이라고 나타난다.
이를 사용해서 요소가 보일때 어떤 행동을 취하거나 보이지 않을때 어떤 행동을 취할 수 있다!
태그 내 텍스트 조작하기 text()
위에서 사용한 입력창에서 '기사저장'이라고 써 있는 button을 사용한 태그가 아래와 같다.
id값인 btn을 이용해서 '기사저장'이라 써있는 부분을 조작해보자!
<button type="submit" class="btn btn-primary" id="btn">기사 저장</button>텍스트 가져오기
$('#btn').text();
텍스트 변경하기
$('#btn').text('원하는 텍스트');
HTML 동적으로 붙이기! 빽틱/append()
아래와 같은 빈 화면에 버튼을 하나 추가한다고 해보자. 어떻게 해야할까?
아래처럼 1 옆에 있는 `(빽틱)으로 html 태그를 감싸서 문자열을 감싸서 원하는 태그에 append() 함수를 사용하면된다!
let temp_html = `<button>나는 버튼이다</button>`
$('body').append(temp_html);
'HTML+CSS+JS+Flask > jQuery+Ajax' 카테고리의 다른 글
| Ajax 기본 코드 탬플릿 (0) | 2021.06.27 |
|---|---|
| Ajax 기능 구현 - 로딩 후 호출하기 ready() (0) | 2021.06.14 |
| Ajax + jQuery 연습, 유용한 메서드 (0) | 2021.06.12 |
| 서버-클라이언트 통신 / Ajax (0) | 2021.06.12 |
| JQuery 사용해서 기능 구현 + 퀴즈 (0) | 2021.06.12 |
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
