jQuery

jQuery는 자바스크립트 코드들이 길어서 짧게 쓰기 위한 라이브러리

 

자세한건 공식 홈페이지

<script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>

헤드에 추가

 

document.querySelector와 All 부분은 길어서 보기 그렇다

하지만 jQuery 라이브러리 추가시

$() 하나로 정리 가능

 

$(.login_box) 시 login_box 라는 클래스를 가진 요소를 불러온다

 

여기서

 

html 변경

$().html();

innerHtml하고 비슷하다고 볼 수 있다

 

style 변경

$().css('속성', '속성값');

ex>

$('.hello').css('color', 'red');

 

class 탈부착

$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');

 

또 이런

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

 

여러개의 클래스를 변경하려면 하나하나 인덱스 값을 입력해서 0, 1, 2

전부 하나하나 바꿔줘야 하는데

$('.hello').html('변경');

 

으로 hello라는 클래스들을 전부 바꿔줄 수 있다

 

addEventListner

같은 경우는

$().on('이벤트', '함수')

 

정말 짧아진다