[ jQuery 핵심정리 ] DOM 조작 메서드 :: 소림사의 홍반장!

[ jQuery 핵심정리 ] DOM 조작 메서드

2014. 12. 4. 11:25 - 삘쏘굿

DOM  Manipulation Method

  -  도큐먼트 내 요소를 조작하는 함수


Method

Description

삽입  ○ 검색된 모든 요소의 안에 새로운 요소를 삽입하는 메서드
 append()  Inserts content at the end of selected elements
 appendTo() Inserts HTML elements at the end of selected elements
 prepend()  Inserts content at the beginning of selected elements
 prependTo()  Inserts HTML elements at the beginning of selected elements
삽입  ○ 검색된 모든 요소의 전/후에 새로운 요소를 삽입하는 메서드
after() Inserts content after selected elements
insertAfter() Inserts HTML elements after selected elements
before() Inserts content before selected elements
insertBefore() Inserts HTML elements before selected elements
삽입  ○ 검색된 모든 요소를 새로운 요소로 감싸도록 삽입하는 메서드
wrap() Wraps HTML element(s) around each selected element
wrapAll() Wraps HTML element(s) around all selected elements
wrapInner() Wraps HTML element(s) around the content of each selected element
대체  ○ 검색된 모든 요소를 새로운 요소 또는 텍스트로 대치하는 메서드
html() Sets or returns the content of selected elements
text() Sets or returns the text content of selected elements
replaceAll() Replaces selected elements with new HTML elements
replaceWith() Replaces selected elements with new content
삭제  ○ 검색된 모든 요소 안의 모든 요소를 제거하는 메서드
empty() Removes all child nodes and content from selected elements
삭제  ○ 실제 삭제하지는 않지만 검색된 모든 요소와 그 자식들을 도큐먼트에서 제거하는 메서드
detach() Removes selected elements (keeps data and events)
remove() Removes the selected elements (including data and events)
삭제  ○ 검색된 요소의 부모 요소를 삭제하는 메서드
unwrap() Removes the parent element of the selected elements
복사  
clone() Makes a copy of selected elements
   
속성/ 프로퍼티  
attr() Sets or returns attributes/values of selected elements
attr(key) 이름이 key 속성을 얻는다.
attr(key, value) 이름이 key 속성의 값을 value 설정한다.
attr(key, fn) 이름이 key 속성의 값을 fn(매치된 요소에 대해 각각 수행) 함수의 결과 값으로 설정한다.
attr(map) 속성값을 주어진 - 쌍으로 설정한다.
removeAttr() Removes one or more attributes from selected elements
prop() Sets or returns properties/values of selected elements
removeProp() Removes a property set by the prop() method
addClass() Adds one or more class names to selected elements
removeClass() Removes one or more classes from selected elements
toggleClass() Toggles between adding/removing one or more classes from selected elements
hasClass() Checks if any of the selected elements have a specified class name
val() Sets or returns the value attribute of the selected elements (for form elements)
CSS  
css() Sets or returns one or more style properties for selected elements
크기  
offset() Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent() Returns the first positioned parent element
position() Returns the position (relative to the parent element) of an element
scrollTop() Sets or returns the vertical scrollbar position of selected elements
scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
height() Sets or returns the height of selected elements
width() Sets or returns the width of selected elements
innerHeight() Returns the height of an element (includes padding, but not border)
innerWidth() Returns the width of an element (includes padding, but not border)
outerHeight() Returns the height of an element (includes padding and border)
outerWidth() Returns the width of an element (includes padding and border)
데이터  
.data(key) 매치된 요소에 대해 이름이 key 데이터 항목을 얻는다
.removeData(key) 매치된 요소에 대해 이름이 key 데이터 항목을 제거한다.


다른 카테고리의 글 목록

Dev. 웹/JavaScript 카테고리의 포스트를 톺아봅니다