종류 제이쿼리 자바스크립트 설명
기본 선택자 $("*") document.querySelector("*")
$(".class") document.querySelector(".class")
$("div") document.querySelector("div")
$("#id") document.querySelector("#id")
$("#id, .class") document.querySelector("#id, .class")
계층 선택자 $("div p") document.querySelector("div p")
$("div > p") document.querySelector("div > p")
$("div + p") document.querySelector("div + p")
$("div ~ p") document.querySelector("div ~ p")
속성 선택자 $("div[class]")
$("div[class='name'][id='name']")
$("div[class='name']")
$("div[class!='name']")
$("div[class~='name']")
$("div[class*='name']")
$("div[class|='name']")
$("div[class^='name']")
$("div[class$='name']")
Dimensions width() - 요소의 가로(padding/border/margin 미포함)
height() - 요소의 세로(padding/border/margin 미포함)
innerWidth() clientWidth 요소의 가로(padding포함, border/margin 미포함)
innerHeight() clientHeight 요소의 세로(padding포함, border/margin 미포함)
outerWidth() offsetWidth 요소의 가로(padding/border 포함, margin 미포함)
outerHeight() offsetHeight 요소의 세로(padding/border 포함, margin 미포함)
outerWidth(true) - 요소의 가로(padding/border/margin 포함)
outerHeight(true) - 요소의 세로(padding/border/margin 포함)
$(window).width() innerWidth / outerWidth 브라우저의 가로 값(스크롤 미포함 / 포함)
$(window).height() innerHeight / outerHeight 브라우저의 세로 값(스크롤 미포함 / 포함)
offset offset().top / offset().left offsetTop / offsetLeft 요소의 좌표값(문서 기준)
offsetParent() offsetParent 요소의 좌표값(부모 기준)
position() 요소의 좌표값(기준점 기준)
scrollLeft() pageXOffset / window.scrollX 요소의 가로 스크롤 값
scrollTop() pageYOffset / window.scrollY 요소의 세로 스크롤 값
CSS css() .style CSS 설정
.addClass() classList.add() class 추가
.removeClass() classList.remove() class 삭제
.toggleClass() classList.toggle() class 추가/삭제
.hasClass() classList.contains() class 검색