국비 62일차 - [jQuery] Ancestors, Descendants, Sideways 메소드, 객체 조작

■ 객체 탐색

1. filtering 메소드

2. Ancestors 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드

$('선택자').parent()	선택된 요소의 바로 위 상위 요소를 리턴 (부모 요소)
$('선택자').parents(['선택자'])	선택된 요소의 모든 상위 요소를 리턴, 매개변수 있으면 매개변수와 일치하는 상위 요소만 리턴
$('선택자').parentsUntil(['선택자'])	선택된 요소의 모든 상위 요소를 리턴, 매개변수 있으면 선택된 요소부터 매개변수와 일치하는 요소까지의 상위 요소 리턴

// span 태그의 부모 요소에 스타일 적용(바로 위꺼)
$('span').parent().css({'color': 'red', 'border':'4px solid red'})

// li 태그의 모든 상위 요소에 스타일 적용
$('li').parents().css('color', 'blue')

// li 태그의 상위 요소 중 div만 스타일 적용
$('li').parents('div').css('border', '4px dashed orange')

// span 태그부터 div 태그 이전까지
$('span').parentsUntil('div').css('background-color', 'lightgreen')

 

3. Descendants 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드

$('선택자').children(['선택자'])	선택된 요소의 모든 자식 요소를 리턴, 매개변수 있으면 매개변수와 일치하는 자식 요소만 리턴
$('선택자').find('선택자')	선택된 요소의 하위 요소 중 매개변수와 일치하는 모든 하위 요소 리턴

// 클래스 속성값이 wrap인 요소의 자식 요소들에 스타일 적용(바로 아래꺼 선택됨)
$('.wrap').children().css(style1);

// 클래스 속성값이 wrap인 요소의 자식의 자식 요소 중 ul 태그(요소)의 스타일 적용
$('.wrap').children().children('ul').css(style3);

// 클래스 속성값이 wrap인 요소의 모든 하위 요소 중 span 태그(요소)의 스타일 적용
$('.wrap').find('span').css(style4);

 

4. Sideways 메소드 : 선택된 요소와 같은 레벨에 있는 요소를 선택할 수 있는 메소드

$('선택자').siblings(['선택자'])	선택된 요소와 같은 레벨에 있는 요소를 리턴, 매개변수 있으면 같은 레벨 요소 중 매개변수와 일치하는 요소를 리턴한다.
$('선택자').next()	선택된 요소의 같은 레벨 요소 중 다음 한 개 요소 리턴
$('선택자').nextAll()	선택된 요소와 같은 레벨 요소 중 다음의 모든 요소 리턴
$('선택자').nextUntil(['선택자'])	선택된 요소와 같은 레벨 요소 중 다음의 모든 요소 리턴, 매개변수 있으면 같은 레벨의 다음 요소 중 매개변수와 일치하는 요소까지 리턴
$('선택자').prev()	선택된 요소와 같은 레벨 요소 중 이전의 한 개 요소 리턴
$('선택자').prevAll()	선택된 요소와 같은 레벨 요소 중 이전의 모든 요소 리턴
$('선택자').prevUntil(['선택자'])	선택된 요소의 같은 레벨 요소 중 이전의 모든 요소 리턴, 매개변수 있으면 같은 레벨의 이전 요소 중 매개변수와 일치하는 요소까지 리턴

 

 

■ 객체 조작

1. Content 설정

1) html()

- 선택된 요소의 content 영역(시작 태그 ~ 종료 태그) 리턴하고 설정하는 메소드

- HTML 태그 인식

- 클래스 선택자로 여러 요소가 선택되었을 때 첫 번째 요소의 텍스트 노드를 리턴,

   전체 요소의 텍스트 노드 리턴 시 콜백 함수를 사용해야 함

 

2) text()

- 선택된 요소의 content 영역(시작 태그 ~ 종료 태그) 리턴하고 설정하는 메소드

- HTML 태그 인식 못함

- 클래스 선택자로 여러 요소가 선택되었을 때 전체 요소의 텍스트 노드를 리턴

 

2. 요소 추가

$('선택자').append('생성 구문')	선택자에 의해 선택된 요소의 자식 요소로 뒷부분에 추가한다. A 'B'
$('선택자').prepend('생성 구문')	선택자에 의해 선택된 요소의 자식 요소로 앞부분에 추가한다. 'B' A
$('선택자').after('생성 구문')	선택자에 의해 선택된 요소의 형제 요소로 뒷부분에 추가한다. A 'B'
$('선택자').before('생성 구문')	선택자에 의해 선택된 요소의 형제 요소로 앞부분에 추가한다. 'B' A

* after, before은 형제 요소로 추가되어서 A요소의 색으로 변경 안됨으로 예시 표현함

$('생성구문|태그명').appendTo('선택자')	특정 요소를 선택자로 지정한 요소의 자식 요소로 뒷부분에 추가한다. A 'B'
$('생성구문|태그명').prependTo('선택자')	특정 요소를 선택자로 지정한 요소의 자식 요소로 앞부분에 추가한다. 'B' A
$('생성구문|태그명').insertAfter('선택자')	특정 요소를 선택자로 지정한 요소의 형제 요소로 뒷부분에 추가한다. A 'B'
$('생성구문|태그명').insertBefore('선택자')	특정 요소를 선택자로 지정한 요소의 형제 요소로 앞부분에 추가한다. 'B' A

$('#add1').append('<span>B</span>'); 
$('<span>B</span>').appendTo('#add5');

 

3. 요소 복제

- 선택자로 선택된 요소를 복사하는 메소드

// 이벤트 핸들러 복사 여부 (기본값: false)
$('선택자').clone([true|false]);

 

4. 요소 제거

$('선택자').remove();	선택자로 선택된 요소를 제거 후 제거된 요소를 리턴한다. 단, 리턴되는 요소의 이벤트도 삭제한다.
$('선택자').detach();	선택자로 선택된 요소를 제거 후 제거된 요소를 리턴한다. 단, 리턴되는 요소의 이벤트는 삭제하지 않는다.
$('선택자').empty();	선택자로 선택된 요소의 하위 요소들을 삭제한다.

 

5. 배열 관리

- 객체나 배열을 반복적으로 처리할 때 사용하는 메소드

let output = '';
let array = [
    {name: '네이버', link: 'https://www.naver.com'},
    {name: '구글', link: 'https://www.google.com'},
    {name: 'w3school', link: 'https://www.w3schools.com'}
];

// 1) $.each(배열, function(index, item){
$.each(array, (index, element) => {
    output += `<h4><a href="${element.link}">${element.name}</a></h4>`;
});

// 2) $('선택자').each(function(index, item){
$(array).each((index, element) => {
    output += `<h4><a href="${element.link}">${element.name}</a></h4>`;
});