Sun's Blog
JQuery 속성 조작, 객체 편집 메서드, 이벤트 등록 본문
속성 조작 메서드
종류 | 설명 |
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 메서드로 등록한 이벤트 제거 |
'ETC' 카테고리의 다른 글
[10분 테코톡] 헙크의 자바 Reflectio (0) | 2023.08.06 |
---|---|
Apache Common MailSender (0) | 2023.08.06 |
JQuery 속성 조작, 객체 편집 메서드, 이벤트 등록 (0) | 2023.07.29 |
[10분 테코톡] 폴로의 Forward proxy vs Reverse proxy vs Load Balancer (0) | 2023.07.23 |
[10분 테코톡] 주디의 Garbage Collector (0) | 2023.07.22 |