✅ JQuery 메소드 정리
JQuery 정리에 앞서 요즘 jQuery를 쓰는 첫번째 이유는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한
라이브러리이다.
자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스라고 한다.
자바스크립트로 코딩하면 여러줄이 필요하지만, jQuery 사용 시 많이 줄여서 코드 작업을 할 수 있다. 또한, jQuery는 DOM제어 보다 크로스브라우징(최대한 많은 종류의 웹 브라우저에서 작동하는 웹페이즈를 만드는 방법 중 하나) 처리가 편리하다.
IE7은 비표준 브라우저이기 때문에 이벤트 등록 시 자바스크립트로 처리할 경우 attachEvent(), addEventListener() 등을 사용하여 코드를 사용한다. 이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 쉽게 처리할 수 있다.
(자바스크립트 기본 문법을 모르면 사용하는데 어려움이 있다.)
메소드 | 설명 |
.html() | 해당 요소의 HTML을 반환 |
.text() | 해당 요소의 TEXT를 반환 |
.width() | 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환 |
.height() | 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환 |
.attr() | 해당 요소의 명시된 속성의 속성값을 반환 |
.val() | <form> 요소의 값을 반환 |
📌 html()
(=innerHTML)
📌 text()
(=textContent)
📌 width(), height()
📌 attr()
(=setAttribute() 와 getAttribute() 같다.)
👉 안에 인자를 주냐 안주냐에 따라 set, get이 정해짐
📌 val()
form태그의 value를 설정하거나 가져온다.
👉 select 옵션 값이 변경되면 그 값 val() 메소드를 통해 'alert'로 출력함
✅ 요소 내부(자식) 추가
메소드 | 설명 |
.append() | 선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함. |
.appendTo() | 선택한 요소를 해당 요소의 마지막에 삽입함 |
.prepend() | 선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함. |
.prependTo() | 선택한 요소를 해당 요소의 처음에 삽입함 |
📌 appned() - 선택한 요소의 안에 '해당 요소의 마지막'에 추가한다.(자식을 추가해서 넣는다)
👉 실행결과 아래와 같이 맨아래에 li 요소가 새롭게 추가된다.
📌 appnedTo() - .append() 메소드와 동일하지만. 소드(Source)와 타겟(Target)의 위치가 서로 반대로 되어 있다.
👉 실행결과 아래와 같이 'p' 태그 뒤에 'span'이 추가된다.
✅ 요소 외부 추가
메소드 | 설명 |
.before() | 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. |
.insertBefore() | 선택한 요소를 해당 요소의 앞에 삽입함 |
.after() | 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. |
.insertAfter() | 선택한 요소를 해당 요소의 뒤에 삽입함 |
📌 after() - 선택한 요소의 밖에 새로운 요소나 콘텐츠를 추가
📌 insertAfter()
동작은 .after() 메소드와 같지만, 소드(Source)와 타겟(Target)의 위치가 서로 반대로 되어 있다.
(👉 append() 메소드와 차이점은 내부에서 자식으로서 추가하는거고 after() 메소드는 외부 바로 다음에 추가하는 것.)
✅ 요소 복사
메소드 | 설명 |
.clone() | 선택한 요소를 복사하여 새로운 요소를 생성함 |
.clone() 메소드는 기존의 HTML 요소를 복사하여 새로운 HTML을 생성할 뿐 요소를 추가하지는 않기 때문에 .append() 메소드 등을 이용하여 요소를 추가해야 한다.
(👉자바스크립트의 cloneNode와 유사 )
✅ 요소 대체
메소드 | 설명 |
.replaceAll() | 선택한 요소를 지정된 요소로 대체함. |
. replaceWith() | 선택한 모든 요소를 지정된 요소로 대체함. |
📌 replaceAll()
$('바뀌게 될 요소').replaceAll('바꾸고 싶은 요소');
📌 replaceWith()
$('바꾸고 싶은 요소').replaceWith('바뀌게 될 요소');
.replaceWith() 메소드의 동작은 .replaceAll 메소드와 비슷하지만, 소드(Source)와 타겟(Target)의 위치가 서로 반대로 되어 있다.
(👉 .replaceAll() 메소드와 .replaceWith() 메소드는 제거된 요소와 관련된 모든 데이터와 이벤트 핸들러도 같이 제거된다. )
✅ 요소 삭제
메소드 | 설명 |
.remove() | 선택한 요소를 DOM 트리에서 삭제함.(삭제된 요소와 연관된 제이쿼리나 이벤트도 같이 삭제됨) |
.detach() | 선택한 요소를 DOM 트리에서 삭제함.(삭제된 요소와 연관된 제이쿼리나 이벤트는 유지) |
.empty() | 선택한 요소의 자식 요소를 모두 삭제함. |
.unwrap() | 선택한 요소의 부모 요소를 삭제함. |
📌 remove()
.remove() 메소드는 선택한 HTML 요소를 DOM 트리에서 삭제, 이떄 연관된 jQuery나 이벤트도 모두 함께 삭제된다.
✅ 자손 요소 탐색
메소드 | 설명 |
.children() | 선택한 요소의 자식(Child) 요소를 모두 선택함. |
.find() | 선택한 요소의 자손(Descendant) 요소 중에서 전달 받은 선택자에 해당하는 요소를 모두 선택함. |
✅ 형제 요소 탐색
메소드 | 설명 |
.siblings() | 선택한 요소의 형제(slibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택함. |
.next() | 선택한 요소의 바로 다음에 위치한 형제 요소를 선택함. |
.nextAll() | 선택한 요소의 다음에 위치한 형제 요소를 모두 선택함. |
.nextUntil() | 선택한 요소의 다음 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
.prev() | 선택한 요소의 바로 이전에 위치한 형제 요소를 선택함. |
.prevAll() | 선택한 요소의 이전에 위치한 형제 요소를 모두 선택함. |
.prevUntil() | 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택함. |
✅ 클래스 설정 메소드
메소드 | 설명 |
.add() | 선택한 요소에 인수로 전달 받은 클래스를 추가함. |
.removeClass() | 선택한 요소에서 인수로 전달 받은 클래스를 제거함 |
.ToggleClass() | 선택한 요소에 클래스가 없으면 인수로 전달 받은 클래스를 추가하고, 전달 받은 클래스가 추가되어 있으면 제거함. |
.hasClass() | 인수로 전달 받은 값이 선택한 요소의 클래스 이름과 일치하는지 확인함. |
✅ 기타 요소 탐색
메소드 | 설명 |
.add() | 선택한 요소의 집합에 전달 받은 요소를 추가함. |
.addBack() | 선택한 요소의 집합에 바로 전에 선택했던 요소를 추가함. |
.end() | 마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원함. |
.offsetParent() | 선택한 요소를 위치시킬 때 기준이 되었던 조상 요소를 선택함. |
.contents() | 선택한 요소의 자식(Child) 요소를 모두 선택함.(텍스트 노드와 주석 노드까지 모두 포함) |
📌 add()
아래와 같이 선택한 요소에 다른 요소를 추가로 선택하여 변경 또는 설정이 가능함.
✅ 필터링 요소 탐색
메소드 | 설명 |
.first() | 선택한 요소 중에서 첫 번째 요소를 선택함. |
.last() | 선택한 요소 중에서 마지막 요소를 선택함. |
.filter() | 선택한 요소 중에서 전달 받은 선택자에 해당하거나, 함수 호출의 결과가 참(True)인 요소를 모두 선택함. |
.not() | 선택한 요소 중에서 전달 받은 선택자에 해당하거나, 함수 호출의 결과가 참(True)인 요소를 제외한 나머지 모두 선택함. |
.has() | 선택한 요소 중에서 전달 받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택함. |
.is() | 선택한 요소 중에서 전달 받은 선택자에 해당하는 요소가 하나라도 존재하면 참(True)을 반환함 |
.eq() | 선택한 요소 중에서 전달 받은 인덱스에 해당하는 요소를 선택함. |
.slice() | 선택한 요소 중에서 전달 받은 인덱스 범위에 해당하는 요소만을 선택함. |
'Library > JQuery' 카테고리의 다른 글
[Jquery] AJAX (0) | 2023.12.13 |
---|---|
JQuery 기본 문법 (0) | 2023.12.01 |