JS-jQuery

jQuery

jQuery 설치법

1. 구글에 jQuery CDN 검색 후 나오는 https://releases.jquery.com/ 접속
2. minified버젼 눌러서 나오는 script 복사
3. html 에 붙여넣기 (설치한 곳 하단에서 jQuery 문법 사용 가능)

**보통 jQuery와 같은 외부 라이브러리는 body태그 끝나는부분 위에 밀어넣는게 좋은 관습(페이지 로드 성능 때문)

• jQuery 사용시 좋은점 :
  코드가 매우 간결해짐, 같은이름의 선택자 여러개 동시에 선택하여 한번에 효과 적용 가능, eventlistener사용 편리, 간단하게 쓸 수 있는 UI애니메이션 기능

jQuery 사용법

document.querySelector('.hello')
$('hello')
/*긴 자바스크립트가 아래처럼 짧게 줄어든다*/

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

document.querySelectorAll('.hello')[0].innerHTML = '바보'
document.querySelectorAll('.hello')[1].innerHTML = '바보'
document.querySelectorAll('.hello')[2].innerHTML = '바보'

$('.hello').html('바보');
/*긴 자바스크립트가 아래처럼 짧게 줄어들고, 
여러선택자를 javascript와 다르게 한번에 선택하여 효과 적용 가능*/

document.querySelector('#test').addEventListener()

$('#test-btn').on('click',function(){
})
/*긴 eventlister에 대한자바스크립트가 아래처럼 짧게 줄어든다*/

** jQuery셀렉터로 찾으면, jQuery함수만 사용가능하고, querySelector로 찾으면 javascript함수만 쓸 수 있음.