<수업내용>
@문서 객체 내부의 확인
-> innerHTML
@@ html() 메서드
-> 객체 내부의 글자와 관련된 기능 수행
-> 내부에 태그가 있다면 태그까지 가져옴
@@ text() 메서드
-> 객체 내부의 글자와 관련된 기능 수행
-> 내부에 있는 글자만 가져옴
@ 문서 객체의 제거
@@remove() 메서드
-> 특정 문서 객체를 제거함
@@empty() 메서드
-> 특정 문서의 후손을 모두 제거함
@문서 객체에 문서 객체를 추가하는 메서드
@@$(A).appendTo(B)
->A를 B의 바로 뒷부분에 추가
@@$(A).prependTo(B)
->A를 B의 바로 앞부분에 추가
@@$(A).insertAfter(B)
->A를 B의 뒤에 추가
@@$(A).insertBefore(B)
->A를 B의 앞에 추가
@@$(A).append(B)
->B를 A바로 뒤에 추가
@@$(A).prepend(B)
->B를 A바로 앞에 추가
@@$(A).after(B)
->B를 A 뒤에 추가
@@$(A).before(B)
->B를 A앞에 추가
@jQuery 이벤트
@@이벤트 연결
$(선택자).method(function(){
});//hover
$('선택자').hover(inFunction,outFunction);@@trigger()
-> 이벤트를 강제 발생
@@기본 이벤트 제거
->a태그 클릭 시 페이지 이동
->submit 버튼 클릭 시 form 문서 제출
->return false;
->event.preventDefault() 기본 이벤트 제거 메서드
@@on(), off() 메서드
->이벤트를 연결하고, 해제하는 메서드
@@마우스 이벤트
click : 마우스를 클릭할 때 발생
dblclick : 마우스를 더블 클릭할 때 발생
mousewheel : 마우스 휠 돌릴 때 발생
mousedown : 마우스 버튼을 누를 때 발생
mouseup : 마우스 버튼을 뗄 때 발생
mousemove : mousemove : 마우스를 움직일 때 발생
mouseout : 마우스가 요소를 벗어날 때 발생
mouseover : 이벤트 버블링 적용돼서 내부의 태그에 들어가더라도 이벤트를 발생
mouseenter : 태그의 내부에 있는지 외부에 있는지만 판단하여 이벤트를 발생
@@키보드 이벤트
keydown : 키 입력 시 발생되는 이벤트
keypress : keydown과 같이 키 입력 시 발생되는 이벤트지만 Enter, Tab 등의 특수키에는 발생하지 않음
keyup : 키 입력 후 발생되는 이벤트
@@입력 양식 이벤트
-> 입력하는 폼 양식에 이벤트를 발생
change : 입력 양식의 내용을 변경할 때 발생
focus : 입력 양식에 초점을 맞추면 발생
select : 입력 양식을 선택할 때 발생 (type이 text, textarea 제외)
submit : submit 버튼을 누를 때 발생
blur : 입력 양식에 초점이 사라질 때 발생
focusin : 입력 양식에 초점이 맞춰지기 바로 전에 발생
focusout
(focus의 확장 정도)
$(선택자).change(function(){
});
@@효과(effect) 메서드
-> 페이지에 애니메이션 효과를 만들기 위한 메서드 모음
jQuery의 기본 효과
show() : 문서 객체를 크게 하면 보여줌(display:block)
hide() : 문서 객체를 작게 하며 사라지게 함
toggle(): show(), hide()를 번갈아가면서 실행
slideDown() : 문서 객체를 슬라이드 효과와 함께 보여줌
slideUp() : 문서 객체를 슬라이드 효과와 함께 사라지게 함
slideToggle() : slideDown(), slideUp() 번갈아가면서 실행
fadeIn() : 문서 객체를 선명하게 하며 보여줌
fadeOut() : 문서 객체를 흐리게 하며 사라지게 함
fadeToggle() : fadeIn(), fadeOut() 번갈아가면서 실행
$(선택자).메서드()
$(선택자).메서드([speed]) : 실행속도 지정(ms), slow, fast 가능!!
@@animate() 메서드
-> 현재 CSS속성을 설정한 값으로 차츰 변경되는 효과를 주는 메서드
$(선택자).animate({CSS속성설정},[시간],[linear|swing],[함수]);
CSS속성 : 객체로 지정, 속성명 : 속성값
시간 : 정수(ms), slow, fast / default 400ms
구간별 속도 : linear -> 균일 속도, swing -> 처음과 끝은 천천히, 중간은 빠르게, 플러그인 사용 시 추가적인 것도 가능
함수 : 애니메이션 종료 후 실행할 함수 설정
@@delay() 메서드
-> 시간 지연을 줄 수 있는 메서드
-> 인자 값은 ms
<실습>
1. jQuery_event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<style>
.reverse {
background: black;
color: white;
}
</style>
<script>
$(function() {
$(".hover").hover(function() {
$(this).addClass("reverse");
}, function() {
$(this).removeClass("reverse");
});
$(".trigger>button").eq(0).click(function() {
var level = $(".trigger>span").eq(0);
level.text(Number(level.text()) + 1);
});
$(".trigger>button").eq(1).click(function() {
var level = $(".trigger>span").eq(1);
level.text(Number(level.text()) + 1);
});
$(".trigger>button").eq(2).click(function() {
var level = $(".trigger>span").eq(2);
level.text(Number(level.text()) + 1); //문자라서 Number
});
$(".trigger>button").eq(3).click(function() {
$(".trigger>button").eq(0).trigger("click");
// $(".trigger>button").eq(0).click(); 이것도 가능!
$(".trigger>button").eq(1).trigger("click");
$(".trigger>button").eq(2).trigger("click");
});
});
</script>
<h1 class="hover">Test1</h1>
<h1 class="hover">Test2</h1>
<h1 class="hover">Test3</h1>
<br><br>
<hr><br><br>
<div class="trigger">
<button>레벨업</button> 마법사 : <span>0</span>
Level<br>
<button>레벨업</button> 전사 : <span>0</span>
Level<br>
<button>레벨업</button> 도적 : <span>0</span>
Level<br>
<button>All</button>
</div>
<br><br>
<hr><br><br>
<script>
$(function() {
$(".eventControl a").click(function(event) {
event.preventDefault();
alert("페이지이동 이벤트 제거 완료");
alert(event.type);
});
$(".eventControl span").click(function(event) {
alert("span태그 클릭");
event.stopPropagation();
});
$(".eventControl h1").click(function() {
alert("h1태그 클릭");
});
});
</script>
<div class="eventControl">
<h1><a href="http://www.naver.com">네이버로이동</a>
<br>
<span>click</span>
</h1>
</div>
<br>
<hr><br>
<script>
$(function() {
$(".onoff>button").eq(1).click(function() {
$(".onoff>button").eq(0).text("이벤트 추가됨");
$(".onoff>button").eq(0).on("click", function() {
alert("이벤트가 발생함");
});
});
$(".onoff>button").eq(2).click(function() {
$(".onoff>button").eq(0).text("nothing...");
$(".onoff>button").eq(0).off("click");
});
$(document).mousemove(function(event){
$("#location>span").text(event.pageX+","+event.pageY)
});
});
</script>
<div class="onoff">
<button>nothing...</button>
<button>click add</button>
<button>click remove</button>
</div>
<h1 id="location">Mouse is at coordinates : <span></span></h1>
<br><br><hr><br><br>
<style>
.outer{
width:200px;
height: 200px;
background: orange;
padding: 50px;
}
.inner{
width:100%;
height: 100%;
background: pink;
border: 1px solid black;
}
#test{
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<script>
$(function(){
var event = 0;
// $(".outer").mouseover(function(){ //이벤트버블링발생
$(".outer").mouseenter(function(){ //발생X
if(event==0){
$("#test").css("background","red");
event=1;
}else{
$("#test").css("background","white");
event=0;
}
});
});
</script>
<div class="outer">outer
<div class="inner">inner
</div>
</div>
test
<div id="test"></div>
<br><br><hr><br><br>
<script>
$(function(){
$("#content").keyup(function(){
var inputLength = $(this).val().length;
var remain = 20 - inputLength;
$("#result").html("작성가능한 글자 수" + remain);
});
$("#input").focusin(function(){
$(this).css("background","skyblue");
});
$("#input").focusout(function(){
$(this).css("background","white");
});
$("#inputFocus").click(function(){
$("#input").focus();
});
});
</script>
<div>
<p>글작성</p>
<h2 id="result">작성가능한 글자 수 : 20</h2>
<textarea maxlength=20; id="content" cols="70" rows="5"></textarea>
</div>
<br><br><hr><br><br>
<input type="text" id="input">
<button id="inputFocus">클릭</button>
</body>
</html>
2. jQuery_effect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<p id="p1">Hide/Show test</p>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<script>
$(function() {
$("#hide").click(function() {
$("#p1").hide(1000); //1초/ms
});
$("#show").click(function() {
$("#p1").show(1000);
});
$("#toggle").click(function() {
$("#p1").toggle(1000);
});
$("#fadeIn").click(function() {
$("#p1").fadeIn();
});
$("#fadeOut").click(function() {
$("#p1").fadeOut();
});
$("#btn1").click(function() {
$("#div1").animate({
height: '300px',
width: '300px',
opacity: '0.4'
});
});
$("#btn2").click(function() {
$("#div1").animate({
height: '50px',
width: '50px',
opacity: '1.0'
})
});
$("#move").click(function() {
$(".move").each(function(index) {
$(this).delay(index * 1000).animate({
left: 500
}, 'slow');
});
});
$("#return").click(function() {
$(".move").each(function(index) {
$(this).delay(index * 1000).animate({
left: 0
}, 'slow');
});
});
});
</script>
<br><br>
<hr><br><br>
<div id="div1" class="animation"></div>
<br>
<button type="button" id="btn1">확대</button>
<button type="button" id="btn2">축소</button>
<br><br>
<hr><br><br>
<div class="move"></div>
<div class="move"></div>
<div class="move"></div>
<div class="move"></div>
<div class="move"></div>
<div class="move"></div>
<button type="button" id="move">오른쪽으로 이</button>
<button type="button" id="return">원상태로</button>
<style>
.move {
width: 100px;
height: 100px;
background-color: orangered;
position: relative;
}
.animation {
width: 50px;
height: 50px;
background-color: orangered;
}
</style>
</body></html>
3. tab_menu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tab li {
list-style: none;
float: left;
cursor: pointer;
width : 33.3%;
border: 1px solid #ddd;
text-align: center;
box-sizing: border-box;
height: 80px;
line-height: 80px;
}
.tab{
border: 1px solid #ddd;
background: #fff;
overflow: hidden;
}
.on{
background-color: #eee;
color: red;
}
.tab_con{
clear: both;
margin-top: 5px;
border: 1px solid #ddd;
}
.tab_con div{
height: 100px;
line-height: 100px;
background-color: #fff;
text-align: center;
display: none;
}
</style>
<script>
$(function(){
$(".tab>li").click(function(){
// alert("!");
var index = $(".tab>li").index(this);
$(".tab>li").removeClass("on");
$(this).addClass("on");
var contents = $(".tab_con").children(); //div 3개가 들어감
contents.css("display","none");
contents.eq(index).css("display","block");
});
$(".tab>li").first().click();
});
</script>
</head>
<body>
<ul class="tab">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="tab_con">
<div>1st Contents</div>
<div>2st Contents</div>
<div>3st Contents</div>
</div>
</body>
</html>
'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글
| <이공계기술전문연수> 3. jQuery(3일차) (0) | 2019.09.26 |
|---|---|
| <이공계전문기술연수> 3. JavaScript(3일차) (0) | 2019.09.25 |
| <이공계전문기술연수> 2. JavaScript(2일차) (0) | 2019.09.24 |
| <이공계기술전문연수> 1. jQuery(1일차) (0) | 2019.09.23 |
| <이공계전문기술연수> 1. JavaScript(1일차) (0) | 2019.09.22 |
