| 종류 | 선택자 | 제이쿼리 | 자바스크립트 |
|---|---|---|---|
| 기본 선택자 | $("*") | 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[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']") | -- | ||
| 기본 필터 선택자 | $("div[class]") | -- |
| 종류 | 제이쿼리 | 자바스크립트 | 설명 |
|---|---|---|---|
| Dimensions | width() | -- | 요소의 가로(패딩/보더/마진 미포함) |
| Height() | -- | 요소의 세로(패딩/보더/마진 미포함) | |
| innerWidth() | clientWidth | 요소의 가로(패딩포함,보더/마진 미포함) | |
| innerHeight() | clientHeight | 요소의 세로(패딩포함,보더/마진 미포함) | |
| outerWidth() | offsetWidth | 요소의 가로(패딩/보더포함,마진 미포함) | |
| outerWidth() | offsetHeight | 요소의 세로(패딩/보더포함,마진 미포함) | |
| outerWidth(true) | -- | 요소의 가로(패딩/보더/마진 포함) | |
| outerWidth(true) | -- | 요소의 세로(패딩/보더/마진 포함) | |
| $(window).width() | innerWidth / outerWidth | 브라우저의 가로값(스크롤바 미포함/ 포함) | |
| $(window).height() | innerHeight / outerHeight | 브라우저의 세로값(스크롤바 미포함/ 포함) | |
| offset | offset().top / offset().left | offsetTop / offsetLeft | 요소의 좌표값(문서 기준) |
| offsetParent() | offsetParent() | 요소의 좌표값(부모 기준) | |
| positon() | 요소의 좌표값(기준점 기준) | ||
| scrollleft() | pageXoffset / window.scrollX | 요소의 가로 스크롤 값 | |
| scrollTop() | pageYoffset / window.scrollY | 요소의 세로 스크롤 값 |
| 종류 | 제이쿼리 | 자바스크립트 | 설명 |
|---|---|---|---|
| CSS | css() | .style | CSS 설정 |
| .addClass() | classList.add() | 클래스 추가 | |
| .removeClass() | classList.remove() | 클래스 삭제 | |
| .toggleClass() | classList.toggle() | 클래스 추가/삭제 | |
| .hasClass() | classList.contains() | 클래스 검색 |