jQuery 개요
- JavaScript 문법을 간결하고 편리하게 사용할 수 있게 해주는 라이브러리
- jQuery cdn 검색해 호스팅 받아 사용할 수 있다
- 한 문장에서 jQuery 문법 뒤에는 jQuery 문법만, JavaScript 문법 뒤에는 JavaScript 문법만 사용할 수 있다
jQuery 활용
<body>
<p class='hello'>안녕</p>
<script>
// document.querySelector('.hello').innerHTML = '헬로';
$('.hello').html('헬로');
</script>
</body>- document.querySelector('.hello') > $('.hello')
- (참고) $는 querySelectorAll 과 같이 동작하여 모든 개체를 다 선택해준다 > 만약 hello class 가 다수 개체를 포함했다면 모든 개체의 html 을 다 변경 시켜준다 - .innerHTML = '헬로' > .html('헬로')
<body>
<p class='hello'>안녕</p>
<script>
// document.querySelector('.hello').style.color = 'red';
$('.hello').css('color', 'red');
</script>
</body>- .style.~~ = '값' > .css('스타일 속성', '값')
<body>
<p class='hello'>안녕</p>
<script>
// document.querySelector('.hello').classList.add('show');
$('.hello').addClass('show');
</script>
</body>- .classList.add('classname') > .addClass('classname')
- .classList.remove('classname') > .removeClass('classname')
- .classList.toggle('classname') > .toggleClass('classname')
<body>
<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 = '헬로';
$('.hello').html('헬로');
</script>
</body>- hello classname을 가진 모든 개체를 다 변경하고자 할 때, 인덱스를 일일히 바꿔줄 필요가 없다
<body>
<p class='hello'>안녕</p>
<button class='test-btn'>버튼</button>
<script>
// document.querySelector('.test-btn').addEventListener('click', function(){
// document.querySelector('.hello').innerHTML = '헬로';
// })
$('.test-btn').on('click', function(){
$('.hello').html('헬로');
})
</script>
</body>- .addEventListener() > .on()
<body>
<p class='hello'>안녕</p>
<button class='test-btn'>버튼</button>
<script>
$('.test-btn').on('click', function(){
$('.hello').hide();
})
</script>
</body>- jQuery를 이용해 UI animation도 쉽게 구현할 수 있다(처리 속도가 상대적으로 느리다)
- .hide() > display: none 과 동일
- .fadeout() > 천천히 사라짐
- .slideup() > 위로 올라가며 사라짐 등등
eunji yang