Javascript

jQuery 사용법

becky(지은) 2023. 3. 19. 00:59

제이쿼리는 기존에 있는 자바스크립트를 간편하게 사용할 수 있도록 하는 라이브러리이다.  새로운 컴퓨터 언어는 아니다

 

 <주의사항>
$('셀렉터')로 찾으면 jQuery함수만 붙을 수 있음
 querySelector('셀렉터')로 찾으면 자바스크립트함수만 붙일수 있음

 

 

$('.hello').innerHTML = ㄴㄴㄴㄴㄴㄴ

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

    <script>
     //jquery 로 내용바꾸기
     document.querySelector(".hello").innerHTML = '바보';
     $(".hello").html('바보');

     //jquery 로 글자색바꾸기
     document.querySelector(".hello").style.fontSize = '바보';
     $(".hello").css('color','red')

     //jquery 로 이벤트리스너
     document.querySelector("#test-btn").addEventListener('click',function(){})
     $("#test-btn").on('click',function(){

      //jquery 로 간단한 UI 애니메이션 여러개 예시
      $('.hello').hide();
      $('.hello').fadeOut();
      $('.hello').slideUp();

     })
</script>