웹어플이케이션_Chapter04_JQuery 2

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중복에 주의해야 한다.