🧀 [UIUX] 0212 JQUERY Coding, 제이쿼리 4일차

✏️ 2025. 02월 12일 / jQuery 4일차

🌳 속성 조작 메서드
2. attr() / removeAttr()
attr()메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때,
또는 요소의 속성값을 불러오고 싶을 때 사용합니다.
removeAttr()메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.

      [기본형]
      - $("요소선택").attr("속성명")
      : 선택한 요소의 해당 속성값을 가져옵니다.
      - $("요소선택").attr("속성명", "새 값")
      : 선택한 요소의 지정한 속성에 새 값을 적용합니다.
        만약 해당 속성이 없다면 추가합니다.
        메서드의 ()안에 {}객체를 넣으면 여러 속성을 한 번에 적용할 수 있습니다.
      - $("요소선택").removeAttr("속성명")
      : 선택한 요소에서 지정한 속성을 삭제합니다.

3. addClass() / removeClass() / toggleClass() / hasClass()
addClass()는 선택한 요소에 새로운 클래스를 생성하고
removeClass()는 선택한 요소에 지정한 클래스명을 삭제하고
toggleClass()는 지정한 클래스 명이 없으면 생성하고 있으면 삭제합니다.
hasClass()는 선택한 요소에 지정한 클래스명이 있으면 true를 반환하고, 없으면 false를 반환합니다.

      [기본형]
      - $("요소선택").addClass("클래스명");
      : 저장한 요소에 새로운 클래스 명을 추가합니다.
      - $("요소선택").removeClass("클래스명")
      : 지정한 요소에서 해당 클래스 명을 삭제합니다.
      - $("요소선택").toggleClass("클래스명")
      : 해당한 요소에 클래스명이 있으면 삭제하고 없으면 추가합니다.
      - $("요소선택").hasClass("클래스명")
      : 지정한 요소에 클래스 명이 있으면 true 없으면 false를 반환합니다.

4. val()
val()메서드는 입력양식 요소의 value 속성값을 가져오거나
새 값을 적용할 때 사용합니다.

      [기본형]
      - $("요소선택").val();
      : 선택한 폼 요소의 value 값을 받아옵니다.
      - $("요소선택").val("새 값");
      : 선택한 폼 요소의 value 값을 새 값으로 바꿉니다.

5. prop()
prop()메서드는 선택한 폼 요소(셀렉트 박스, 체크 박스, 라디오 버튼)의
상태 속성 값을 가져오거나 새롭게 설정할 때 사용합니다.
그리고 선택한 요소의 태그명(tagName), 노드타입(nodeType),
셀렉트 박스의 선택된 옵션의 인덱스 값을 반환하기도 합니다.
또, 폼 요소에 기본적으로 지정되어 있던 값을 받아오기도 합니다.

      [기본형]
      - $("요소 선택").prop("checked / selected")
        : 선택한 폼 요소의 상태가 체크된 상태인지 또는 선택된 상태인지 알 수 있습니다.
          예를 들어 checked 되어 있는 상태면 true를 반환하고,
          체크된 상태가 아니라면 false를 반환합니다.
      - $("요소 선택").prop("checked / selected", true / false)
        : 폼 요소를 선택하여 체크 또는 선택 상태를 바꿉니다.
      - $("요소 선택").prop("tagName / nodeType / selectedIndex / defaultValue")
        : 선택한 요소의 태그명이나 노드 타입, 셀렉스 박스의 선택된 option의 인덱스 값,
          태그에 지정되어 있던 기본값을 받아옵니다.
          폼 요소에 defaultValue를 사용하게 되면, value 속성값이 바뀌더라도
          초기에 설정해두었던 value 값을 가져옵니다.

🌳 수치 조작 메서드
수치 조작 메서드는 요소의 속성을 조작할 때,
특히 요소의 위치나 넓이 높이 등 수치를 조작할 때 사용합니다.
1. 요소의 넓이 높이 메서드
선택한 요소의 넓이와 높이를 조작할 때 사용하는 메서드 입니다.
순수한 컨텐츠 넓이 높이만 조작하거나 padding까지를 포함한 넓이 높이를 조작하거나
`border까지를 포함한 넓이 높이를 조작하는 메서드들로 이루어져 있습니다.

      [기본형]
      - $("요소선택").width(값), $("요소선택").height(값)
      : 요소의 순수한 넓이와 높이값을 반환하거나 바꿀 때 사용합니다.
        ()를 비워두면 값을 가져오고, 값을 입력하면 해당 넓이/높이로 바꿉니다.
      - $("요소선택").innerWidth(값), $("요소선택").innerHeight(값)
      : padding 영역을 포함한 넓이 높이를 반환하거나, 해당 값으로 바꿀 수 있습니다.
      - $("요소선택").outerWidth(값), $("요소선택").outerHeight(값)
      : border 영역을 포함한 넓이 높이를 반환하거나, 해당 값으로 바꿀 수 있습니다.

2. 요소 위치 메서드
요소 위치 메서드에는 position()메서드와 offset()메서드가 있습니다.
position()메서드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서
가로 / 세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용합니다.
position()메서드는 absolute와 비슷하게 동작합니다.
offset()메서드는 document(문서)를 기준으로 선택한 요소의
가로/세로로 떨어진 위치 좌푯값을 반환하거나 변경할 때 사용합니다.
offset()메서드는 relative와 비슷하게 동작합니다.

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

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

      [기본형]
      $(window).scrollTop(); 또는 $(window).scrollTop(새 값);
      $(window).scrollLeft(); 또는 $(window).scrollLeft(새 값);

⭐⭐객체 편집 메서드⭐⭐
객체 편집 메서드는 선택한 요소를 복제하거나 새 요소를 생성하는 메서드와
새로 생성한 요소를 의도한 위치에 추가하고 선택한 요소를 삭제하는 메서드들로 이루어져 있습니다.
1. ⭐ before() / insertBefore() / ⭐ after() / insertAfter()
before() / insertBefore()는 선택한 요소의 이전 위치에 새 요소를 생성하고,
after() / insertAfter()는 선택한 요소의 다음 위치에 새 요소를 생성합니다.

      [기본형]
      - $("요소선택").before("새 요소")
      - $("새 요소").insertBefore("요소선택")
      - $("요소선택").after("새 요소")
      - $("새 요소").insertAfter("요소선택")

2. ⭐ append() / appendTo() / ⭐ prepend() / prependTo()
append() / appendTo()는 선택한 요소 안의 마지막 위치에 새 요소를 생성하고 추가합니다.
prepend() / prependTo()는 선택한 요소 안의 첫번째 위치에 새 요소를 생성하고 추가합니다.

      [기본형]
      - $("부모요소").append("새요소");
      - $("새요소").appendTo("부모요소");
      - $("부모요소").prepend("새요소")
      - $("새요소").prependTo("부모요소");

⭐ 3. clone() / empty() / remove()
clone() 메서드는 선택한 요소를 복제합니다.
인자값이 true일 경우 이벤트까지 복제하고 false일 경우 선택한 요소만 복제합니다.
기본값은 false 입니다.
empty() 메서드는 선택한 요소의 하위 요소를 전부 삭제 합니다.
remove() 메서드는 선택한 요소를 삭제합니다.

      [기본형]
      - $("요소선택").clone(true/false);
      - $("부모요소").empty();
      - $("요소선택").remove

replaceAll() / replaceWith() ⭐
replaceAll() / replaceWith() 메서드는 선택한 요소를 새 요소로 바꿀 때 사용합니다.
주로 선택한 모든 요소를 한꺼번에 바꾸고 싶을 때 사용합니다.

      [기본형]
      - $("새 요소").replaceAll("요소선택");
      - $("요소선택").replaceWith("새 요소");

5. unwrap() / wrap() / wrapAll() / wrapInner() ⭐
unwrap() 메서드는 선택한 요소의 부모요소를 삭제합니다.
wrap() 메서드는 선택한 요소를 각각 새요소로 감쌉니다.
wrapAll() 메서드는 선택한 요소를 한꺼번에 새요소로 감쌉니다.
wrapInner() 메서드는 선택한 요소의 모든 하위 요소를 새 요소로 감쌉니다.

    [기본형]
    - $("요소선택").unwrap();
    - $("요소선택").wrap("새 요소");
    - $("요소선택").wrapAll("새 요소");
    - $("요소선택").wrapInner("새 요소");

⭐ 제이쿼리 이벤트 등록 메서드
이벤트란 사이트에서 방문자가 하는 모든 행위를 말하고,
이벤트 핸들러는 사용자의 동작에 따라 실행되는 코드를 말합니다.
이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 '단독 이벤트 등록 메서드'와
2개 이상의 이벤트를 등록할 수 있는 '그룹 이벤트 등록 메서드'가 있습니다.
단독 이벤트는 한 가지 동작에 대한 이벤트만 등록할 수 있습니다.
이때 해당 태그에 .이벤트명() 메서드를 사용합니다.
그룹 이벤트는 이벤트 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있습니다.
이때 .on()메서드를 사용합니다.
on() 메서드 안에는 이벤트 명을 문자열로 전달하거나 객체를 전달할 수 있습니다.

      [단독 이벤트 기본형]
      $("이벤트 대상").이벤트 종류(function(){ 자바스크립트 코드 })
      -----------------------------------------------
      [그룹 이벤트 기본형]
      1. on()메서드 등록방식 1
      ---------------------------------------------------------------------------------------------
      $("이벤트 대상").on("이벤트 종류1 이벤트 종류2 이벤트 종류3..", function(){ 자바스크립트 코드 })
      -----------------------------------------------
      2. on()메서드 등록방식 2
      ---------------------------------------------------------------------------------------------
      $("이벤트 대상").on({
        "이벤트 종류1 이벤트 종류2...." : function(){ 자바스크립트 코드 }
      })
      --------------------------------------------------
      => 1번과 2번 이벤트 등록 방식은 여러 동작에 대해 하나의 이벤트 핸들러를 동작시키고자 할 때 사용하는 기본형입니다.
      -------------------------------------------------------
      3. on()메서드 등록방식 3
      ---------------------------------------------------------------------------------------------
      $("이벤트 대상").on({
        "이벤트 종류1" : function(){ 자바스크립트 코드 },
        "이벤트 종류2" : function(){ 자바스크립트 코드 },
        "이벤트 종류3" : function(){ 자바스크립트 코드 },
      })
      -----------------------------------------------------------------
      => 사용자의 동작마다 각각의 실행시킬 이벤트 핸들러가 다를 경우 사용합니다.