[JQuery 요약 정리] 4. 객체 조작

4. 객체 조작

1) addClass() 메소드

- 객체의 클래스 속성 추가

- 형태: $('선택자').addClass('클래스명');

2) removeClass() 메소드

- 객체의 클래스 속성 제거

- 형태: $('선택자').removeClass('클래스명');

* toggleClass() 메소드: 클래스 속성이 이미 지정되어있으면 제거하고 없으면 추가함

3) attr() 메소드

- 속성과 관련된 모든 기능 수행

- 형태

$('선택자').attr('키값') -> 속성 반환

$('선택자').attr('키값', '속성값') -> 키값의 속성값 변경

$('선택자').attr({키값1:속성값1; 키값2:속성값2;...}) -> 여러 키값의 속성값 변경

4) removeAttr(name) 메소드

- 객체의 속성 제거

- 형태: $('선택자').removeAttr('키값') -> 키값의 속성값 제거

5) css() 메소드

- style과 관련된 모든 기능 수행

$('선택자').css('키값') -> style 키값의 속성값 반환

$('선택자').css('키값', '속성값') -> style 키값의 속성값 변경

$('선택자').css({키값1:속성값1; 키값2:속성값2;...}) -> 여러 style 키값의 속성값 변경

6) html(), text() 메소드

- 객체 내부의 글자와 관련된 모든 기능 수행

- 두 메소드의 차이는 text() 메소드의 경우 html 태그를 인식하지 않음

- 형태

$('선택자').html() -> 첫 번째 선택자가 가진 텍스트 반환

$('선택자').text() -> 모든 선택자가 가진 텍스트 반환

$('선택자').html('값') -> 모든 선택자에 텍스트 추가

$('선택자').text('값') -> 모든 선택자에 텍스트 추가(html태그 그대로 표시)

*매개변수에 function(index, '값') {return 리턴값;}을 입력해서 다양하게 추가도 가능

7) detach(), empty(), remove() 메소드

- 객체 제거 메소드

empty() : 하위 요소를 비움

detach() : 지정한 요소를 포함해서 하위 요소 전부 제거

remove() : 지정한 요소를 포함해서 하위요소 모두 제거(이벤트 및 데이터 포함)

8) jQuery() 메소드로 객체 생성

- jQuery() 메소드는 객체 선택 기능 외에도 문서객체를 선택하는 기능이 존재

- 예시

$('<h1></h1>').html('Hello World') -> <h1>Hello World</h1> 출력

$('img />').attr('src', 'cat.jpg).appendTo('body'); -> body태그에 1.jpg 이미지 추가

9) 객체 삽입 메소드

- 객체를 추가하는 메소드는 총 8개가 존재한다.

- 객체 삽입 메소드를 통해 객체 이동이 가능

- 생성 후 삽입: A에 '<'로 시작해서 '>'로 끝나는 객체 생성 후 삽입(<br/> 태그 불가)

- 객체 이동: A객체를 B에 삽입

$(A).appendTo(B) : A를 B 태그 내 뒷부분에 추가

$(A).prependTo(B) : A를 B 태그 내 앞부분에 추가

$(A).insertAfter(B) : A를 B 태그의 뒤에 추가

$(A).insertBefore(B) : A를 B 태그의 뒤에 추가

- A선택자에 B객체를 삽입

$(A).append(B)

$(A).prepend(B)

$(A).after(B)

$(A).before(B)

10) clone() 메소드

- 객체 복사 메소드

- 객체를 복사해서 삽입할 때 사용

- 형태

$('선택자').clone()

$('선택자').clone(withDataAndEvents)

$('선택자').clone(withDataAndEvents, deepWithDataAndEvents)

- 매개변수

Boolean withDataAndEvents: 이벤트 핸들러와 데이터 요소 복사여부(기본값 false)

Boolean deepWithDataAndEvents:이벤트 핸들러와 모든 자식요소 복사 여부