종류 제이쿼리 자바스크립트 설명
기본 선택자 $("*") 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() 클래스 추가
.removeClass() classList.remove() 클래스 삭제
.toggleClass() classList.toggle() 클래스 추가/삭제
.hasClass() classList.contains() 클래스 검색