JQuery 메소드 종류

✅ 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()	선택한 요소 중에서 전달 받은 인덱스 범위에 해당하는 요소만을 선택함.