본문 바로가기

javaScript

[JS / javascript] jquery(제이쿼리) !!

전편 javascript에서

document.getElementById('test').innerHTML = '한번만 바꿔라 쪽팔리게잇!'

이렇게 자바스크립트를 구성하면 된다고 했다

 

document는 문서

getElementById는 아이디를 가지고 있는 놈을 찾아줘~

. innerHTML은 HTML을 변경해줘~

 

라고 했는데 

 

너무 길다

 

이걸 짧게 줄일 수 있는 게 jQuery다

 

jQuery를 잘 쓰면 긴 코드를 축약할 수 있습니다

 

사용하기 전 jQuery는 html에 import 시켜야 사용할 수 있죠

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

이걸 복사해서 HTML의 head든 body든 붙여넣으면 된다

 

CDN이라고 하는데 사용 법이니 자세한 건 묻지 마요

https://releases.jquery.com/

 

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

 

이제 바꿔 보겠습니다

JS

document.getElementById('test').innerHTML = '한번만 바꿔라 쪽팔리게잇!'

 

 

jquery

$('#test').text('한번만 바꿔라 쪽팔리게잇!');

코드가 확 줄었습니다

설명 하자면

 

document 는 $

getElementById('test') 는 ('#test')

.innerHTML 는 .text (이거는 속성이라 여러 가지가 있습니다)

 

한 두 개의 자바스크립트는 괜찮지만 코드량이 많아지면

알아보기 쉽지 않죠

 

제이쿼리를 사용해 봅시다

 

이어서

>>