220926 TIL - web

JQuery

자바스크립트를 보다 편하게 활용할 수 있도록 도와주는 오픈 소스 기반의 JS 라이브러리.

• vanilla JS

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

• JQuery

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

위의 예시처럼 기존의 자바스크립트보다 짧은 코드로 같은 기능을 구현 가능.

JQuery의 장점

• 주요 웹브라우저의 구버전을 포함한 대부분의 브라우저 지원.
• HTML DOM과 CSS Style의 쉬운 조작.
• 애니메이션 효과 및 대화형 처리의 쉬운 적용.
• 같은 동작에 대해 보다 짧은 코드로 구현 가능.
• 다양한 플러그인과 많은 참고 문서.
• 오픈 라이선스로 누구나 자유롭게 사용 가능.

JQuery 사용

JQuery import

미리 작성된 JQuery코드를 문서에서 사용할 수 있도록 연결하는 과정.
https://releases.jquery.com/ 에서 사용할 JQuery 버전을 찾아 import.

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

JQuery 예시

1. 특정 태그의 값 가져오기

$(tag).val();

2. 특정 태그에 값 넣기

$(tag).val("value");

3. 특정 태그 보이기

$(tag).show();

4. 특정 태그 숨기기

$(tag).hide();

5. 특정 태그 안에 html 문장 추가하기

$(tag).append("원하는 html 문장");

6. 로딩 시 특정 동작하기

$(document).ready(function(){
	console.log("ready");
});