01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자)
length 속성은 배열의 총 길이를 반환합니다.
| 종류 | 제이쿼리 | 자바스크립트 | 설명 |
|---|---|---|---|
| 기본 선택자 | $("*") | document.querySeletor("*") | |
| $(".class") | document.querySeletor(".class") | ||
| $("div") | document.querySeletor("div") | ||
| $("#id") | document.querySeletor("#id") | ||
| $("#id, .class") | document.querySeletor("#id, .class") | ||
| 계층 선택자 | $("div p") | document.querySeletor("div p") | |
| $("div > p") | document.querySeletor("div > p") | ||
| $("div + p") | document.querySeletor("div + p") | ||
| $("div ~ p") | document.querySeletor("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 | element.Width() | - | 요소의 가로 값 (패딩 / 보더 / 마진 미포함 : 메서드라서 설정도 할 수 있음) |
| element.Height() | - | 요소의 세로 값 (패딩 / 보더 / 마진 미포함) | |
| element.innerWidth() | clientWidth | 요소의 가로 값 (패딩 포함, 보더 / 마진 미포함) | |
| element.innerHeight() | clientHeight | 요소의 세로 값 (패딩 포함, 보더 / 마진 미포함) | |
| element.outerWidth() | offsetWidth | 요소의 가로 값 (패딩 보더포함, 마진 미포함) | |
| element.outerHeight() | offsetHeight | 요소의 세로 값 (패딩 보더포함, 마진 미포함) | |
| element.outerWidth(true) | - | 요소의 가로 값 (패딩 / 보더 / 마진 포함) | |
| element.outerHeight(true) | - | 요소의 세로 값 (패딩 / 보더 / 마진 포함) | |
| $(window).Width | innerWidth | 브라우저의 가로 값 (스크롤바 미포함) | |
| $(window).Height | innerHeight | 브라우저의 세로 값 (스크롤바 미포함) |
| 종류 | 제이쿼리 | 자바스크립트 | 설명 |
|---|---|---|---|
| offset | offset().top / offset().left | offsetTop / offsetLeft | 요소의 좌표 값 (문서 기준) |
| offsetParent() | 요소의 좌표 값 (부모 기준) | ||
| position() | 요소의 좌표 값 (기준점 기준) | ||
| scrollLeft() | pageXOffset / window.scrollX | 요소의 가로 스크롤 값 | |
| scrollTop() | pageYOffset / window.scrollY | 요소의 세로 스크롤 값 |
| 종류 | 제이쿼리 | 자바스크립트 | 설명 |
|---|---|---|---|
| CSS | css() | .style | CSS 설정 |
| .addClass() | classList.add | 클래스 추가 | |
| .removeClass() | classList.remove | 클래스 삭제 | |
| toggleClass() | classList.toggle | 클래스 추가 / 삭제 | |
| has() | classList.containers() | 클래스 검색 |