종류 | 제이쿼리 | 자바스크립트 | 설명 |
---|---|---|---|
기본 선택자 | $("*") | 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 검색 |