[제이쿼리] - ★★★객체 조작 메서드 / 속성 조작 메서드 html / text / attr / addClass / val / prop / 문자 추가하기, 속성 변경하기, 벨류값 변경하기, 클래스 생성하고 삭제하기

객체 조작 메서드★★★

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

< 속성 조작 메서드 >
 : 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드 요소의 넓이, 높이나 위치 등을 조작할 때 사용한다. 

< 객체 편집 메서드 >
: 객체를 생성하거나 삭제 또는 복제할 때 사용한다. 

---

속성 조작 메서드★★★

 

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

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

- html()
 : 선택한 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소를 바꿀 때 사용한다. 자식을 조작한다. (자바스크립트의 innerHTML innerText같은 애들)

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

2. $('요소선택').html('새 요소');
: 선택한 요소의 하위 요소를 새 요소로 바꾼다. 바꾸면 이전으로 돌아갈 수 없다. 
변수에 저장해놨다가 쓰는 것이 원본 유지를 할 수 있다.

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

[기본형]
1. $('요소선택').text();
: 선택한 요소의 텍스트만 가져온다.

2. $('요소선택').text('새 텍스트');
: 선택한 요소의 하위 요소를 새 텍스트로 바꿈.

2번을 사용하면 안에 태그가 들어있을 때 그 안의 태그는 사라지고 새로운 텍스트로만 교체된다.

      

 //#sec_1의 모든 자식 요소들을 가져옴.

 

  let result_1 = $("#sec_1").html();

        console.log(result_1);

//#sec_1 h2의 하위요소를 a태그로 바꾸기

 

 $("#sec_1 h2").html('<a href="#">바뀐 태그</a>');

 

 //h1안에 strong태그에 있는 텍스트를 result2에 할당

        let result_2 = $("h1 strong").text();

        console.log(result_2);  //객체 조작 및 생성가 출력

        //h1안에 strong태그에 있는 텍스트를 새 값으로 바꾸기

        $("h1 strong").text("바뀐 텍스트");

 

---

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

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

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

2. $('요소선택').attr('속성명', '새 값');
: 선택한 요소의 지정한 속성값을 적용한다. 

3. $('요소선택').attr({'속성명1':'속성값1', '속성명2':'속성값2'..... });
: 선택한 요소에 여러 개의 속성을 지정한다.

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

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

       

 //#sec_1 img태그의 src 속성을 변수 srcVal에 할당

        let srcVal = $("#sec_1 img").attr("src");

        console.log(srcVal); //./img/pic_3.jpg가 출력

        $("#sec_1 img")

          .attr({

            width: "200",

            src: "./img/pic_2.jpg",

            alt: "새로운 이미지",

          })

          .removeAttr("border");

 

---

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

- addClass()
: 선택한 요소에 클래스를 생성

 [기본형]
$('요소선택').addClass('클래스명')

- removeClass() 
: 선택한 요소에서 지정한 클래스를 삭제한다. 

 [기본형]
$('요소선택').removeClass('클래스명')

- toggleClass() ☆
 : 선택한 요소에 지정한 클래스가 없으면 생성하고 있으면 삭제한다. 

 [기본형]
$('요소선택').toggleClass('클래스명')

 - hasClass()
: 선택한 요소에 지정한 클래스가 있으면 true를 반환하고 없으면 flase를 반환한다. 

[기본형]
$('요소선택').hasClass('클래스명')

                

 //hasClass의 값을 #p6에 새 텍스트로 교체하기

        $("#p6").text($("#p5").hasClass("yellow"));

 

//클래스이름이 없는 #p1에 aqua 클래스를 지정하기

        $("#p1").addClass("aqua");

 //#p2에 클래스red 삭제하기

        $("#p2").removeClass("red");

        //#p3 클래스 이름이 없어서 토글클래스로 추가가 된다.

        $("#p3").toggleClass("green");

        //#p4에 클래스 green이 있어서 토글클래스로 삭제됬다.

        $("#p4").toggleClass("green");

---

 

---

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

 [기본형]
1. $('요소선택').val();
: 선택한 요소에서 value 속성값을 가져온다. 

2. $('요소선택').val('새 값');
: 선택한 요소에서 value의 새 값으로 바꾸기

 

        let result_1 = $("#user_name").val();

        console.log(result_1); //김땡땡이 출력됨.

        //#user_id의 벨류값을 hello로 바꾸기

        $("#user_id").val("hello");

 

---

 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' ☆ / 'defalutValue' ★)

 

: 선택한 요소의 태그명이나 노드 타입, 선택된 옵션의 인덱스 값을 구할 수 있다. 

이때 폼 요소의 defalutValue를 사용하면 사용자가 value속성을 바꾸더라도 초기의 value값을 가져온다. 

( 'tagName' / 'nodeType' / 'selectedIndex' / 'defalutValue')의 내용은 키워드라서 저대로 들어가야하고 문자열로 들어가야한다.

 

 let result_3 = $("#chk1").prop("checked");

        console.log(result_3); //체크가 안되있어서 false가 나온다.

        //chk1의 체크상태를 체크로 바꾸기

        $("#chk1").prop("checked", true);

        //chk2의 체크상태를 해제함

        $("#chk2").prop("checked", false);

        //선택한 항목의 인덱스 번호가 몇번인지 물어봄

        let result_4 = $("#se_1").prop("selectedIndex");

        console.log(result_4); //2가 나온다.