제이쿼리 -객체 조작 속성조작 메서드들

객체 조작

 

-객체 조작 메서드

이제부터는 객체를 생성,복제,삭제,속성 변환하는 객체 조작 메서드에 대해 살펴보겠습니다.

객체 조작 메서드는 크게 속성 조작 메서드와 수치 조작 메서드 객체 편집 메서드로 나눌 수 있습니다.

 

-html() / text() 메서드

html메서드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용.

 

text()메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용.

 

기본형: 1.$(“요소 선택”).html();

2.$(“요소 선택”).html(“새요소”);

3.$(“요소 선택”).text();

4.$(“요소 선택”).text(“새 텍스트”);

1->선택한 요소의 하위 요소를 가져와 문자열로 반환.

2->선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성

3->선택한 요소의 텍스트만 가져옴

4->선택한 요소의 하위 요소를 전부 제거하고 지정한 텍스트를 생성

 

-attr() / removeAttr() 메서드

attr()메서드는 선택한 요소에 새 속성을 생성 OR 존의 속성을 변경 OR 요소의 속성값을 불러올 때 사용한다.

 

removeAttr() 메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용한다.

 

기본형 : 1. $(“요소 선택”).attr(“속성명”);

2. $(“요소 선택”).attr(“속성명”,“새 값”);

3. $(“요소 선택”).attr({“속성명1”:“새 값1”,“속성명2”:“새 값2”...“속성명n”:“새 값n”});

 

1->선택한 요소의 지정한 속성값을 가져온다.

2->요소를 선택하여 지정한 속성값을 적용한다.

3->요소를 선택해서 지정한 여러 개의 속성값을 적용

 

removeAttr()메서드의 기본형

 

기본형 : 1.$(요소 선택).removeAttr(“속성”);

->선택한 요소에서 지정한 속성을 삭제.

 

-addClass()/removeClass()/toggleClass()/hasClass()메서드

1.addClass:선택한 요소에 클래스를 생성

2.removeClass:선택한 요소에서 지정한 클래스 삭제

3.toggleClass:선택한 요소에 지정한 클래스가 없으면 생성, 있으면 삭제

4.hasClass:선택한 요소에 지정한 클래스가 있으면 true반환 없으면 false반환

 

기본형 : 1.$(“요소선택”).addCalss(“class 값”);

2.$(“요소선택”).removeClass(“class값”);

3.$(“요소선택”).toggleClass(“class값”);

4.$(“요소선택”).hasClass(“class값”);

 

-val() 메서드

선택한 폼 요소의 value속성값을 가져오거나 새 값을 적용할 때 사용.

 

기본형:    1.$(“요소 선택”).val();

            2.$(“요소 선택”).val(“새 값”);

 

 1->선택한 폼 요소의 value 속성값을 가져온다.

2->요소를 선택하여 value속성에 새 값을 적용한다.

 

 

-prop() 메서드

선택한 폼 요소(선택상자,체크박스,라디오버튼)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용합니다.

그리고 선택한 요소의 태그명,노드타입,선택 상자의 선택된 옵션의 인덱스값도 알 수 있다.

 

기본형:1.$(“요소 선택”).prop(“[checked | selected ]”);

2.$(“요소 선택”).prop(“[checked | selected]”, [true | false]);

3.$(“요소 선택”).prop(“[tagName | nodeType | selectedIndex | defaultValue]”);

 

1->선택한 폼 요소가 체크된 상태인지 선택된 상태인지 알 수 있고 선택한 요소가 체크박스이면서 체크가되있다면 true를 반환한다.

2->폼 요소를 선택하여 체크 또는 선택 상태를 바꿀 수 있다.

3->선택한 요소의 태그명이나 노드타입, 선택된 옵션의 인덱스 값을 구한다. 

이때 prop(“defaultValue”)를 사용하면 사용자가 vale속성값을 바꿔도 초기의 value속성 값을 가져온다.