쌍용교육센터 - 42일

2024.04.17

 

on 메서드를 이용한 이벤트 연결

$(function(){
	//하나의 이벤트 연결
			//이벤트 타입
	$('h1').on('click',function(){
		$(this).html(function(index,html){
			return html+'+';
		});
	});
	
	//복수의 이벤트 연결
	$('h1').on({
		mouseover:function(){
			$(this).addClass('reverse');//클래스 추가
		},
		mouseout:function(){
			$(this).removeClass('reverse');//클래스 추가
		}
	});
});

 

동적으로 생성된 태그에 이벤트 연결

	$(function(){
		//현재 존재하는 태그뿐만 아니라 미래에 새로 생성되는 태그에도 이벤트 연결
		/* $('h1').on('click',function(){ */
		$(document).on('click','h1',function(){
			let length = $('h1').length;//h1태그의 개수
			let targetHTML = $(this).html();//이벤트가 발생한 h1태그의 내용 반환
			$('#wrap').append('<h1>' +length+'-'+targetHTML+'</h1>');
		});
	});

 

on메서드를 이용한 이벤트 연결

$(function(){
	$('div').on('click',function(){
					//하위태그,이벤트가 발생한 태그
		let header = $('h1',this).text();
		let paragraph = $('p',this).text();
		alert(header+'\\n'+paragraph);
	});
});

 

trigger를 이용한 이벤트 강제 발생

	//trigger 메서드는 이벤트를 강제 발생시킬 때 사용
	$(function(){
	 	$('h1').on('click',function(){
			$(this).html(function(index,html){
				return html + '*';
			});
		});// end of on
		 
		//1초마다 매개변수로 전달된 함수를 실행
		setInterval(function(){
							//이벤트 타입
			$('h1').trigger('click');
		},1000);
	}); 

 

default(기본 이벤트 제거)

$(function(){
	$('a').click(function(event){
		$(this).css('background-color','skyblue');
		
		//기본 이벤트 제거
		event.preventDefault(); //=return false;
	});
});

 

JQueryEffect

$(function(){
	//태그 노출 이벤트 연결
	$('#btn1').on('click',function(){
		//속도값 :fast(200),normal(400),slow(600) - 밀리세컨드 지정 가능
		//태그노출			//속도값, 태그의 노출이 완료된 후 호출되는 함수
		$('#dog').show('slow',function(){
			alert('노출 완료');
		});
	});

	//태그 숨기기 이벤트 연결
	$('#btn2').on('click',function(){
		$('#dog').hide(1000,function(){
			alert('숨김 완료!')
		});	 	
	});

	//태그 노출, 숨김 이벤트 연결
	$('#btn3').on('click',function(){
		//선택한 요소가 보이면 숨기고, 숨겨져 있으면 나타나도록 처리
		$('#dog').toggle('slow');
	});
});

 

fadeIn, fadeOut, fadeToggle

$(function(){
	$('#btn1').on('click',function(){
		$('#dog').fadeIn('slow');
	});
	$('#btn2').on('click',function(){
		$('#dog').fadeOut(1000);
	});
	$('#btn3').on('click',function(){
		$('#dog').fadeToggle('fast');
	});
	
});

 

fadeTo

	$(function(){
		$('#btn1').on('click',function(){
							//속도값, 투명도
			$('#dog').fadeTo('slow',0.3);
		});
		$('#btn2').on('click',function(){
			//속도값, 투명도
			$('#dog').fadeTo('slow',1.0); //완전 불투명
		});
		$('#btn3').on('click',function(){
			//속도값, 투명도
			$('#dog').fadeTo('slow',0); //완전 불투명
		});
	});

 

slideUp, slideDown, slideToggle

$(function(){
	$('#btn1').on('click',function(){
		$('h1').slideUp(1000);
	});
	$('#btn2').on('click',function(){
		$('h1').slideDown('slow');
	});
	$('#btn3').on('click',function(){
		$('h1').slideToggle('fast');
	});
});

 

애니메이션

$(function(){
	//animate({애니메이션 속성,'효과속도',콜백함수})
	//애니메이션 속성 : 모션으로 적용할 속성을 스타일(CSS)을 이용해서 입력
	$('h1').animate({
		marginLeft:'250px'
	},5000,function(){ //애니메이션 종료시 수행할 작업
		alert('도착 완료!');
	});
	
	$('h2').animate({
		marginLeft:'250px',
		opacity:0.3,
		width:'100px',
		height:'100px'
	},5000);
	
	$('h3').animate({
		marginLeft:'250px',
	},3000).animate({
		marginLeft:'100px'
	},2000);
});

 

jQuery UI

 

draggable, droppable

$(function(){
	//태그 드래그하기
	$('#draggable').draggable();
	//태그를 드롭하기
	$('#droppable').droppable({
		drop:function(event,ui){
			$(this).addClass('ui-state-highlight').find('p').html('Dropped');
		},
		out:function(event,ui){
			$(this).removeClass('ui-state-highlight').find('p').html('Drop here');
		}
	});
});

 

accordion

$(function(){
	$('#accordion').accordion();
});

 

datepicker

$(function(){
	$('#datepicker').datepicker({
		showMonthAfterYear:true,
		dateFormat:'yy-mm-dd',
		dayNamesMin:['일','월','화','수','목','금','토'],
		changeMonth:true,
		monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		changeYear:true
	});
});

 

dialog

$(function(){
	$('#dialog').dialog({
		autoOpen:false, //수동으로 다이얼로그 열기
		show:{
			effect:'blind',
			duration:1000
		},
		hide:{
			effect:'explode',
			duration:1000
		}
	});
	
	//버튼이벤트 연결
	$('#opener').click(function(){
		$('#dialog').dialog('open');
	});
	
	
});

 

jQuery를 이용한 메뉴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>반응형 네비게이션</title>
<style>
	*{
		margin:0;
		padding:0;
	}
	body{
		background:url(../files/windmill.jpg) no-repeat right bottom fixed;
		background-size:cover;
	}
	a:link, a:hover, a:visited{
		color:#FFF;
		text-decoration:none;
		text-shadow:1px 1px 0 #283744;
	}
	nav{
		width:100%;
		height:auto;
		background:#34495e;
		font-size:1.2em;
		font-weight:bold;
		position:relative;
	}
	nav ul{
		display:none;
	}
	nav ul li{
		display:block;
		width:100%;
		text-align:center;
		border-bottom:1px solid #576979;
	}
	nav ul li a{
		line-height:50px;
	}
	nav a#trigger{
		display:block;
		background-color:#283744;
		width:100%;
		padding-left:15px;
		line-height:40px;
		position:relative;
	}
	/* 요소의 끝부분에 생성된 콘텐츠를 추가 */
	nav a#trigger::after{
		/* content 텍스트, 이미지 등을 추가하기 위해 사용, 배경으로 처리해서 내용을 비어있게 처리함 */
		content:"";
		background: url('../files/nav.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
	@media screen and (min-width:721px){
		nav{
			height: 40px;
		}
		nav ul{
			display: block;
			width:720px;
			height: 30px;
			padding: 0;
			margin: 0 auto;
		}
		nav ul li{
			/* 
			box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성.
			넓이와 높이를 지정할 때 테두리를 지정하면 넓이(500) + 테두리의 두께(20)로
			실제 넓이(520)가 더 커지는 현상
			box-sizing:border-box로 지정하면 테두리(20)가 있어도 지정한 넓이(500)만큼
			실제 넓이(500)을 보여줌
			 */
			box-sizing: border-box;
			display: inline-block;
			width:120px;
			border-bottom:0;
			border-right:1px solid #576979;
			margin-left: -6px;
		}
		nav ul li:last-child{
			border-right:0;
		}
		nav ul li a{
			font-size:1em;
			line-height:40px;
		}
		nav a#trigger{
			display: none;
		}
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
	$(function(){
		$('#trigger').on('click',function(){
			/* 
			slideToggle를 이용하면 ul 태그에 style="display:block" (노출),
									  style="display:none" (숨김)
			*/
			$('nav ul').slideToggle();
		});
		
		$(window).resize(function(){
			//윈도우 창의 넓이 구하기
			let w = $(window).width();
			//데스크탑 넓이(721이상)이고 nav ul이 숨겨져있는지 체크
			if(w>=721 && $('nav ul').is(':hidden')){
				/* 
				ul 태그가 slideToggle를 이용해서 숨김 처리되면
				화면을 확대할 때 메뉴가 숨겨져서 안 보이는 현상이 일어나기 때문에
				다시 메뉴를 보여지게 처리하기 위해서 style="display:none"
				(숨김) 속성을 제거함
				*/
				$('nav ul').removeAttr('style');
			}
		});
		
	});
</script>
</head>
<body>
	<nav>
		<a href="#" id="trigger">Menu</a>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Web</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Map</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</body>
</html>

BootStrap 시작(cdn방식)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
	<h1>Hello Bootstrap</h1>
	
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

 

 

BootStrap - container

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 모바일 장치에서 웹사이트가 원하는 사이즈로 보여지게 처리 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
	div{
		border:1px solid #CCCCCC;
		background: #EEEEEE;
	}
</style>
</head>
<body>
<!-- 
.container
.container-sm		Small		>=576px
.container-md		Medium		>=768px
.container-lg		Large		>=992px
.container-xl		X-Large		>=1200px
.container-xxl		XX-Large	>=1400px
.container-fluid	
 -->
<h4>모니터 해상도에 따른 container 적용</h4>
<div class="container-sm">내용</div>
<div class="container-md">내용</div>
<div class="container-lg">내용</div>
<div class="container-xl">내용</div>
<div class="container-xxl">내용</div>
<div class="container-fluid">내용</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>