제이쿼리 (jQuery) ?
- 자바스크립트 라이브러리 中 1
- 자바스크립트의 명령을 보다 간단하게 사용할 수 있도록 해줌
- 셀렉터 형태 - $('셀렉터')
- 명령 적용 대상 - 클릭해야 할 버튼, 팝업창, 메뉴 목록 ...
- 버전 1, 2, 3 有
- 최근에는 잘 쓰이진 않지만, 시장 점유율이 높기 때문에 유지보수를 위해 알아두어야 함
[주의사항]
제이쿼리 기본 문서를 HTML 문서에 연결해서 사용해야 함
-> 내가 작성할 내용보다 앞에 작성되어야 함
** 라이브러리 : 근간은 두고 있으나, 언어로 보긴 힘듦
재사용이 가능한 기능을 미리 구현해놓고, 필요한 곳에서 호출하여 사용 가능하도록 만들어진 집합
( 리액트, 제이쿼리 ... )
** 프레임워크 : 근간은 두고 있으나, 형식이 다르고 뼈대가 있음
( 뷰, 노드 ... )
text 명령, html 명령
CSS 명령
$('셀렉터').css({
스타일 속성이름 : '값',
스타일 속성이름 : '값'
})
-> 스타일 속성이름은 카멜케이스로 처리 ( marginLeft, borderTop... )
let 변수 = $('셀렉터').css('스타일 속성이름')
class 명령
순서 명령
$('.btn p).click(function(){
let i = $(this).index() // i에 현재 클릭한 대상의 순서값 저장
$('.btn p').removeClass('on') // 전체 비활성화
$(this).addClass('on') // 선택한 대상에만 활성화
$('.box .inner').removeClass('view')
$('.box .inner').eq(i).addClass('view') // i번째 값에만 view 활성화
})
결론
자바스크립트보다 간결하고 수월하게 사용이 가능하지만,
웬만하면 자바스크립트를 활용해서 해결하자 !