# 제이쿼리 학습 정리
# 객체 조작 메서드
- 객체를 생성, 복제, 삭제, 속성 변환하는 메서드
- 속성 조작 메서드 : 요소의 속성을 바꿀 때 사용한다.
1. html() / html("새 요소")
- 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나, 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다.
- 예)
$("요소 선택").html() // 선택한 요소의 하위 요소를 가져온다.
$("요소 선택").html("새 요소") // 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성한다.
2. text() / text("새 ㅌ텍스트")
- 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나, 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용한다.
- 예)
$("요소 선택").text() // 선택한 요소가 감싸는 모든 텍스트를 가져온다.
$("요소 선택").text("새 텍스트") // 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성한다.
3. attr("속성명") / attr("속성명", "새 값")
- 선택한 요소에 새 속성을 생성하거나 기존 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용한다.
- 예)
$("요소 선택").attr("속성명") // 선택한 요소의 지정한 속성값을 가져온다.
$("요소 선택").attr("속성명", "새 값") // 요소를 선택하여 지정한 속성에 새 값을 적용한다.
4. removeAttr("속성명")
- 선택한 요소에서 기존 속성을 삭제할 때 사용한다.
- 예)
$("요소 선택").removeAttr("속성명") // 선택한 요소의 지정한 속성만 제거한다.
5. prop("상태 속성명") / prop("상태 속성명", "새 값")
- 선택한 폼 요소의 상태 속성값을 가져오거나, 새롭게 설정할 때 사용한다.
그리고 선택한 요소의 태그명, 노드 타입, 선택 상자의 선택된 옵션의 인덱스 값도 알 수 있다.
- 예)
$("요소 선택").prop("상태 속성명") // 선택한 요소의 상태 속성값을 가져온다.
$("요소 선택").prop("상태 속성명", "새 값") // 요소를 선택하여 상태 속성에 새 값을 적용한다.
6. val() / val("새 값")
- 선택한 폼 요소의 value 속성값을 가져오거나, 새 값을 적용할 때 사용한다.
- 예)
$("요소 선택").val() // 선택한 폼 요소의 value 값을 가져온다.
$("요소 선택").val("새 값") // 폼 요소를 선택하여 value 속성에 새 값을 적용한다.
7. css("속성명") / css("속성명", "새 값")
- 예)
$("요소 선텍").css("속성명") // 선텍한 요소의 지정한 스타일(CSS) 속성값을 가져온다.
$("요소 선텍").css("속성명", "새 값") // 요소를 선택하여 지정한 스타일(CSS) 속성에 새 값을 적용한다.
8. addClass("class 값")
- 선택한 요소에 클래스를 생성한다.
- 예)
$("요소 선택").addClass("class 값") // 선택한 요소의 clss 속성에 새 값을 추가한다.
9. removeClass("clss 값")
- 선택한 요소에서 지정한 클래스를 삭제한다.
- 예)
$("요소 선택").removeClass("class 값") // 선택한 요소의 class 속성에서 지정한 값만 제거한다.
10. toggleClass("class 값")
- 선택한 요소에 지정한 클래스가 없으면 생성, 있으면 삭제한다.
- 예)
$("요소 선택").toggleClass("class 값") // 선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가한다.
11. hasClass("hasClass")
- 선택한 요소에 지정한 클래스가 있으면 true, 없으면 false를 반환한다.
- 예)
$("요소 선택").hasClass("class 값") // 선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false를 반환한다.
- 수치 조작 메서드 : 요소의 너빗값 또는 높잇값 등 수치를 바꿀 떄 사용한다.
1. height()
- 여백 및 선 두께를 제외한 순수 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").height() / $("요소 선택").height(100)
// 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환한다.
2. width()
- 여백 및 선 두께를 제외한 순수 요소의 너빗값을 계산한다.
- 예)
$("요소 선택").width() / $("요소 선택").width(100)
// 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환한다.
3. innerHeight()
- 여백을 포함한 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").innerHeight() / $("요소 선택").innerHeight(300)
// 안쪽 여백을 포함한 높잇값을 반환하거나 변환한다.
4. InnerWidth()
- 여백을 포함한 요소의 너빗값을 계산한다.
$("요소 선택").innerWidth() / $("요소 선택").innerWidth(100)
// 안쪽 여백을 포함한 너빗값을 반환하거나 변환한다.
5. outerHeight()
- 여백 및 선을 포함한 요소의 높잇값을 계산한다.
- 예)
$("요소 선택").outerHeight() / $("요소 선택").outerHeight(100)
// 선과 안쪽 여백을 포함한 높잇값을 변환한다.
6. outerWidth()
- 여백 및 선을 포함한 요소의 너빗값을 계산한다.
- 예)
$("요소 선택").outerWidth() / $("요소 선택").outerWidth(100)
// 선과 안쪽 여백을 포함한 너빗값을 변환한다.
7. position()
- 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
- 예)
$("요소 선택").position().left / $("요소 선택").position().top
// 선택한 요소의 포지션의 위칫값을 반환한다.
8. offset()
- 문서를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용한다.
- 예)
$("요소 선택").offset().left / $("요소 선택").offset().top
// 선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지에 대한 값을 반환한다.
9. scrollLeft()
- 브라우저의 스크롤바가 수평으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
- 예)
$(window).scrollLeft()
// 브라우저의 수평 스크롤 이동 높잇값을 반환한다.
10. scrollTop()
- 브라우저의 스크롤바가 수직으로 이동한 위칫값을 불러오거나 변경할 때 사용한다.
- 예)
$(window).scrollTop()
// 브라우저의 수직 스크롤 이동 너빗값을 반환한다.
- 객체 편집 메서드 : 객체를 생성, 삭제, 복제할 때 사용한다.
1. before()
- 예)
$("요소 선택").before("새 요소")
// 선택한 요소의 이전 위치에 새 요소를 추가한다.
2. after()
- 예)
$("요소 선택").after("새 요소")
// 선택한 요소의 다음 위치에 새 요소를 추가한다.
3. append()
- 예)
$("요소 선택").append("새 요소")
// 선택한 요소의 마지막 위치에 새 요소를 추가한다.
4. appendTo()
- 예)
$("새 요소).appendTo("요소 선택")
// 선택한 요소의 마지막 위치에 새 요소를 추가한다.
5. prepend()
- 예)
$("요소 선택").prepend("새 요소")
// 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.
6. prependTo()
- 예)
$("새 요소").prependTo("요소 선택")
// 선택한 요소의 맨 앞 위치에 새 요소를 추가한다.
7. insertBefore()
- 예)
$("새 요소").insertBefore("요소 선택")
// 선택한 요소의 이전 위치에 새 요소를 추가한다.
8. insertAfter()
- 예)
$("새 요소").insertAfter("요소 선택")
// 선택한 요소의 다음 위치에 새 요소를 추가한다.
9. clone()
- 예)
$("요소 선택").clone("true or false")
// 선택한 문서 객체를 복제한다. 이때 인자값이 true 일 경우 하위 요소까지 모두 복제, false일 경우 선택한 요소만 복제한다.
10. empty()
- 예)
$("요소 선택").empty()
// 선택한 요소의 하위 내용들을 모두 삭제한다.
11. remove()
- 예)
$("요소 선택").remove()
// 선택한 요소를 삭제한다.
12. replaceAll()
- 예)
$("새 요소").replaceAll("요소 선택") / $("요소 선택").replaceAll("새 요소")
// 선택한 요소들을 새 요소로 교체한다.
13. unwrap()
- 예)
$("요소 선택").unwrap()
// 선택한 요소의 부모 요소를 삭제한다.
14. wrap()
- 예)
$("요소 선택").wrap(새 요소)
// 선택한 요소를 새 요소로 각각 감싼다.
15. wrapAll()
- 예)
$("요소 선택").wrapAll()
// 선택한 요소를 새 요소로 한꺼번에 감싼다.
16. wrapInner()
- 예)
$("요소 선택").wrapInner(새 요소)
// 선택한 요소의 내용을 새 요소로 각각 감싼다.
# 제이쿼리 이벤트
- 이벤트 : 웹 사이트 방문자의 모든 동작을 의미
- 이벤트 핸들러 : 이벤트가 발생했을 때 코드를 실행시키는 것
# 이벤트 등록 메서드
- 기본형 : 이벤트 대상 $("#btn") / click() : 이벤트 등록 메서드 / function() { ... } : 이벤트 핸들러
<button id="btn">버튼</button>
$("#btn").click(function() {
자바스크립트 코드;
});
## 로딩 이벤트
1. load()
- 선택한 이미지 도는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다.
2. ready()
- 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생한다.
3. error()
- 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다.
## 마우스 이벤트
1. click()
- 선택한 요소를 클릭했을 때 이벤트가 발생한다.
2. dblclick
- 선택한 요소를 연속해서 두 번 클릭했을 때 이벤트가 발생한다.
3. mouseout()
- 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생, 이때 하위 요소의 영향을 받는다,
4. mouseover()
- 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생한다.
5. hover()
- 선택한 요소에 마우스 포인터를 올렸을 떄와 벗어났을 때 각각 이벤트가 발생한다.
6. mousedown()
- 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
7. mouseup()
- 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생한다.
8. mouseenter()
- 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생한다.
9. mouseleave()
- 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다.
10. mousenove()
- 선택한 요소 범위에서 마우스 포인터를 움직였을 떄 이벤트가 발생한다.
11. scroll()
- 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생한다.
## 포커스 이벤트
1. focus()
- 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나, 선택한 요소에 강제로 포커스를 생성한다.
2. focusin()
- 선택한 요소에 포커스가 생성되었을 때 이벤트가 발생한다.
3. focusout()
- 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생한다.
4. blur()
- 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다.
5. change()
- 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 강제로 change 이벤트를 발생시킬 때도 사용한다.
## 키보드 이벤트
1. kerpress()
- 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.
그리고 문자 키를 제외한 키의 코드값을 반환한다.
2. keydown()
- 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다.
키보드의 모든 키의 코드값을 반환한다.
3. keyup()
- 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생한다.
## 단독 이벤트 등록 메서드
- 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다.
- 단독 이벤트 등록 메서드(기본형)
$("이벤트 대상 선택").이벤트 등록 메서드(function() {
자바스크립트 코드;
});
// 사용자가 버튼 클릭 시 환영 메시지를 경고 창에 출력
<button class="btn_1">버튼</button>
$(".btn_1").click(function() {
alert("환영합니다.");
});
## 그룹 이벤트 등록 메서드
- 한 가지 동작 이상의 이벤트를 등록할 수 있다.
- 그룹 이벤트 등록 메서드(기본형)
1. on() 메서드 등록방식 1
$("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 ... 이벤트 종류n", function() {
자바스크립트 코드;
});
2. on() 메서드 등록방식 2
$("이벤트 대상 선택").on({
"이벤트 종류1 이벤트 종류2 ... 이벤트 종류n":function() {
자바스크립트 코드;
}
});
3. on() 메서드 등록방식 3
$("이벤트 대상 선택").on({
"이벤트 종류1":function(){자바스크립트 코드1};,
"이벤트 종류2":function(){자바스크립트 코드2};,
...
"이벤트 종류n":function(){자바스크립트 코드n};
});
## 강제로 이벤트 발생시키기
- '강제로 이벤트가 발생했다'는건 사용자에 의해 이벤트가 발생된게 아닌, 핸들러에 의해 자동으로 이벤트가 발생된 것을 의미한다.
- trigger() 메서드를 사용하면 강제로 이벤트를 발생시킬 수 있다.
## 이벤트 제거 메서드
- 이벤트를 제거하는 메서드에는 off()가 있다.
- 이벤트 제거 메서드(기본형)
$("이벤트 대상").off("제거할 이벤트 종류");
## 로딩 이벤트 메서드
- 사용자가 브라우저에서 HTML 문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행한다. 로딩 이벤트 메서드에는 ready()와 load()가 있다.
- 로딩 이벤트 메서드(기본형)
1.
$(document).ready(function() {자바스크립트 코드; });
2.
$(document).on("ready", function() {자바스크립트 코드; });
3.
$(window).load(function() {자바스크립트 코드; });
4.
$(window).on("load", function() {자바스크립트 코드; });
## 마우스 이벤트 메서드
- 사용자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말한다. 마우스 이벤트 메서드에는 click(), dblclick() 등이 있다.
- 마우스 이벤트 메서드(기본형)
1. click 이벤트 등록
$("이벤트 대상 선택").click(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("click", function() {자바스크립트 코드; });
2. click 이벤트 강제 발생
$("이벤트 대상 선택").click();
3. dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("dbclick", function() {자바스크립트 코드; });
4. dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();
## <a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기
기본형
1. return false를 이용한 차단
$("a 또는 form").이벤트 메서드(function() {
자바스크립트 코드;
return false;
});
2. preventDefault() 메서드를 이용한 차단
$("a 또는 form").이벤트 메서드(function(e) {
e.preventDefault();
자바스크립트 코드;
});
## mouseover() / mouseout() / hover() 이벤트 메서드
mouseover() 기본형
1. mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseover", function() {자바스크립트 코드; });
2. mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();
mouseout() 기본형
1. mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseout", function() {자바스크립트 코드; });
2. mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();
hover() 기본형
1. hover 이벤트 등록
$("이벤트 대상 선택").hover(
function() {마우스 오버 시 실행될 코드},
function() {마우스 아웃 시 실행될 코드}
);
## mouseenter() / mouseleave() 이벤트 메서드
mouseenter() 기본형
1. mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseenter", function() {자바스크립트 코드; });
2. mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();
mouseleave() 기본형
1. mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mouseleave", function() {자바스크립트 코드; });
2. mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();
## mousemove() 이벤트 메서드
mousemove() 기본형
1. mousemove() 이벤트 등록
$("이벤트 대상 선택").mousemove(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("mousemove", function() {자바스크립트 코드; });
2. mousemove() 이벤트 강제 발생
$("이벤트 대상 선택").mousemove();
# 이벤트 객체와 종류
- 사용자가 이벤트를 발생시킬 떄마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.
- 이벤트 객체 생성의 기본형
${"이벤트 대상 선택").mousemove(function(매개변수) {
매개변수(이벤트 객체).속성;
});
## 마우스 이벤트
1. clientX
- 마우스 포인터의 X 좌푯값 반환(스크롤 이동 거리 무시)
2. clientY
- 마우스 포인터의 Y 좌푯값 반환(스크롤 이동 거리 무시)
3. pageX
- 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌푯값을 반환
4. pageY
- 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌푯값을 반환
5. screenX
- 화면 모니터를 기준으로 마우스 포인터의 X 좌푯값을 반환
6. screenY
- 화면 모니터를 기준으로 마우스 포인터의 Y 좌푯값을 반환
7. layerX
- position을 적용한 요소를 기준으로 마우스 포인터의 X 좌푯값을 반환
8. layerY
- position을 적용한 요소를 기준으로 마우스 포인터의 Y 좌푯값을 반환
9. button
- 마우스 버튼의 종류에 따라 값을 반환(왼쪽: 0 / 휠: 1 / 오른쪽: 2)
## 키보드 이벤트
1. keyCode
- 키보드의 아스키 코드값을 반환
2. altKey
- 이벤트 발생 시 Alt 키가 눌렸으면 true를, 아니면 false를 반환
3. ctrlKey
- 이벤트 발생 시 Ctrl 키가 눌렸으면 true를, 아니면 false를 반환
4. shiftKey
- 이벤트 발생 시 Shift 키가 눌렸으면 true를, 아니면 false를 반환
## 전체 이벤트
1. target
- 이벤트가 전파된 마지막 요소를 가리킨다.
2. cannelBubble
- 이벤트의 전파를 차단하는 속성으로, 기본값은 false이며, true로 설정함녀 전파가 차단된다.
3. stopPropagation()
- 이벤트의 전파를 차단한다.
4. preventDefault()
- 기본 이벤트를 차단한다.
## scroll() 이벤트 메서드
- 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용한다.
scroll() 이벤트의 기본형
1. scroll 이벤트 등록
$("이벤트 대상 선택").scroll(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("scroll", function() {자바스크립트 코드; });
2. scroll 이벤트 강제 발생
$("이벤트 대상 선택").scroll();
## 포커스 이벤트
- 포커스의 경우 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성된다.
- 키보드 접근성 : 사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 하는 것
- focus() 이벤트 메서드 : 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다.
focus 이벤트 메서드 기본형
1. focus 이벤트 등록
$("이벤트 대상 선택").focus(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focus", function() {자바스크립트 코드; });
2. focus 이벤트 강제 발생
$("이벤트 대상 선택").focus();
- blur() 이벤트 메서드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킨다.
blur 이벤트 메서드 기본형
1. blur 이벤트 등록
$("이벤트 대상 선택").blur(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("blur", function() {자바스크립트 코드; });
2. blur 이벤트 강제 발생
$("이벤트 대상 선택").blur();
- focusin() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킨다.
focusin 이벤트 메서드 기본형
1. focusin 이벤트 등록
$("이벤트 대상 선택").focusin(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focusin", function() {자바스크립트 코드; });
2. focusin 이벤트 강제 발생
$("이벤트 대상 선택").focusin();
- focusout() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생시킨다.
focusout 이벤트 메서드 기본형
1. focusout 이벤트 등록
$("이벤트 대상 선택").focusout(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("focusout", function() {자바스크립트 코드; });
2. focusout 이벤트 강제 발생
$("이벤트 대상 선택").focusout();
## 키보드로 마우스 이벤트 대응하기
- 키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것이다.
- 마우스 이벤트에 대한 키보드 대응 이벤트
1. 마우스 이벤트 mouseover : 이보크 이벤트 focus
2. 마우스 이벤트 mouseout : 키보드 이벤트 blur
<button class="btn">버튼</button>
<p class="txt_1">내용1</p>
$(".btn").on("mouseover focus", function() {
$(".txt_1").hide();
});
## change() 메서드
- 선택한 폼 요소의 값(value)을 새 값으로 변경한다. 그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다.
change() 메서드의 기본형
1. change 이벤트 등록
$("이벤트 대상 선택").change(function() {"자바스크립트 코드; "});
$("이벤트 대상 선택").on(function() {"자바스크립트 코드; "});
2. change 이벤트 강제 발생
$("이벤트 대상 선택").change();
## keydown() 메서드
keydown() 이벤트 메서드 기본형
1. keydown 이벤트 등록
$("이벤트 대상 선택").keydown(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keydown", function() {자바스크립트 코드; });
2. keydown 이벤트 강제 발생
$("이벤트 대상 선택").keydown();
## keyup() 메서드
keyup() 이벤트 메서드 기본형
1. keyup 이벤트 등록
$("이벤트 대상 선택").keyup(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keyup", function() {자바스크립트 코드; });
2. keyup 이벤트 강제 발생
$("이벤트 대상 선택").keyup();
## keypress() 메서드
keypress() 이벤트 메서드 기본형
1. keypress 이벤트 등록
$("이벤트 대상 선택").keypress(function() {자바스크립트 코드; });
$("이벤트 대상 선택").on("keypress", function() {자바스크립트 코드; });
2. keypress 이벤트 강제 발생
$("이벤트 대상 선택").keypress();
출처 : Do it! 자바스크립트+제이쿼리 입문책
