jQuery의 메서드(1)
🔴선택된 요소에 접근하는 메서드
🔴요소를 추가하는 메서드
🔻기존 요소의 내부에 추가
🔻기존 요소의 외부에 추가
🔻기존 요소를 포함하는 요소의 추가
🔴요소의 복사, 대체,삭제
선택된 요소에 접근하는 메서드
선택자에 의해 선택된 요소의 값을 읽어 가져오거나 원하는 값으로 설정하기 위해서는 해당 메서드들을 통해 값을 원하는 요소에 접근할 수 있다.
이러한 메서드를 getter, setter메서드라고 한다.
- getter 메서드: 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드로 이러한 getter 메소드는 아무런 인수를 전달하지 않고 호출한다.
- setter 메서드: 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드로 이러한 setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다.
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. |
| .width() | 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함. |
| .height() | 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함. |
| .attr() | 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함. |
| .position() | 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드) |
| .val() | <form>요소의 값을 반환하거나 설정함. |
📌메서드 체이닝(method chaining)
getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환한다. 만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 '첫 번째 요소'의 값만을 반환하게 된다.
하지만 setter 메소드는 선택된 ‘모든 요소' 에 인수로 전달된 값을 설정한다. 그리고 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환한다. 이렇게 반환된 제이쿼리 객체를 이용하면 세미콜론(;)을 사용하지 않고도, 곧바로 다른 제이쿼리 메소드를 호출할 수 있다.
이런 방식으로 여러 개의 제이쿼리 메서드를 한 줄에 연속해서 호출하는 것을 메서드 체이닝이라고 한다. 이를 통해 코드를 간결하고 가독성이 높게 유지할 수 있다. 메서드 체이닝은 각 메서드 호출의 결과가 다시 다음 메서드의 대상이 되는 것을 의미한다. 이를 통해 여러 작업을 연속적으로 수행할 수 있다.<h1>메소드 체이닝</h1> <ul id="list"> <li>첫 번째 아이템이에요!</li> <li>두 번째 아이템이에요!</li> <li>세 번째 아이템이에요!</li> </ul> <button>텍스트 변경</button>$(function() { $("button").on("click", function() { $("#list") // id가 "list"인 요소의 자손 요소 중에서 .find("li") // <li>요소를 모두 선택한 후에, .eq(1).html("두 번째 아이템을 선택했어요!!") // 그 중에서 두 번째 요소의 값을 설정함. .end() // 다시 id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에, .eq(2).html("세 번째 아이템도 선택했어요!!"); // 그 중에서 세 번째 요소의 값을 설정함. }); });
✔️메서드 체이닝에서getter, setter메서드를 구분해서 사용하는 것은 아니니 특징정도로만 이해하고 메서드 체이닝은 그냥 메서드를 엮어서 한번에 사용하는 것을 의미한다 정도로 넘어가기
요소를 추가하는 메서드
기존 요소의 내부에 추가
기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.
| .append() | 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함. |
| .prepend() | 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함. |
| .appendTo() | 선택한 요소를 해당 요소의 마지막에 삽입함. |
| .prependTo() | 선택한 요소를 해당 요소의 처음에 삽입함. |
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. |
기존 요소의 외부에 추가
기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있다.
| .before() | 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. |
| .after() | 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. |
| .insertBefore() | 선택한 요소를 해당 요소의 앞에 삽입함. |
| .insertAfter() | 선택한 요소를 해당 요소의 뒤에 삽입함. |
기존 요소를 포함하는 요소의 추가
기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.
| .wrap() | 선택한 요소를 포함하는 새로운 요소를 추가함. |
| .wrapAll() | 선택한 모든 요소를 포함하는 새로운 요소를 추가함. |
| .wrapInner() | 선택한 요소에 포함되는 새로운 요소를 추가함. |
요소의 복사 및 삭제
요소의 복사
| .clone() | 선택한 요소를 복사하여 새로운 요소를 생성함. |
요소의 대체
선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체할 수 있다.
| .replaceAll() | 선택한 요소를 지정된 요소로 대체함. |
| .replaceWith() | 선택한 모든 요소를 지정된 요소로 대체함. |
요소의 삭제
선택한 요소나 콘텐츠를 삭제할 수 있다.
| .remove() | 선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트도 같이 삭제됨) |
| .detach() | 선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트는 유지됨) |
| .empty() | 선택한 요소의 자식 요소를 모두 삭제함. |
| .unwrap() | 선택한 요소의 부모 요소를 삭제함. |
🔗참고🔗
https://tcpschool.com/jquery/jq_elementTraversing_AncestorTraversing