1. 객체 속성 조작
태그 내의 내용 변경하는 방식이다.
각 속성에 Text / HTML / INPUT 인자값에 값을 넣으면 Setter, 비워놓으면 Getter형식으로 작동한다.
속성 조작
Attribute
.attr()로 사용하며 HTML 태그의 속성 값을 받아오거나 변경할 때 사용한다. 주로 img 태그의 src, a 태그의 href 등을 조작할 때 사용
Property
.prop()로 사용하며 DOM의 상태 값을 받아오는데 사용한다. 임의의 변수를 저장할 때에도 사용 가능하다.
2. 객체 수치 조작
3. 객체 편집
종류 | 표기 | 설명 |
앞에 추가 | ('#obj').before('<div>안녕</div>') ('<div>안녕</div>').insertBefore('#obj') |
선택한 객체 전에 객체를 추가한다. |
뒤에 추가 | ('#obj').after('<div>안녕</div>') ('<div>안녕</div>').insertAfter('#obj') |
선택한 객체 후에 객체를 추가한다. |
처음에 삽입 | ('#obj').prepend('<div>안녕</div>') ('<div>안녕</div>').prependTo('#obj') |
선택한 객체의 자식에 첫번째로 삽입한다. |
맨뒤에 삽입 | ('#obj').append('<div>안녕</div>') ('<div>안녕<div>).appendTo('#obj') |
선택한 객체의 자식에 마지막으로 삽입한다. |
삭제 | ('#obj').remove() | 선택한 객체 삭제 |
비우기 | ('#obj').empty() | 선택한 객체 비우기 |
복제 | ('#obj').clone() | 선택한 객체 복제 |
append나 prepend등은 객체를 이동하는 메서드이다. 하지만 기존의 것을 복제하기 위해선 clone을 해야한다.
id를 동일하게 가지므로 주의해야한다.
문제
선택한 요소의 text를 변경하거나 가져오려면 어떤 명령어를 사용하는가? 각각 적으시오.
변경시 : $('요소').text('값')
값 가져올 시 :$('요소).text()
선택한 요소의 html 값을 변경하거나 가져오려면 어떤 명령어를 사용하는가? 각각 적으시오.
변경 시 : $('요소').html('값')
값 가져올 시 : $('요소').html()
선택한 요소의 input값을 변경하거나 가져변오려면 어떤 명령어를 사용하는가? 각각 적으시오.
변경 시 : $('요소').val('값')
값 가져올 시 : $('요소').val()
선택한 요소의 HTML 태그의 속성값을 변경하거나 가져오려면 어떤 명령어를 사용하는가?
변경 시 : $('요소').attr('속성','값')
값 가져올 시 $('요소').attr('속성')
선택한 요소의 DOM의 상태값을 변경하거나 가져오려면 어떤 명령어를 사용하는가?
변경 시 : $('요소').prop('DOM','값')
값 가져올 시 : $('요소').prop('DOM')
객체 편집
종류 | 표기법 | 설명 |
앞에 추가 | ('선택한객체').before('삽입 할 객체') ('삽입할 객체').insertBefore('선택한객체') |
선택한 객체에 앞에 추가할 때 사용한다. |
뒤에 추가 | ('선택한 객체').after('삽입 할 객체') | 선택한 객체 뒤에 추가할 때 사용한다. |
앞에 삽입 | ('부모객체').prepend('삽입 할 객체') ('삽입 할 객체').prependTo('부모객체') |
자식요소 맨 앞에 추가할 때사용한다. 이동할 때도 사용할 수 있다. |
뒤에 삽입 | ('부모객체').append('삽입 할 객체') ('삽입 할 객체').append('부모객체') |
자식요소 맨 뒤에 추가할 때 사용한다. 이동할 때도 사용할 수 있다. |
제거 | ('객체').remove() | |
비우기 | ('객체').empty() | |
복제 | ('객체').clone() | 기존의 객체를 복제한다. id중복에 유의해야 한다. |
객체를 복제할 때 주의할 점은 무엇인가?
id도 같이 복제되기에 id중복에 주의해야 한다.
'웹어플리케이션' 카테고리의 다른 글
웹어플리케이션_Chapter06_날씨 어플리케이션 제작 (0) | 2022.10.11 |
---|---|
웹어플리케이션_Chapter05_JQuery3 : 이벤트&애니메이션 (0) | 2022.10.04 |
웹어플리케이션_Chapter01_개요 (0) | 2022.09.06 |