04. jQuery 메소드와 이벤트

🔅 jQuery 메소드

• html() : 요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML

• text() : 요소에 작성된 내용을 얻어옴(태그 미포함) == innerText

• val() : value 속성 값을 얻어옴

• html("내용") : 요소에 내용 출력(태그 인식 O)

• text("내용") : 요소에 내용 출력(태그 인식 X)

• val("내용") : value 속성의 값을 지정

📍 객체(요소) 삽입 메소드

선택자 요소(A)를 기준으로 삽입 메서드 매개변수에 생성된 요소(B) 또는 함수의 리턴값을 추가

• $(A).append(B) : A요소 내 뒷부분에 B를 추가(자식)

• $(A).prepend(B) : A요소 내 앞부분에 B를 추가(자식)

• $(A).after(B) : A요소 뒷부분에 B를 추가(형제)

• $(A).before(B) : A요소 앞부분에 B를 추가(형제)

생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가

• $(B).appendTo(A) : B를 A의 요소 내 뒷부분에 추가(자식)

• $(B).prependTo(A) : B를 A의 요소 내 앞부분에 추가(자식)

• $(B).insertAfter(A) : B를 A의 요소 뒤에 추가(형제)

• $(B).insertBefore(A) : B를 A의 요소 앞에 추가(형제)

📍 제거 메서드

• empty() : 자식 요소들을 모두 제거하는 메소드 --> 특정 요소 내부를 비움
  
• detach() : 요소 잘라내기, 관련 이벤트로 같이 잘라냄 --> 잘라내고 가지고 있음
  
• remove() 버튼 : 요소 잘라내기, 관련 이벤트 삭제--> 잘라내고 가지고 있음

    <button type="button" id="btn2-1">empty()</button>
    <button type="button" id="btn2-2">remove()</button>
    <button type="button" id="btn2-3">detach()</button>

    <div id="area3">
        <div class="item" id="div3">안녕하세요</div>
        <div class="item" id="div3">안녕하세요</div>
    </div>

    <hr />

    <div id="area4">
      <div class="item" id="div3">안녕하세요</div>
    </div>
    <script>
      $("#div3").hover(
        function () {
          // 마우스가 들어왔을 때 현재 요소에 lime 클래스 추가
          $(this).addClass("lime");
        },
        function () {
          // 마우스가 나갔을 때 현재 요소에서 lime 클래스 제거
          $(this).removeClass("lime");
        }
      );

      // empty() 버튼
      // empty() : 자식 요소들을 모두 제거하는 메소드
      //          --> 특정 요소 내부를 비움
      $("#btn2-1").on("click", function () {
        // id가 area3인 요소의 내부를 비움
        $("#area3").empty();
      });

      // remove() 버튼
      // 요소 잘라내기, 관련 이벤트 삭제--> 잘라내고 가지고 있음
      $("#btn2-2").on("click", function () {
        const el = $("#area3").remove();
        $("#area4").append(el);
      });

      // detach() 버튼
      // 요소 잘라내기, 관련 이벤트로 같이 잘라냄 --> 잘라내고 가지고 있음
      $("#btn2-3").on("click", function () {
        const el = $("#area3").detach();
        $("#area4").append(el);
      });
    </script>

📍 input 태그 관련 이벤트

• focus : input 태그에 포커스가 맞춰졌을 때

• blur : 포커스가 해제 되었을 떄

• change : input 태그의 값이 변했을 때
  - checkbox, radio, select(마우스 선택 요소) : 값이 변했을 때 change 이벤트 발생
  - text 관련 요소(기보드 값을 변경하는 요소) : 포커스가 해제되었을 때 이전 값과 다를 경우 change 이벤트 발생

• select : 선택한 요소 입력 영역 값에 블럭이 설정된 경우

• input : 입력과 관련된 모든 이벤트

• 문자열.substr(시작인덱스, 종료인덱스) -> 문자열을 시작 인덱스 이상부터, 종료 인덱스 미만까지를 잘라내어 반환