제이쿼리 제이쿼리 총정리(4) - 요소의 속성정보 호출,설정
페이지 정보
본문
| getter & setter | |
|---|---|
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정한다. $("#trg").html("설정 태그") |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다. $("#trg").text("설정 텍스트") |
| .width() | 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정한다. $("img").width(300); |
| .height() | 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정한다. |
| .attr('속성명') | 해당 요소의 명시된 속성의 속성값을 반환하거나 설정한다. $("#trg").attr('속성명', '설정 값'); |
| .position() | 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환한다. |
| .val() | <form>요소의 값을 반환하거나 설정한다. |
| 요소의 크기 | |
|---|---|
| .width() | 선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정한다. |
| .height() | 선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정한다. |
| .innerWidth() | 선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환한다. |
| .innerHeight() | 선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환한다. |
| .outerWidth() | 선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테두리를 포함한 너비를 반환한다. 또는 인수로 true를 전달받으면 마진 영역까지 포함한 너비를 반환한다. |
| .outerHeight() | 선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역과 테두리를 포함한 높이를 반환한다. 또는 인수로 true를 전달받으면 마진 영역까지 포함한 높이를 반환한다. |
< inner와 outer >
| 메소드 | 반환값 |
|---|---|
| .width() | 요소의 너비 |
| .height() | 요소의 높이 |
| .innerWidth() | 요소의 너비 + 패딩(padding)의 너비 |
| .innerHeight() | 요소의 크기 + 패딩(padding)의 높이 |
| .outerWidth() | 요소의 너비 + 패딩의 너비 + 테두리(border)의 크기 |
| .outerHeight() | 요소의 높이 + 패딩의 높이 + 테두리(border)의 높이 |
| .outerWidth(true) | 요소의 너비 + 패딩의 너비 + 테두리의 너비 + 마진(margin)의 너비 |
| .outerHeight(true) | 요소의 높이 + 패딩의 높이 + 테두리의 높이 + 마진(margin)의 높이 |
| 요소의 위치 .offset() .position() | |
|---|---|
| .offset() | 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다. |
| .position() | 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다. |
| .offset() 메소드와 .position() 메소드의 차이점 | |
|---|---|
| .offset() 메소드 | HTML 문서(HTML document)를 기준으로 함. |
| .position() 메소드 | 선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함. |
| 요소의 스크롤 위치 .scrollLeft() .scrollTop() | |
|---|---|
| .scrollLeft() | 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다. |
| .scrollTop() | 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다. |
$(".box").on('scroll', function(){
var L = $(this).scrollLeft();
var T = $(this).scrollTop();
console.log("left:" + L + ", top" + T);
});
| 프로퍼티 설정 .attr() .prop() | |
|---|---|
| .attr() | 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정한다. |
| .prop() | 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다. ( jQuery 1.6부터 새롭게 정의된 메소드) |
| .removeAttr() | 선택한 요소에서 지정된 속성(attribute)을 제거한다. |
| .removeProp() | 선택한 요소에서 지정된 프로퍼티(property)를 제거한다. |
| CSS 스타일 설정 | |
|---|---|
| .css() | css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다. |
| 클래스 설정 .addClass() .removeClass() .hasClass() | |
|---|---|
| .addClass() | 선택된 요소에 인수로 전달받은 클래스를 추가한다. |
| .removeClass() | 선택된 요소에서 인수로 전달받은 클래스를 제거한다. |
| .toggleClass() | 선택된 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거한다. |
| .hasClass() | 인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인한다. |
- 이전글제이쿼리 총정리(5) - 이벤트 핸들러 19.12.26
- 다음글제이쿼리 총정리(3) - 요소의 추가,변경,삭제 19.12.26
댓글목록
등록된 댓글이 없습니다.
