jQuery란?

jQuery 사용 방법

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

• jQuery CDN 검색 후 사이트 접속
  • https://code.jquery.com/
• minified 버전 사용
  • uncompressed : 일반 버전
  • minified : 공백문자 제거 버전
  • slim : 일부 기능 삭제 버전

script 추가할 땐, body태그의 가장 아래쪽에 넣는 것이 정석
→ html태그를 화면에 출력하는 것이 우선적으로 처리해야할 일이다.

jQuery를 사용하는 이유

1. 자바스크립트인데 코드가 매우 짧아진다.

<h4 id="test" class="test">안녕하세요</h4>

<script>
	//javaScript 문법
	document.getElementById('test').innerHTML = '메롱';
	
	//jQuery 문법
	$('#test').html('메롱');
</script>

2. 여러개의 요소를 한번에 바꿀 수 있다.

• 동일한 클래스명을 가진 여러 요소들을 한꺼번에 변경할 수 있음
• javaScript는 getElementsByClassName 을 쓰더라도 동일한 클래스명을 가진 요소들 중 몇번째 요소를 선택하는지 [0] 로 표기해주어야한다.
• jQuery는 셀렉터로 한꺼번에 선택해서 바꿀 수 있다.

<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>

<script>

			//javaScript
			document.getElementsByClassName('greeting')[0].innerHTML = '안녕';
      document.getElementsByClassName('greeting')[1].innerHTML = '안녕';
      document.getElementsByClassName('greeting')[2].innerHTML = '안녕';
			
			//jQuery
      $('.greeting').html('안녕');

</script>

• 만약 jQuery 문법으로 순서를 지정하고 싶으면 → $('.greeting').eq(0).html('안녕');

• jQuery로 eventListener 만들기 ( javaScript와 문법이 거의 동일하다. )

$('.btn').on('click', function(){
    $('#test').css('display','none');
})

3. 애니메이션을 쉽게 부착할 수 있다.

• hide(), show(), slideUp() 과 같은 애니메이션들이 함수로 만들어져 있다.
• 가져다 사용만 하면된다.

//javaScript
document.getElementsByClassName('btn')[0].addEventListener('click', function(){
    document.getElementsByClassName('greeting')[0].style.display = 'none';
})

//jQuery
$('.btn').on('click', function(){
    $('.greeting').hide();
})