JQUERY

Jquery

jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다.

지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 화면 개발을 쉽게 해 주는 라이브러리는 거의 존재하지 않았습니다.
하지만 jQuery가 등장하면서 전세계 많은 개발자들이 사용한 라이브러리가 되었습니다.
다만, 요즘엔 점점 사용하지 않는 추세가 되고 있습니다.

▶ 설치 방법

JQuery 사이트에서 다운 받아 적용할 수 있습니다.

또는 홈페이지에서 제공하는 cdn 링크를 스크립트에 적용하면 사용이 가능합니다. JQuery는 상당히 유명한 라이브러리이기 때문에 다양한 cdn 링크와 호환성을 갖는 장점이 있습니다.

사용 예시

//Download 방식

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
    $(document).ready(function(){
        console.log("jQuery 시작");
    });
</script>


//CDN 방식

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        console.log("jQuery 시작");
    });
</script>

스크립트로 cdn 링크를 건 후 JQuery를 사용한 예 입니다. JQuery는 선택자를 "$"를 사용해 간편히 할 수 있는 큰 장점이 있습니다.

▶ jQuery 기본 선택자

선택자 종류	설명
태그 선택자	$("p")	p 요소를 선택합니다.
id 선택자	$("#gnb")	#gnb 요소를 선택합니다.
class 선택자	$(".logo")	.logo인 요소를 선택합니다.
자식 선택자	$("#gnb > ul > li")	#gnb의 자식 요소의 자식 요소 li를 선택합니다.
하위 선택자	$("#gnb ul")	#gnb의 하위에 있는 모든 ul 요소를 선택합니다.
인접 선택자	$("#visual + #content")	#visual 다음에 오는 #content 요소를 선택합니다.
형제 선택자	$("#visual ~ #footer")	#visual의 형제 요소 #footer를 선택합니다.
종속 선택자	$("div.util")	div 요소 중 class가 util인 요소를 선택합니다.
그룹 선택자	$(".left, .right, #banner")	.left .right #banner 요소들을 선택합니다.
전체 선택자	$("*")	모든 요소를 선택합니다.

▶ jQuery 속성 선택자

선택자 종류	설명
요소[속성]	$("span[class]")	span 요소 중 class 속성을 가지고 있는 요소를 선택합니다.
요소[속성='값']	$("span[class='abc']	span 요소 중 class가 'abc'인 요소를 선택합니다.
요소[속성!='값']	$("span[class!='abc']	span 요소 중 class가 'abc'가 아닌 요소를 선택합니다.
요소[속성~='값']	$("span[class~='abc']	span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다.
요소[속성*='값']	$("span[class*='abc']	span 요소 중 class가 'abc'를 포함하는 요소를 모두 선택합니다. 'bg abc'와 'bg_abc' 모두 선택합니다.
요소[속성|='값']	$("span[class|='abc']	span 요소 중 class가 'abc'나 'abc-'로 시작하는 요소를 선택합니다.
요소[속성^='값']	$("span[class^='abc']	span 요소 중 class가 'abc'로 시작하는 요소를 선택합니다.
요소[속성$='값']	$("span[class$='abc']	span 요소 중 class가 'abc'로 끝나는 요소를 선택합니다.