제이쿼리란? JQuery 사용하는 방법

728x90

제이쿼리란? JQuery 사용하는 방법

JQuery란? :

HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것이다.

Javascript로도 모든 기능을 구현할 수는 있지만,
코드가 복잡하고, 브라우저 간 호환성 문제 등도 고려해야해 JQuery라는 라이브러리가 등장하게 되었다고 한다.

JQuery VS Javascript 코드 비교

Javascript로 길고 복잡하게 써야 하는 것을
JQuery로 보다 짧고 직관적으로 쓸 수 있다.

-> Javascript를 사용한 경우

document.getElementById("element").style.display = "none";

-> JQuery로 사용한 경우

$('#element').hide();

JQuery는 Javascript와 다른 소프트웨어가 아니라 미리 작성된 Javascript 코드로 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것이다! 따라서, 사용하기 전에 꼭 "import 임포트" 해야한다.

JQuery 사용을 위해 import 하기

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

제이쿼리 임포트 하기위해서, 위의 w3schools 링크에서, Google CDN 값을 <head> </head> 사이에 넣어준다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

JQuery 적용하기

CSS가 적용되는 형태와 동일하게, JQuery를 적용시키기 위해서도 "가리켜야" 한다.

CSS 에서는 선택자로 class 명인데 반해,

JQuery 에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킬 수 있다.

자주 사용하는 JQuery

input 박스 값 가져오기

$('#해당 id 값').val();

input 박스 값 바꾸기(또는 해당 값으로 입력하기)

$('#해당 id 값').val('바꿀값);

div 보이기 / 숨기기

$('#해당 id 값').show();

$('해당 id 값').hide();

button 값 바꾸기

$('#해당 id 값').text('바꿀값');

$('#btn-posting-box').text('포스팅 박스 닫기');

728x90

저작자표시 비영리 변경금지

'JavaScript-JQuery' 카테고리의 다른 글

[jQuery + Javascript] 입력한 글자 alert 얼럿 띄우기 (0)	2022.01.24
Ajax로 환율 api 적용해 페이지 나타내기 (0)	2022.01.03
Ajax 기본 사용 방법 & OpenAPI 이용해 실시간 값 가져오기 (0)	2022.01.01
자바스크립트 JavaScript 함수, 변수, 자료형 (0)	2021.12.31
JQuery show() hide() - 창 보이기 숨기기 (0)	2021.12.30

Jann's World

제이쿼리란? JQuery 사용하는 방법