자주 쓰이는 이벤트.
blur, change, load, unload, resize, scroll, select, submit,
click, dblclick, mousedown, mouseup, mouseover, mouseout, mouseenter, mouseleave
focus, keydown, keypress, keyup, ....... 등이 있다.
1. 마우스 이벤트
.mouseout(function() {});
- 마우스가 해당 영역을 벗어났을 때 기능 실행
.mouseover(function() {});
- 마우스가 해당 영역에 올라갔을 때
.hover(function() {}, function() {});
- 마우스가 해당 영역에 올라갔을 때 함수1 실행, 영역에서 벗어났을 때 함수2 실행
.mouseenter(function() {});
- 요소의 경계 범위 내에 마우스가 올라갔을 때 실행
.mouseleave(function() {});
- 요소의 경계 범위 밖으로 마우스가 나갔을 때 실행
.mousemove(function(매개변수) {});
- 선택 요소 영역에서 마우스를 움직일 때마다 이벤트 발생.
2. 키보드 이벤트
.keypress(function(매개변수) {});
- 키보드를 눌렀을 때 이벤트 발생
.keydown()
- 키보드를 누르면 이벤트 발생
.keyup()
- 키에서 손을 떼면 이벤트 발생.
3. 기타
.change()
- 선택한 요소의 값이 새 값으로 변경되고, 포커스가 다른 요소로 이동 되었을 때 이벤트 발생.
애니메이션
.hide(효과속도, 콜백함수)
- 노출되어 있는 요소를 숨기는 메서드. 효과속도는 ms단위, 콜백함수 생략 가능.
.show(효과속도, 콜백함수)
- 숨겨져 있는 요소를 노출시키는 메서드.
.toggle(효과속도, 콜백함수)
- 노출과 숨김을 하나로 합쳐놓은 것.
.fadeIn(효과속도, 콜백함수)
- 서서히 나타나게 함
.fadeOut(효과속도, 콜백함수)
- 서서히 사라지게 함
.fadeToggle(효과속도, 콜백함수)
- 두 가지를 합쳐놓음.
.fadeTo(효과속도, 투명도, 콜백함수)
- 요소를 지정한 투명도로 설정하는 기능. 투명도는 0~1사이의 값. 1이 완전 불투명.
.slideUp(효과속도, 콜백함수)
- 요소를 위쪽으로 슬라이드해서 가리는 기능.
.slideDown(효과속도, 콜백함수)
- 요소를 아래쪽으로 슬라이드해서 가리는 기능.
.slideToggle(효과속도, 콜백함수)
- 두 개를 합쳐놓음.
.animate({애니메이션 속성}, 효과속도, 콜백함수)
- 애니메이션 속성에는 모션으로 적용할 CSS 코드를 입력
- 속도는 ms 단위 또는 slow, normal, fast 가능.
.stop()
- 선택 요소에 효과 또는 애니메이션이 적용된 효과를 정지시킴.
.delay()
- 선택 요소에 효과 또는 애니메이션이 적용된 효과를 지연시켜서 늦게 시작하게 만듬.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
//초기값 설정
let size = 14; //최초 글자 크기 선언.
//1. 글자체를 선택했을 때 이벤트 처리
$("#fs").change(function() {
$("#txt_wrap").css("font-family", $(this).val());
});
//2. 글자크기 버튼을 클릭했을 때 이벤트 처리
$(".zoom button").on("click", function() {
//index(): 현재 요소가 부모의 몇번째 자식인지를 반환하는 메서드
let btnIndex = $(".zoom button").index(this);
if(btnIndex === 0) { //"+" 버튼을 클릭한 경우
size++; //size(글자 크기)가 하나 증가
$("#txt_wrap").css("font-size", size+"px");
}else if(btnIndex === 2) {
size--; //size(글자 크기)가 하나 감소
$("#txt_wrap").css("font-size", size+"px");
}else {
size = 14;
$("#txt_wrap").css("font-size", size+"px");
}
});
});
</script>
</head>
<body>
<div id="wrap">
<dl>
<dt>글자크기</dt>
<dd class="zoom">
<button>+</button>
<button>0</button>
<button>-</button>
</dd>
<dt>글자모양</dt>
<dd>
<select name="fs" id="fs">
<option value="dotum,'돋움',san-serif">돋움</option>
<option value="gulim,'굴림',san-serif">굴림</option>
<option value="malgun gothic,'맑은고딕',san-serif">맑은고딕</option>
<option value="GungsuChe,'궁서체',san-serif">궁서</option>
</select>
</dd>
</dl>
</div>
<p id="txt_wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac.Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed. Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac tortor dignissim convallis aenean et tortor at. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc. Et magnis dis parturient montes nascetur. Est placerat in egestas erat imperdiet. Consequat interdum varius sit amet mattis vulputate enim.Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas. Bibendum neque egestas congue quisque egestas diam. Laoreet id donec ultrices tincidunt arcu non sodales neque. Eget felis eget nunc lobortis mattis aliquam faucibus purus. Faucibus interdum posuere lorem ipsum dolor sit.</p>
</body>
</html>
|
cs |
'국기훈련과정 > Web' 카테고리의 다른 글
15. JQuery (0) | 2021.10.08 |
---|---|
14. JS의 DOM_02 (0) | 2021.10.07 |
13. JS의 DOM_개요 (0) | 2021.10.07 |
12. JS의 BOM (0) | 2021.10.06 |
11. JS의 객체 (0) | 2021.10.06 |