Sun's Blog

JQuery 속성 조작, 객체 편집 메서드, 이벤트 등록 본문

ETC

JQuery 속성 조작, 객체 편집 메서드, 이벤트 등록

버스는그만 2023. 7. 30. 19:41

속성 조작 메서드

종류 설명
html()
html("새 요소")
선택한 요소의 하위 요소를 가져옴
선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성함
text()
text("새 요소")
선택한 요소가 감싸는 모든 텍스트를 가져옴
선택한 요소의 하위 요소를 모두 제거하고 그 위치에 지정한 새 텍스트를 생성함
attr()
attr("속성명", "속성값")
선택한 요소의 지정한 속성값을 가져옴
요소를 선택하여 지정한 속성에 새 값을 적용
removeAttr("속성명") 선택한 요소의 지정한 속성만 제거
prop("상태 속성명")
prop("상태 속성명", "새 값")
선택한 요소의 상태 속성값을 가져옴
요소를 선택하여 상태 속성에 새 값을 적용
val()
val("새 요소")
선택한 요소의 value 값을 가져옴
선택한 요소의 value 값을 적용
css()
css("새 요소")
선택한 요소의 지정한 스타일 속성값을 가져옴
요소를 선택하여 지정한 스타일 속성에 새 값을 적용
addClass("새 요소") 선택한 요소의 class 값을 추가
removeClass("class 값") 선택한 요소의 class 속성에서 지정한 값만 제거
toggleClass("class 값") 선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가합니다.

객체 편집 메서드

종류 설명
before() 선택한 요소의 이전 위치에 새 요소를 추가
after() 선택한 요소의 다음 위치에 새 요소를 추가
(요소 선택).append(새 요소) 선택한 요소의 마지막 위치에 새 요소를 추가
(새 요소).appendTo(요소 선택) 선택한 요소의 마지막 위치에 새 요소를 추가
(요소 선택)prepend(새 요소) 선택한 요소의 맨 앞 위치에 새 요소를 추가
(새 요소)prependTo(요소 선택) 선택한 요소의 맨 앞 위치에 새 요소를 추가 
(새 요소)insertBefore(요소 선택) 선택한 요소의 이전  위치에 새 요소를 추가
(새 요소)insertAfter(요소 선택) 선택한 요소의 다음 위치에 새 요소를 추가
(요소 선택).clone(true or false) 선택한 요소를 복사한다. 인자값이 true일 경우 하위 요소까지 복수, false일 경우 선택한 요소만 복제
empty() 선택한 요소의 하위 내용들을 모두 삭제
remove() 선택한 요소를 삭제
(새 요소).replaceAll(요소 선택) 선택한 요소들을 새 요소로 교체
unwrap() 선택한 요소의 부모 요소를 삭제
(요소 선택)wrap(새 요소) 선택한 요소의 새 요소로 각각 감싼다.

이벤트 등록 메서드

구분 종류 설명
로딩 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생
ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생
error() 이번트 대상 요소에 오류가 발생하면 이벤트가 발생
마우스 click() 선택한 요소를 클릭했을 때 이벤트가 발생
dbclick() 더블 클릭 이벤트
mouseout() 해당 요소에서 마우스 포인터가 벗어났을 때 이벤트 발생
mouseover() 선택한 요소의 영역에서 마우스 포인터를 올렸을 때 이벤트 발생
hover() 마우스 포인터를 올렸을 때와 벗어났을 때 발생
mousedown() 마우스 버튼을 눌렀을 때 발생
mouseup() 마우스 버튼을 눌렀다 떼었을 때 발생
scroll() 가로, 세로 스크롤바를 움직일 때 마다 발생
포커스 focus() 포커스가 발생하거나 선택한 요소에 강제로 포커스를 생성
blur 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 합니다.
change 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생 그리고 강제로 change 이벤트를 발생시킬 때도 사용
키보드 keypress 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. 그리고 문자 키를 제외한 키의 코드값을 반환
keydown 선택한 요소에서 기보드를 눌렀을 때 이벤트 발생, 키보드의 모든 키의 코드값을 반환
keyup 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트 발생

이벤트 등록

종류 설명
on() 이벤트 대상 요소에 2개 이상의 이벤트를 등록, 사용 방식에 따라 이벤트를 등록한 이후에 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됨
bind() 이벤트 대상 요소에 2개 이상의 이벤트를 등록
delegate() 선택한 요소의 하위 요소에 이벤트를 등록함
one() 이벤트 대상 요소에 1개 이상의 이벤트를 등록, 지정한 이벤트가 1회 발생하고 자동으로 해체됨
trigger() 이벤트를 강제로 발생시킴

이벤트 제거

종류 설명
off() on() 메서드로 등록한 이벤트를 제거
unbind() bind 메서드로 등록한 이벤트를 제거
undelegate() delegate 메서드로 등록한 이벤트 제거