DAY 102. jQuery - 객체 조작(객체 생성 및 제거, 배열)

 

 

객체 생성 및 제거

문서 객체 생성

• html 태그 : 직접 html 구문을 문자열로 작성한다.
• jQuery 방식 : jQuery 객체 이용 구문 작성한다.
• DOM 방식

document.createElement('태그명').innerHTML('텍스트노드내용');
document.createElement("태그명").setAttribute('속성명','속성값');

 

 

jQuery 객체 생성

▪️ html 내부에 생성한 요소 추가

// 01. 요소명을 기준으로 생성구문을 자식으로 추가시킨다.
$(요소명).append(생성구문)
$(요소명).append(function([n],[html]){})
// 요소명의 자식 요소로 생성구문을 "뒷부분"에 추가한다.

$(요소명).prepend(생성구문)
$(요소명).prepend(fuction([n],[html]){})
// 요소명의 자식 요소로 생성구문을 "앞부분"에 추가한다.


// 02. 요소명을 기준으로 생성구문을 형제로 추가시킨다.
$(요소명).after(생성구문)
$(요소명).after(function([n],[html]){})
// 요소명의 형제 요소로 생성구문을 "뒷부분"에 추가한다.

$(요소명).before(생성구문)
$(요소명).before(function([n],[html]){})
// 요소명의 형제 요소로 생성구문을 "앞부분"에 추가한다.


// 선택자 요소를 기준으로 매개변수에 작성된 생성된 요소 또는 함수의 리턴 값을 추가한다.
* n : 선택된 요소 set의 인덱스 번호
* html : 현재 선택된 요소


$('생성구문|태그명').appendTo(요소명)
// 생성구문|태그명을 요소명의 자식 요소로 뒷부분에 추가한다.

$('생성구문|태그명').prepandTo(요소명)
// 생성구문|태그명을 요소명의 자식 요소로 앞부분에 추가한다.

$('생성구문|태그명').insertAfer(요소명)
// 생성구문|태그명을 요소명의 형제 요소로 뒷부분에 추가한다.

$('생성구문|태그명').insertBefore(요소명)
// 생성구문|태그명을 요소명의 형제 요소로 앞부분에 추가한다.


// 생성된 요소를 매개변수로 지정한 선택자 요소에 추가한다.
// 만일 추가되는 태그명이 문서에 있으면 위치를 이동한다.

 

 

clone()

html 내부에 있는 요소를 복사하는 메소드

$('태그 명').clone([true|false]).appendTo('추가될 위치');

// 태그 명의 태그를 복사하여 추가될 위치에 넣는다.
// true : 인자 값은 이벤트 핸들러까지 복사할지 여부를 묻는 것이다.
// false : 생략할 경우 기본 값

 

 

 

▪️ html 내부에 요소 객체 제거

$('s[,s...]').remove(['s']);
// 문저 내에 선택자 제거 후 삭제된 요소를 리턴한다.
// 인자 값을 기준으로 삭제 가능
// 이벤트 핸들러, 데이터까지 모두 삭제한다.

$('s').detach();
// 문서 내에 선택자 제거 후 삭제된 요소를 리터한다.
// 이벤트 핸들러, 데이터는 삭제하지 않는다.
// 값을 리턴받아 나중에 활용이 가능하다.

$('s').empty();
// 문서 내에 선택자 제거 후 삭제된 요소를 리턴한다.
// 선택자 자신과 속성은 삭제하지 않고 내용만 삭제한다.
// 즉, 자식 요소에 있는 컨텐츠 영역만 삭제한다.
// 선택한 요소의 내부 컨텐츠 영역을 비워준다고 생각하면 된다.

 

 

---

 

jQuery 배열 관리

▪️ each()

• 객체나 배열을 관리하는 for in 문과 비슷하게 수행되며 객체나 배열의 요소를 검사하는 메소드
• 객체가 가지고 있는 모든 속성에 접근하거나, 배열의 모든 인덱스에 순차적으로 접근한다.
• index : 객체/배열의 순번
• item : 값을 보관하는 변수(객체), 배열이라면 요소 | 객체라면 속성이라고 생각하면 된다. ',' 으로 접근한다.

 

$.each(객체명, function(index, item){})
// 지정한 객체를 0부터 자동으로 불러와서 순번과 값을 각각 index와 item에 넣는 메소드이다.

$('요소명').each(function(index, item){])
// 선택자로 선택한 요소를 index 순번으로 item에 요소 값을 수정할 때 사용하는 메소드이다.

 

 

▪️ extend()

jQuery에서 객체의 내용을 추가하는 메소드

여러 개의 객체를 하나로 합칠 때 사용하는 메소드

추가된 새로운 객체를 반환해준다.

 

 

▪️ noConflict()

jQuery 변수를 $ 외에 다른 것으로 지정하는 메소드로 다른 JavaScript 플러그인을 사용할 때 특수 문자 $ 변수를 중복되어 발생하는 에러 방지를 위해 사용하기도 한다.

var 변수명 = $.noConflict();