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>
'IT 국비 교육' 카테고리의 다른 글
쌍용교육센터 - 44일 (0) | 2024.04.19 |
---|---|
쌍용교육센터 - 43일 (1) | 2024.04.18 |
쌍용교육센터 - 41일 (0) | 2024.04.16 |
쌍용교육센터 - 40일 (0) | 2024.04.15 |
쌍용교육센터 - 39일 (0) | 2024.04.12 |