[js] jquery

 

자바스크립트의 특징이자 단점인데 하나하나 뜯어보면 알아보기 직관적이지만 코드 자체가 매우 길고 더럽다...

 vue나 react같은 프레임워크 쓰는거와 마찬가지로 jquery를 써보자

 

 

jquery는 간단하게 설치 후 사용할 수 있다

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

 

이렇게 스크립트 태그를 쓰고 이 밑에서 jquery 문법을 사용하면 된다

 

 

 

 

 

 

jquery 써서 html 변경하고 싶을 때

 

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

<script>
  $('.hello').html('바보'); 
</script>

 

 

 

 

jquery 써서 스타일 변경하고 싶을 때

 

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

<script>
  $('.hello').css('color', 'red');
</script>

 

등 이런식으로 jquery 문법을 사용 가능하다

 

 

정리하면

• $() 를 사용할수 있게 되고 이것은 querySelector와 동일한 기능을 한다
• $를 사용하면 이 뒤는 jquery 함수를 붙여야된다( $('hi').innerHTML이런식 안된다는 소리 )
• 아래 예시와 같이 $()는 querySelector와 다르다 $()는 같은 클래스가 여러개 있으면 모두 다 찾아준다
  • 결국 querySelectoraAll과 같다

 

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

<script>
  $('.hello').html('바보');
</script>