CSS 오픈 라이브러리가 부트스트랩이라면 Javascript에는 JQuery라는 오픈 소스 기반의 자바스크립트 라이브러리가 있다. JQuery를 이용하면 이벤트 처리를 손쉽게 구현할 수 있고 Ajax 응용 프로그램 또한 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
사이트에 들어가면 다양한 사용법 설명을 볼 수 있다.
간단한 예제로 살펴보자
JQuery를 사용하기 위해서는 <head>에 임포트를 시켜줘야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Example</title>
<!-- JQeury를 import합니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>위 주석 아래에 있는 코드를 입력해주면 JQuery는 손쉽게 import 된다.
다음 코드에서 JQuery로 텍스트를 추가해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Example</title>
<!-- JQeury를 import합니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1>JQuery를 이용해서 텍스트를 바꿔보세요</h1>
</div>
</body>
</html>
먼저 추가하고자 하는 부분에 id를 설정해주어야 한다. <div> 구역에 텍스트를 새로 추가할 예정이니 div 요소에 title-text 라는 id를 부여해주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Example</title>
<!-- JQeury를 import합니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="title-text">
<h1>JQuery를 이용해서 텍스트를 바꿔보세요</h1>
</div>
</body>
</html>
이제 <head>부분에 <script>를 새로 만들어 JQuery를 사용할 수 있다. 페이지가 실행되자마자 텍스트를 추가하도록 만들어보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Example</title>
<!-- JQeury를 import합니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
let tmp_html = `<h1>새로 추가한 텍스트입니다</h1>`;
$('#title-text').append(tmp_html);
});
</script>
</head>
<body>
<div id="title-text">
<h1>JQuery를 이용해서 텍스트를 바꿔보세요</h1>
</div>
</body>
</html>기본적 사용구조는 다음과 같다. 여기서 #은 id를 의미한다.
$('#id_name').func_name()| $('#idtest') | id가 idtest인 태그 |
| $('a') | 페이지 내의 모든 a태그 |
| $('.testclass') | class가 testclass인 모든 태그 |
이 외에도 많은 선택자가 있지만 요정도가 자주 쓰일 것 같다.
예제를 하나 더해보자면..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Example</title>
<!-- JQeury를 import합니다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function btn() {
let tmp_html = `<li>추가</li>`
$('#list').append(tmp_html);
}
</script>
</head>
<body>
<button onclick="btn()">추가하기</button>
<ul id = "list">
<li>아래에 아무거나 추가해보세요</li>
</ul>
</body>
</html>버튼을 누를때마다 새롭게 리스트가 추가하는 형식으로 이렇게 만들수도 있다.
'기타 공부들' 카테고리의 다른 글
| [Python] BeautifulSoup으로 크롤링하기 (네이버 영화순위) (0) | 2021.10.11 |
|---|---|
| [Javascript] AJAX 사용하기 (0) | 2021.10.08 |
| [CSS] 부트스트랩 (Bootstrap 예쁜 CSS 가져오기) (0) | 2021.10.03 |
| [CSS] 구글 웹 폰트 적용하기 (0) | 2021.10.01 |
| [HTML] 기본 개념 & 태그 정리 (0) | 2021.10.01 |