[Javascript] JQuery 사용법

[Javascript] JQuery 사용법

CSS 오픈 라이브러리가 부트스트랩이라면 Javascript에는 JQuery라는 오픈 소스 기반의 자바스크립트 라이브러리가 있다. JQuery를 이용하면 이벤트 처리를 손쉽게 구현할 수 있고 Ajax 응용 프로그램 또한 JQuery를 이용하여 빠르게 구현할 수 있다.

https://www.w3schools.com/jquery/jquery_get_started.asp

사이트에 들어가면 다양한 사용법 설명을 볼 수 있다.

간단한 예제로 살펴보자

JQuery를 사용하기 위해서는 에 임포트를 시켜줘야한다.

JQuery Example

위 주석 아래에 있는 코드를 입력해주면 JQuery는 손쉽게 import 된다.

다음 코드에서 JQuery로 텍스트를 추가해보자

JQuery Example JQuery를 이용해서 텍스트를 바꿔보세요

먼저 추가하고자 하는 부분에 id를 설정해주어야 한다. 구역에 텍스트를 새로 추가할 예정이니 div 요소에 title-text 라는 id를 부여해주었다.

JQuery Example JQuery를 이용해서 텍스트를 바꿔보세요

이제 부분에

JQuery Example $(document).ready(function (){ let tmp_html = `

새로 추가한 텍스트입니다

`; $('#title-text').append(tmp_html); }); JQuery를 이용해서 텍스트를 바꿔보세요

기본적 사용구조는 다음과 같다. 여기서 #은 id를 의미한다.

$('#id_name').func_name()

$('#idtest') id가 idtest인 태그 $('a') 페이지 내의 모든 a태그 $('.testclass') class가 testclass인 모든 태그

이 외에도 많은 선택자가 있지만 요정도가 자주 쓰일 것 같다.

예제를 하나 더해보자면..

JQuery Example function btn() { let tmp_html = `

추가

` $('#list').append(tmp_html); } 추가하기 아래에 아무거나 추가해보세요

버튼을 누를때마다 새롭게 리스트가 추가하는 형식으로 이렇게 만들수도 있다.

from http://diddl.tistory.com/8 by ccl(A) rewrite - 2021-10-07 01:27:06