jQuery로 요소 찾기

먼저 jQuery란 HTML 요소들을 쉽게 조작하기 위해 JavaScript로 작성된 라이브러리이다.

 

jQuery로 작성하면 코드의 길이도 줄어들고 직관적이라 가독성도 좋기 때문에 많이 사용하는 듯싶다.

 

jQuery는 외부 라이브러리이기 때문에 사용하려면 js파일을 다운로드하거나 CDN 코드를 삽입하면 되는데 CDN 코드가 더 편하므로 이 방법을 소개하겠다.

 

https://releases.jquery.com/

jQuery CDN

 

해당 페이지로 이동하면 jQuery 버전에 맞춰서 Script코드를 받을 수 있는데 uncompressed는 압축하지 않은 원문 Script, minified는 압축한 Script를 뜻한다.

 

압축이 된 Script는 비교적 코드를 이해하기 어렵기 때문에 실사용자에게 제공되는 운영계에서 주로 사용하기 때문에 개발계에서 사용하기 용이한 uncompressed를 누르면 된다.

 

uncompressed

 

혹시 몰라서 복사한 Script를 첨부하도록 하겠다.

 

<script src="https://code.jquery.com/jquery-3.6.3.js" 
    integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" 
    crossorigin="anonymous">
</script>

 

해당 코드를 jQuery를 사용하고자 하는 파일 상단 (주로 head)에 추가하면 이제 자유롭게 jQuery를 사용할 수 있다.

 

document.getElementByID("ID 명");
document.getElementByClassName("Class 명");

JavaScript는 위 코드처럼 ID와 Class를 통해 요소를 찾아야 한다.

 

또한 Name으로는 찾을 수 없어 querySelector로 태그와 자식 요소로 찾아 들어가야 하는 불편함이 있다.

 

$("#ID 명")
$(".Class 명")
$("[name=name 명]")

하지만 위와 같이 jQuery를 사용한다면 짧은 문장으로 쉽게 요소를 찾을 수 있다는 장점이 있다.

 

jQuery 옵션으로 텍스트를 변경하는 text()나 속성을 다루는 attr() 등의 편리함이 있는데 이와 관련해서는 기회가 된다면 포스팅하도록 하겠다.