📖 객체 조작 메서드★★★
객체조작 메서드는 객체를 생성, 삭제, 복제, 속성 변환하는 메서드이다.
객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드, 객
체 편집 메서드로 나눠진다.
속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드 요소의 넓이, 높이나
위치 등을 조작할 때 사용하고, 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때
사용한다.
속성 조작 메서드★★★
속성 조작 메서드는 요소의 속성을 조작하는 메서드이다.
1. html() /text() 메서드
html()메서드는 선택한 하위요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고
새 요소로 바꿀 때 사용한다.
text() 메서드는 선택한 요소의 포함되어 있는 전체 텍스트를 가져오거나 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용한다.
[기본형]
1. $('요소선택').html();
선택한 요소의 하위요소를 가져와 문자열로 반환한다.
2. $('요소선택').html('새 요소');
선택한 요소의 하위 요소를 새 요소로 바꾼다.
3. $('요소선택').text();
선택한 요소의 텍스트만 가져온다.
4. $('요소선택').text('새 텍스트');
선택한 요소의 하위 요소를 새 텍스트로 바꿈.
2.attr() / removeAttr()메서드
attr()메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할때
또는 요소의 속성값을 가져오고 싶을 때 사용한다.
removeAttr()메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용한다.
[기본형]
1.("요소선택").attr('속성명', '새값')
-선택한 요소의 지정한 속성값을 적용한다.
3.("요소선택").removeAttr('속성명')
-선택한 요소에 지정한 속성을 삭제한다.
3. addClass() /removeClass() /toggleClass() /hasClass()
addClass()메서드는 선택한 요소에 클래스를 생성하고
removeClass()메서드는 선택한 요소에서 지정한 클래스를 삭제한다.
toggleClass()메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고 있으면 삭제한다.
hasClass()메서드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고
없으면 false를 반환한다.
[기본형]
1. $('요소선택').addClass('클래스명');
2. $('요소선택').removeClass('클래스명');
3. $('요소선택').toggleClass('클래스명');
4. $('요소선택').hasClass('클래스명');
$("#p1").addClass("aqua");
$("#p2").removeClass("red");
$("#p3").toggleClass("green");
$("#p4").toggleClass("green");
$("#p6").text($("#p5").hasClass("yellow"));
}); #p5에 class명 yellow가 있을 경우 hasClass는 true를 반환하고 이 값은 text()안으로 들어간다. 따라서 #p6.text(true)인 true 택스트가 출력된다.
4. val()메서드
선택한 폼 요소에 value속성값을 가져오거나 새 값을 적용할 때 사용한다.
[기본형]
$('요소선택').val(); -value속성값을 가져오기 $('요소선택').val('새 값') -value속성값을 새 값으로 적용하기
5.prop()메서드★
prop()메서드는 선택한 폼 요소(select, checkbox , radio)의 상태 속성값을 가져오거나
새롭게 설정할 때 사용한다. 그리고 선택한 요소의 태그명(tagName), 노드 타입(nodeType),
select박스의 선택된 옵션의 index값도 알 수 있다.
[기본형]
1.$("요소선택").prop('checked / selected')
-선택한 폼 요소(select,checkbox, radio)가 체크된 상태인지 선택된 상태인지 알 수 있다.
예를들어 체크박스가 체크된 상태이면 true를 반환하고 아니면 false를 반환한다.
2.$("요소선택").prop('checked / selected' , true / false)
-폼 요소(select,checkbox, radio)를 선택하여 체크 또는 선택 상태로 바꾼다.
3.$("요소선택").prop('tagName' / 'nodeType' 'selectedIndex' / 'defaultValue')
-선택한 요소의 태그명이나 노드 타입, 선택된 옵션의 인덱스값을 구할 수 있다.
이때 defaultValue를 사용하면 사용자가 value속성을 바꾸더라도 초기의 value값을 가져온다.
