jQuery 간단정리

자바스크립트 특징) 너무 길고 지저분함!

html 조작문법을 쉽게 바꿔주는 라이브러리들 등장!
=> 자바스크립트 라이브러리..(jQuery, React, Vue)

ex) querySelector = $ / addEventListner = on

설치(cdn)

↓ CDN(Content Delivery Network)
웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술

https://releases.jquery.com/
버전: (3.x ,minified)

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

• jQuery 설치한 곳 하단에서부터 jQuery 문법을 사용가능.
• (원래 작성규칙) 성능상 위치는 바디태그 끝나기전에!
  (이건 나중에 검색해보기! cdn 위치 위/아래 차이점)

장점

제이쿼리는 선택자기능때문에 요소를 손쉽게 가져올수 있어서 js보다 편하다. 태그('')로, 아이디(#)로 클래스(.)로 등등 찾아올수있다 by선택자로
ex) 속성값으로 요소를 불러들일수 있다
$('input[type=text]')

• 간결한 코드
• 간단한 UI용 애니메이션 편리하게 사용

주의

• $('셀렉터')로 찾으면 제이쿼리 함수만 붙일 수 있음.
• querySelector로 찾으면 순수 자바스크립트 함수만 쓸 수 있음
  $('어쩌구').innerHTML 이건 안된다!!

html 조작

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

<script>
//document.querySelector('.hello').innerHTML = '바보';
$('.hello').html('바보');
$('.hello').css('color','red');
</script>

class 탈부착

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

<script>
  $('.hello').addClass('클래스명');
  $('.hello').removeClass('클래스명');
  $('.hello').toggleClass('클래스명');
</script>

이벤트리스너

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    //실행할 코드 작성
  });
</script>

UI 애니메이션

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    $('.hello').fadeOut();
    //$('.hello').slideUp();
    //$('.hello').hide();  //display: none;
  });
</script>

내꺼 예전자료
https://blog.naver.com/daisyy22-/222963683941
https://blog.naver.com/daisyy22-/222966672264