[Jquery] 객체 조작 메서드

 객체 조작 메서드 

객체조작 메서드는 객체를 생성, 삭제, 복제, 속성 변환하는 메서드이다.
객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눠진다.

속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고,
수치 조작 메서드 요소의 넓이 높이나 위치 등을 조작할 때 사용하고,
객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용한다.

---

 속성 조작 메서드 

속성 조작 메서드는 요소의 속성을 조작하는 메서드이다.

1. html()  /  text() 메서드

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

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

// 기본형(1) : 선택한 요소의 하위 요소를 가져와서 문자열로 반환한다.
        $("요소").html();

// 기본형(2) : 선택한 요소의 하위 요소를 새 요소로 바꾼다.
        $("요소").html("새 요소");

// 기본형(1) : 선택한 요소의 텍스트만 가져온다.
        $("요소").text();
        
// 기본형(2) : 선택한 요소의 하위 요소를 새 텍스르토 바꾼다.
        $("요소").text("새 텍스트");

2. attr()  /  removeAttr() 메서드

attr() 메서드는
선택한 요소의 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성 값을 가져오고 싶을 때 사용한다.

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

//기본형(1) : 선택한 요소의 지정한 속성 값을 가져온다.
        $("요소").attr("속성명")

// 기본형(2) : 선택한 요소의 지정한 속성값을 적용한다.
        $("요소").attr("속성명","속성값")

// 기본형(3) : 선택한 요소에 여러개의 속성을 객체로 한번에 지정한다.
        $("요소").attr({속성명1 : "속성값1", 속성명2 : "속성값2"})

// 기본형(1) : 선택한 요소에 지정한 속성을 삭제한다.
        $("요소").removeAttr("속성명")

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

3. addClass()  /  removeClass()  /  toggleClass()  /  hasClass()

addClass() 메서드는 선택한 요소에 클래스를 생성하고

romoveClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제한다.

toggleClass() 메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고 있으면 삭제한다.

hasClass() 메서드는 선택한 요소에 지정한 클래스가 있으면 true를 반환한고 없으면 false를 반환한다.

// 기본형
        $("요소").addClass('클래스명')
        $("요소").removeClass('클래스명')
        $("요소").toggleClass('클래스명')
        $("요소").hasClass('클래스명')

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

4. val() 메서드

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

// 기본형(1) : 요소가 가지고 있던 속성값 가져오기
        $("요소").val()

// 기본형(2) : 요소에 새로운 값을 적용하기
        $("요소").val("새로운 값")

5. prop() 메서드

선택한 폼 요소(select, checkbox, radio)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용한다.
그리고 선택한 요소에 태그명(tagName), 노드 타입(nodeType), select 박스의 선택된 옵션의 index 값도 알 수 있다.

// 기본형(1) : 선택한 폼 요소가 체크(선택)된 상태를 true/false로 반환한다. 
        $("요소").prop('checked')
        $("요소").prop('selected')

// 기본형(2) : 폼 요소를 선택하여 체크 또는 선택된 상태로 바꾼다.
        $("요소").prop('checked', true)
        $("요소").prop('checked', false)

        $("요소").prop('selected', true)
        $("요소").prop('selected', false)

// 기본형(3) : 선택한 요소의 태그명이나 노드타입, 선택된 옵션의 인덱스 값을 구할 수 있다.
        $("요소").prop('tagName')
        $("요소").prop('selectedIndex')
        $("요소").prop('nodeType')
// 이때 defalutValue 를 사용하면 사용자가 value 속성을 바꾸더라도 초기의 value 값을 가져온다.
        $("요소").prop('defalutValue')

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

 수치 조작 메서드 

수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드로
요소의 넓이 높이나 여백영역을 조작하거나 위치를 바꿀 때 사용한다.

1. 요소의 넓이 메서드

요소의 넓이 메서드는 요소의 높이와 너비 값을 반환하거나 바꿀 수 있는 메서드이다.
이때 요소의 넓이는 css와 동일하게 width, height로 구분하는데 영역을 지정하는 데 있어 차이점을 가진다.

자바스크립트에서는 영역을 padding/margin/border를 제외한 순수한 콘텐츠 영역과 콘텐츠와 padding 영역을 포함한 영역 border까지 포함한 영역으로 구분한다.
width나 height는 순수한 콘텐츠 영역의 넓이 값을 바꾸고 innerWidth와 innerHeight는 패딩까지를 포함한 영역을, outerWidth와 outerHeight는 보더까지 포함한 영역의 넓이 값을 바꾼다.

// 기본형(1) : 컨텐츠 영역(padding/margint/border 제외)의 너비값을 반환하거나 바꾼다.
        $("요소").width()
        $("요소").width(숫자)
        
// 기본형(2) : 컨텐츠 영역(padding/margint/border 제외)의 높이값을 반환하거나 바꾼다.
        $("요소").height()
        $("요소").height(숫자)

// 기본형(3) : 컨텐츠 영역 + padding 영역 의 너비값을 반환하거나 바꾼다.
        $("요소").innerWidth()
        $("요소").innerWidth(숫자)
        
// 기본형(4) : 컨텐츠 영역 + padding 영역 의 높이값을 반환하거나 바꾼다.
        $("요소").innerHeight()
        $("요소").innerHeight(숫자)

// 기본형(5) : 컨텐츠 영역 + padding + border 영역의 너비 값을 반환하거나 바꾼다.
        $("요소").outerWidth()
        $("요소").outerWidth(숫자)

// 기본형(5) : 컨텐츠 영역 + padding + border 영역의 높이 값을 반환하거나 바꾼다.
        $("요소").outerHeight()
        $("요소").outerHeight(숫자)

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

2. 요소 위치 메서드 

요소 위치 메서드에는 position() 메서드와 offset() 메서드가 있다.

position() 메서드는 요소를 기준으로 선택한 요소에서 가로/세로 떨어진 위치 좌표값을 반환하거나 바꿀 때 사용한다.
offset() 메서드는 document 문서를 기준으로 선택한 요소에서 떨어진 위치 좌표값을 반환하거나 바꿀 때 사용한다.

기본형으로는 원하는 요소를 불러온 뒤 position() 혹은 offset()을 붙이고 그 뒤에 위치값을 top / left / right / bottom 좌표를 붙이는데 이때 좌표 뒤에는 소괄호를 붙이지 않는다.

// 기본형
        $("요소").position().left / .right / .top / .bottom
        $("요소").offset().left / .top

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

3. 스크롤바 위치 메서드

스크롤바 위치 메서드는 스크롤바가 수직, 수평으로 이동한위칫값을 반환하고,
새 값이 들어오면 해당하는 위치로 스크롤을 이동시킨다.

scrollTop() 메서드는 브라우저의 스크롤바가 수직으로 이동한 위치값을 불러오거나 변경할 때 사용한다.
scrollLeft() 메서드도 브라우저의 스크롤바가 수평으로 이동한 위치값을 불러오거나 변경할 때 사용한다.

// 기본형(1)
        $(window).scrollTop();
        $(window).scrollTop("새로운 값");

// 기본형(2)
        $(window).scrollLeft();
        $(window).scrollLeft("새로운 값");

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

 객체 편집 메서드 

선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 새로 생성한 요소를 의도한 위치에 삽입하고
선택한 요소를 삭제하는 메서드들로 이루어져 있다.

1. before()  /  insertBefore()  /  after()  /  insertAfter() 

before() / insertBefore() 메서드는 선택한 요소의 이전 위치에 새 요소를 생성하고,
after() / insertAfter()메서드는 선택한 요소의 다음 위치에 새 요소를 생성한다.

// 기본형(1)
        $("요소").before("새 요소");
        $("새 요소").insertBefore("요소")
        
// 기본형(2)
        $("요소").after("새 요소");
        $("새 요소").insertAfter("요소")

#wrap 안에들어있는 p 태그중에 인덱스번호 2번의 p태그에 after와 before를 두번씩 추가해보았다.
이로 인해 새로운 태그가 추가되면 각각 기준이 되는 요소의 바로 위, 아래에 생성되는 것을 알 수 있다.

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

이때, eq메서드를 기준으로 인덱스를 선택할 때 주의할 점이 있다.
insertBefore나 insertAfter로 태그를 불러올 때 eq를 사용한다면 괄호 바깥에 쓰지 않고 내부에 작성해 주어야한다는 것이다.
바깥에 작성할 경우 앞에서부터 코드를 읽는 자바스크립트 형식 때문에 eq가 인식되지 않고 모든 p 태그에 after나 before를 추가하하는 것으로 인식된다.

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

  2. append()  /  appendTo()  /  prepend()  /  prependTo()

선택한 요소에 자식요소를 추가하는 메서드이다.
append는 요소 내의 첫번째 위치에 요소를 추가하고, prepend는 마지막 위치에 요소를 추가한다.

// 기본형(1)
        $("요소").append('새 요소')
        $("새 요소").appendTo('요소')
        
// 기본형(2)
        $("요소").prepend('새 요소')
        $("새 요소").prependTo('요소')

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

3. replaceWith()  /  replaceAll() 

replaceAll()메서드와 replaceWith()메서드는 선택한 요소를 새 요소로 바꿀 때 사용한다.
주로 선택한 모든 요소를 한번에 바꿀 때 사용한다.

// 기본형
        $("요소").replaceWith('새 요소');
        $("새 요소").replaceAll('요소');

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

4. unwrap()  /  wrap()  /  wrapAll()  /  wrapInner()

unwrap 메서드는 선택한 요소의 부모요소를 삭제한다.
wrap 메서드는 선택한 요소를 각각 새 요소로 감싼다.
wrapAll 메서드는 선택한 요소를 한꺼번에 새 요소로 감싼다.
wrapInner 메서드는 선택한 요소의 하위 요소를 새 요소로 감싼다.

// 기본형
        $("요소").unwrap();
        $("요소").wrap("새 요소");
        $("요소").wrapAll("새 요소");
        $("요소").wrapInner("새 요소");

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

선택자와 메서드를 활용하여 문제 풀어보기

※ 문제
1. wrap_1 안의 첫번째 p태그를 선택하여 '텍스트1'을 '내용1'로 바꾸기
2. wrap_1 안의 p태그 중 active를 선택하여 클래스를 지우고 on이라는 클래스 추가하기
3. wrap_1 안의 p태그 중 인덱스번호 2 번째 안의 a태그를 선택하여 href 속성 값을 네이버 주소로 바꾸기
4. wrap_1 안의 p태그 중 인덱스번호 3 번째의 input 태그를 선택하여 value 값을 'javascript'로 바꾸기
5. wrap_2 안의 첫번째 p태그를 선택하여 동생자리에 '<p>추가1</p>' 을 추가하기
6. wrap_2 안의 첫번째 p태그를 선택하여 형자리에 '<p>추가2</p>' 을 추가하기
7. wrap_3 안의 p태그를 선택하여 내용7,8의 부모태그를 삭제하고 p태그들의 안쪽에 strong태그 추가하기

 <!-- wrap_1 -->
    <div class="wrap_1">
      <p>텍스트1</p>
      <p class="active">내용2</p>
      <p><a href="#">네이버</a></p>
      <p><input type="text" value="hello" /></p>
    </div>
    <!-- wrap_2 -->
    <div class="wrap_2">
      <p>내용5</p>
      <p>내용6</p>
    </div>
    <!-- wrap_3 -->
    <div class="wrap_3">
      <div>
        <p>내용7</p>
        <p>내용8</p>
      </div>
    </div>

 

정답 : 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.