제이쿼리 $() 요소추가와 .on 이벤트리스너

요소추가

요소는 $로 불러온다.

 

사용법

$('.hello'); // 클래스추가
$('#world'); // 아이디추가

효과는 js의 쿼리셀렉터라고 생각하면 된다.

 

 

일반 js와 차이점은 다음코드와 같이 p태그를 바꿔주려면

일일히 값을 바꿔주거나 이에 맞는 로직을 짜야하지만

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

<script>
  document.querySelectorAll('.hello')[0].innerHTML = '바보';
  document.querySelectorAll('.hello')[1].innerHTML = '바보';
  document.querySelectorAll('.hello')[2].innerHTML = '바보';
</script>

 

jquery의 $()는 querySelectorAll처럼 여러개가 있다면

전부다 찾아주고 인덱싱 할 필요없이 .html()메소드를 쓰게 되면

모든 요소를 한번에 조작, 변경이 가능하다.

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

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

 

 

주의사항

js와 jquery는 각각 자신들의 메소드만 사용할 수 있다.

 $(".hello").innerHTML('123'); // juery에서 js의 메소드를 사용하면 오류가 발생한다.

 

 

 

.on() 제이쿼리의 이벤트리스너 역할

  jquery 이벤트리스너
  $('.btn').on('click', function(){
    내용
  });


js 이벤트리스너
hello.addEventListener('click', function(){
    내용
})

 

각각 같은 역할이고 제이쿼리가 코드양이 더 적어서 간편하다.

 

 

 

$()과 .on()을 사용함으로써 코드양이 적어서 더 편리해진다.