jQuery
jQuery 왜 씀?
document.querySelector('.navbar-toggler').addEventListener('click', function(){
document.querySelectorAll('.list-grop')[0].classList.toggle('show')});이거를
$('.navbar-toggler').on('click', function(){
document.querySelectorAll('.list-grop')[0].classList.toggle('show')});요래 줄여줌.
document.querySelector == $
addEventListener == on
jQuery는 JS의 querySelectorAll, addEventListener, classList.add
얘네를 짧게 바꿔줄 뿐. 즉 편하게 쓸 수 있음.
jQuery 설치
jQuery 공식 사이트 CDN 페이지 가면 3.x 버전 있음
minified 클릭하면 script 태그 있으니 그거 복붙 ㄱ ㄱ
(body 클로저 태그 위에 넣길 권장)
몇가지 보자
<body>
<p class="hello">안녕</p>
<script>
document.querySelector('.hello').innerHTML = '바보';
</script>
</body>제이쿼리는?
$('.hello').html('바보'); // 바보로 바꿈
$('.hello').css('color', 'red') //글자 red
$('.hello').addClass('show')// class 추가
// addClass, removeClass, toggleClass
끝.
여러개?
<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>제이쿼리는 아래와 같이.
$('.hello').html('바보')이벤트 리스너 달기
<body>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<button id="test-btn">버튼</button>
<script>
// document.querySelector('.test-btn').addEventListener()
$('#test-btn').on('click', function () {
$('.hello').hide()
})
</script>
</body>hide(), show(), fadeOut(), slideUp()
주의할 점.
JS (querySelector)에는 자바스크립트 함수만
제이쿼리는 제이쿼리 함수만 붙여서 사용 가능하다!
주먹구구식은 버리고 Why & How를 고민하며 프로그래밍 하는 개발자가 되자!
감사합니다~