jQuery Manipulation

 

Class Attribute

 

.addClass("value")    선택된 태그에 value값에 해당하는 Class를 추가
.hasClass("vlaue")    선택된 태크에 value값에 해당하는 Class가 있는지 확인
.removeClass("value") 선택된 태크에 value값에 해당하는 Class를 삭제
.toggleClass("vlaue") 선택된 태크에 value값에 해당하는 Class가 있으면 클래스 삭제
                      선택된 태크에 value값에 해당하는 Class가 없으면 클래스 생성

 

---

 

Copying

 

.clone() 선택된 요소를 얕은 복사하여 사용
         id값이 있는 요소를 복사하면 id값이 유니크하지 않기 때문에 사이드이펙트 발생

 

---

 

DOM Insertion, Around

 

.wrap()      선택된 요소에 HTML 구조로 래핑
.unwrap()    선택된 요소의 상위 요소 제거 
.wrapAll()   선택된 요소를 한곳의 HTML 구조로 모아서 래핑
.wrapInner() 선택된 요소안에 HTML 구조로 래핑

 

---

 

DOM Insertion, Inside

 

$(a).append(b)    a 요소 집합의 각 요소 끝에 b 요소 삽입
$(a).appendTo(b)  b 요소 뒤에 a 요소 삽입
$(a).html()       a의 모든 하위 요소를 가져옴
$(a).html(b).     a의 하위 요소에 b로 덮어쓰기
$(a).prepend(b)   a 요소 집합의 각 요소 앞에 b 요소 삽입
$(a).prependTo(b) b 요소 앞에 a 요소 삽입
$(a).text()       a의 text 내용을 가져옴
$(a).text(b)      a의 요소안에 b를 덮어쓰기

 

---

 

DOM Insertion, Outside

 

a.after(b)        a 요소 뒤에 b요소를 추가
a.before(b)       a 요소 앞에 b요소를 추가
a.insertAfter(b)  b 요소 뒤에 a요소를 추가
a.insertBefore(b) b 요소 앞에 a요소를 추가

 

---

 

DOM Insertion, Removal

 

$(a).detach() a 요소 전체를 DOM에서 제거 (제거된 요소와 하위 요소는 메모리에 보관)
$(a).empty()  a 요소의 내용만 제거
$(a).remove() a 요소를 삭제 (제거된 요소와 하위 요소는 메모리에 보관하지 않음)

 

---

 

DOM Insertion, Replacement

 

$(a).replaceAll(b)  b의 요소들을 a로 전환
$(a).replaceWith(b) a의 요소돌을 b로 전환 (제거된 요소를 반환)

 

---

 

General Attributes

 

$(a).attr()           a 요소의 attribute 값을 가져옴 (문자열 반환)
$(a).attr(b)          a 요소에 b의 attribute	값을 넣음
$(a).prop()           a 요소의 attribute 값을 가져옴 (불리언 반환)
$(a).prop(b)          a 요소에 b의 attribute	값을 넣음
$(a).removeAttr(b)    a 요소에 b의 attribute 값을 제거 (DOM 속성 제거)
$(a).removeProp(b)    a 요소에 b의 attribute 값을 제거 (JS 속성 제거)
$("input").val()      input 요소의 value 값을 가져옴
$("input").val("123") input 요소의 value 값에 123 값을 넣음

 

---

 

Style Properties

 

$(a).css(b)            a 요소에서 b에 해당하는 css 값을 가져옴
$(a).css(key, value)   a 요소에 css 요소 추가
$(a).height()          a 요소의 높이를 가져옴
$(a).height(b)         a 요소의 높이를 b로 설정
$(a).width()           a 요소의 너비를 가져옴
$(a).width(b)          a 요소의 너비를 b로 설정
$(a).innerHeight()     a 요소의 안쪽 높이를 가져옴 (콘텐츠, 패팅, 수직스크롤바)
$(a).innerHeight(b)    a 요소의 안쪽 높이를 b로 설정 (콘텐츠, 패팅, 수직스크롤바)
$(a).innerWidth()      a 요소의 안쪽 너비를 가져옴 (콘텐츠, 패팅, 수직스크롤바)
$(a).innerWidth(b)     a 요소의 안쪽 너비를 b로 설정 (콘텐츠, 패팅, 수직스크롤바)
$(a).outerHeight()     a 요소의 바깥쪽 높이를 가져옴 (콘텐츠, 패팅, 테두리[, 여백])
$(a).outerHeight(b)    a 요소의 바깥쪽 높이를 b로 설정 (콘텐츠, 패팅, 테두리[, 여백])
$(a).outerWidth()      a 요소의 바깥쪽 너비를 가져옴 (콘텐츠, 패팅, 테두리[, 여백])
$(a).outerWidth(b)     a 요소의 바깥쪽 너비를 b로 설정 (콘텐츠, 패팅, 테두리[, 여백])
$(a).offset().left     a 요소의 좌우 위치 (문서 기준)
$(a).offset().top      a 요소의 상하 위치 (문서 기준)
$(a).position().left   a 요소의 좌우 위치 (부모 요소 기준)
$(a).position().top    a 요소의 상하 위치 (부모 요소 기준)
$(a).scrollLeft()      a 요소의 좌우 스크롤 위치를 가져옴
$(a).scrollLeft(b)     a 요소의 좌우 스크롤 위치를 설정
$(a).scrollTop()       a 요소의 상하 스크롤 위치를 가져옴
$(a).scrollTop(b)      a 요소의 상하 스크롤 위치를 설정

 

 

 

 

 

 

참고 문서 ( https://api.jquery.com/category/manipulation/ )

Manipulation | jQuery API Documentation