- select()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("input").select(function() {
alert("text marked!"); // <input>의 텍스트가 선택되었을 때 실행
})
}
);
</script>
<style>
</style>
</head>
<body>
<input type="text" value="hello world">
<p>select some text</p>
</body>
</html>
- change()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("input").change(function() {
alert("text changed!"); // <input>의 텍스트가 변경되었을 때 실행
});
}
);
</script>
<style>
</style>
</head>
<body>
<input type="text" value="hello world">
<p>change some text</p>
</body>
</html>
- keydown(), keyup()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("input").keydown(function() {
$(this).css("background-color", "yellow"); // 키보드가 눌렸을 때 실행
});
$("input").keyup(function() {
$(this).css("background-color", "pink"); // 키보드를 눌렀다가 뗄 때 실행
});
}
);
</script>
<style>
</style>
</head>
<body>
Enter your name : <input type="text" value="name">
</body>
</html>
- keypress()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
var i = 0;
$(document).ready(
function() {
$("input").keypress(function() { // 키보드를 누른 상태일 때 실행 (누르고 있어도 실행됨)
i += 1;
$("span").text(i);
});
}
);
</script>
<style>
</style>
</head>
<body>
Enter your name : <input type="text" value="name">
<p>keypress : <span>0</span></p>
</body>
</html>
- scroll()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
// scroll 사용 예시
// * 회원 가입 약관 *
// 스크롤 길이를 측정하고
// 해당 길이만큼 스크롤을 했을 때 약관 동의 버튼을 누를 수 있도록 함
var i = 0;
$(document).ready(
function() {
$("#mydiv").scroll(function() { // 스크롤 되었을 때 실행 (상하좌우 상관 없음)
i += 1;
$("span").text(i);
})
}
);
</script>
<style>
#mydiv {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll; /* 영역을 넘어가면 스크롤로 만듦 */
}
</style>
</head>
<body>
<p>scroll bar</p>
<div id="mydiv">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br><br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br><br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br><br>
</div>
<p>scrolled : <span>0</span></p>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] JSON 값 사용하기 (0) | 2020.08.13 |
|---|---|
| [제이쿼리] one(), select(), after(), triggerHandler() (0) | 2020.08.12 |
| [제이쿼리] mouseenter(), mouseleave(), hover() (0) | 2020.08.12 |
| [제이쿼리] filter(), find(), width(), replace(), toggle() (0) | 2020.08.12 |
| [제이쿼리] navigator() (0) | 2020.08.12 |
