마카로닉스

673 No

[동영상강의] javascript09_jquery(이벤트 처리, 애니메이션 효과, jquery 플러그인)

2017-09-03 18:46:12 By 머나먼나라 0 818 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	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

append_remove.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script 
src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
	$("#button1").click(function(){
		$("ul").append("<li>레몬</li>"); //마지막에 추가
	});
	$("#button2").click(function(){
		$("ul").prepend("<li>레몬</li>"); //시작부분에 추가
	});
	$("#button3").click(function(){
		$("h2").after("<marquee>hello</marquee>");//뒤에 추가
	});
	$("#button4").click(function(){ //앞에 추가
		$("h2").before("<img src='../images/tomato.jpg'>");
	});
	$("#button5").click(function(){
		$("#div1").remove(); //태그를 제거
	});
	$("#button6").click(function(){
		$("#div1").empty(); //태그는 남겨두고 내용만 비우기
	});
});
</script>
</head>
<body>
<div id="div1">
  <h2>과일 목록</h2>
  <ul>
    <li>사과</li>
    <li>포도</li>
    <li>배</li>
  </ul>
</div>
<button id="button1">append</button>
<button id="button2">prepend</button>
<button id="button3">after</button>
<button id="button4">before</button>
<button id="button5">remove</button>
<button id="button6">empty</button>
</body>
</html>

과일 목록

사과
포도
배

append prepend after before remove empty

banner.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- 하위 버전으로 테스트해야 함 -->
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	$(function() {
		var list = $("#banner");
		var show_num = 3; //프레임에 표시할 사진수
		var num = 0; //이전, 다음 버튼 클릭할 때 증감되는 값
		var total = $(">li", list).size(); // list의 자식 태그 <li>의 개수 5가 저장됨
		var li_width = $("li:first", list).width(); //<li>의 너비
		// <li> 태그 중 인덱스 값이 3보다 작은 <li> 태그만 복제
		// 0,1,2 인덱스에 해당하는 <li> 태그가 복제되어 <ul id="banner">에
		//		추가됨
		var copyObj = $(">li:lt(" + show_num + ")", list).clone();
		list.append(copyObj);
		//다음 버튼을 클릭할 때 마다 이벤트 핸들러 실행
/* 		$(".next").click(function(){});
		$(".next").on("이벤트","함수") */
		$(".next").on("click", function() {
			if (num == total) { //num 값이 5일 경우
				num = 0;
				list.css("margin-left", num);
			}
			num++; //num에 값을 1씩 증가시킵니다.
			list.stop().animate({
				marginLeft : -li_width * num + "px"
			}, 500); //애니메이션 효과
			return false;
		});
		// 이전 버튼을 클릭할 때 마다 이벤트 핸들러 실행
		$(".prev").on("click", function() {
			if (num == 0) {
				num = total;
				list.css("margin-left", -num * li_width + "px");
			}
			num--; //num에 값을 1씩 감소됩니다.
			list.stop().animate({
				marginLeft : -li_width * num + "px"
			}, 500);
			return false;
		});
	});
</script>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

img {
  border: none;
  vertical-align: top;
}

li {
  list-style: none;
  float: left;
  width: 80px;
}

h1 {
  text-align: center;
}

#banner_wrap {
  width: 260px;
  padding: 10px 20px;
  margin: 0 auto;
  border: 1px solid #aaa
}

#banner {
  width: 5000px; /* 스크롤을 고려하여 넉넉히 */
}

#frame {
  width: 232px;
  height: 54px;
  overflow: hidden;
  position: relative;
  margin: 10px auto;
}
</style>
</head>
<body>
  <h1>롤링 슬라이드 배너</h1>
  <div id="banner_wrap">
    <div id="frame">
      <ul id="banner">
        <li><a href="#">
<img src="https://img.clipartfest.com/4e333c9c46ef2228a81592ac9c1d52be_image-drapeau-franais-drapeau-francais-clipart_1560-975.png" 
	width="72" height="54"
alt="사진1">
          </a></li>
        <li><a href="#">
<img src="http://images.atelier.net/sites/default/files/imagecache/scale_crop_587_310/articles/422123/atelier-profils-utilisateurs.jpg"
width="72" height="54"
 alt="사진2">
          </a></li>
        <li><a href="#">
<img src="http://www.clipartbest.com/cliparts/9ip/boG/9ipboGe4T.png"
width="72" height="54"
 alt="사진3">
          </a></li>
        <li><a href="#">
<img src="http://i.stack.imgur.com/WCveg.jpg" 
width="72" height="54"
alt="사진4">
          </a></li>
        <li><a href="#">
<img src="https://tse3.mm.bing.net/th?id=OIP.YUNuC0mWhd2WFNsXzSkVXwEsDl&pid=15.1&P=0&w=232&h=178" 
width="72" height="54"
alt="사진5">
          </a></li>
      </ul>
    </div>
    <p>
      <a href="#" class="prev">
        <img src="https://tse4.mm.bing.net/th?id=OIP.eoEHFGOH_enqbfa4vqTd3gEsEs&pid=15.1&P=0&w=300&h=300"
         width="30" height="30"
         alt="이전">
      </a>
      <a href="#" class="next">
        <img src="https://tse2.mm.bing.net/th?id=OIP.T_-xD8KtQEdDhCU1WAPAlAEsEs&pid=15.1&P=0&w=300&h=300"
        width="30" height="30"
         alt="다음">
      </a>
    </p>
  </div>
</body>
</html>

css.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script>
	$(function() {
		$("#button1").click(
				function() {
					// 태그.css("속성이름") css 속성값 확인
					var color = $("#div1").css("background-color");
					var width = $("#div1").css("width");
					var height = $("#div1").css("height");
					$("#result").html(
							"배경색상:" + color + "<br>" + "가로:" + width + "<br>" + "세로:"
									+ height + "<br>");
				});
		// 태그.css("속성이름","속성값") css 속성값 변경
		$("#button2").click(function() {
			$("#div1").css("background-color", "red");
			$("#div1").css("width", "200px");
			$("#div1").css("height", "200px");
		});
		$("#button3").click(function() {
			// 태그.addClass("css class 이름")
			// 동적으로 태그에 css class style 부여
			$("#div2").addClass("class1");
		});
	});
</script>
<style>
div#div1 {
  width: 60px;
  height: 60px;
}
/* 클래스이름이 class1인 태그들 */
.class1 {
  border: 1px solid red;
  background-color: yellow;
  width: 60px;
  height: 60px;
}
</style>
</head>
<body>
  <div id="div1" style="background-color: blue;"></div>
  <div id="div2">두번째 div</div>
  <button id="button1">버튼1</button>
  <button id="button2">버튼2</button>
  <button id="button3">클래스 추가</button>
  <p id="result">결과 표시</p>
</body>
</html>

dom.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script 
src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
	//id가 text인 태그를 클릭하면
// innerText : 태그를 무시하고 문자열로 처리
// innerHTML : 태그를 해석
	$("#text").click(function(){
		//id가 target인 태그의 내부텍스트 변경
		//$("#target").text("<marquee>변경된 내용</marquee>");
		//document.getElementById("target").innerText
		//	= "<marquee>변경된 내용</marquee>";
      $("#target").text("<marquee>변경된 내용</marquee>");

	});
	
	$("#html").click(function(){
		//id가 target인 태그의 내부텍스트 변경
		//$("#target").text("<marquee>변경된 내용</marquee>");
		//document.getElementById("target").innerText
		//	= "<marquee>변경된 내용</marquee>";
		//$("#target").html("<marquee>변경된 내용</marquee>");
		document.getElementById("target").innerHTML
		= "<marquee>변경된 내용</marquee>";
	});
	
	
	
	
});
</script>
</head>
<body>
<h2>DOM 변경</h2>
<p id="target">
  이것은 <strong>하나의</strong> 단락입니다.
</p>
<button id="text">버튼1</button>
<button id="html">버튼2</button>
</body>
</html>

focus.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript">
//자동 호출되는 부분
/* $(document).ready(function(){
	
});
 */
$(function(){
	
	//$(요소) 선택자(selector)
	//선택자.이벤트(이벤트핸들러)
	
	$("input").focus(function(){//입력포커스를 얻을 때
		//$(this) 이벤트가 발생한 객체
		// 선택자.css("속성", "값") style 변경
		$(this).css("background-color", "yellow");
		$(this).css("border", "3px dotted red");
	});
	
	
	$("input").blur(function(){//입력포커스를 잃을 때
		$(this).css("background-color", "white");
		$(this).css("border","1px solid black");
	});
	
	
});
</script>
</head>
<body>


입력1 <input type="text" > <p>
입력2 <input type="text" > <p>
입력3 <input type="text" > <p>
<form action="/">
<button >설정</button>
</form>
</body>
</html>

입력1

입력2

입력3

guess.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
	var nGuesses = 0;
	var computerNumber = 0;
	/* 달러 => 선택자(selector) */
	/* 선택자.이벤트함수( 콜백함수 ) */
	// 자동 실행 코드
	$(document).ready(function() {
		//1~100 난수
		computerNumber = Math.floor(Math.random() * 100) + 1;
		console.log("랜덤:" + computerNumber);
		// 태그.val( 값 ) 태그의 입력값을 변경시킴
		$("#computerNumber").val(computerNumber);
	});
	function guess() {
		var result = "";
		var number = parseInt($("#user").val());
		//document.getElementById("user").value);
		nGuesses++;
		if (number == computerNumber)
			result = "성공입니다.";
		else if (number < computerNumber)
			result = "낮습니다";
		else
			result = "높습니다.";
		//document.getElementById("result").value=result;
		$("#result").val(result);
		//document.getElementById("guesses").value=nGuesses;
		$("#guesses").val(nGuesses);
		return true;
	}
</script>
</head>
<body>
  <h2>숫자 맞추기 게임</h2>
  <form>
    숫자 :
    <input type="text" id="user" size="5">
    <input type="button" value="확인" onclick="guess()">
    추측횟수 :
    <input type="text" id="guesses" size="5">
    힌트 :
    <input type="text" id="result" size="16">
    정답 :
    <input type="text" id="computerNumber" size="16">
  </form>
</body>
</html>

숫자 맞추기 게임

image.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() { // onload 이벤트
		$("#small a").click(function(e) { // small 태그의 a태그를 클릭하면
			e.preventDefault(); // 기본효과를 막음(하이퍼링크 기능 제거)
			var imgPath = $(this).attr("href"); // 클릭한 하이퍼링크의 href 속성값
			$("#large img").attr({
				src : imgPath
			}); //large 태그의 img src속성에 복사
		});
	});
</script>
<style type="text/css">
#wrap {
  text-align: center; /* 가운데 정렬 */
  width: 500px;
}
#large img { /* 큰 이미지 */
  width: 350px;
  height: 350px;
}
ul li {
  list-style: none; /* 불릿 제거 */
  display: inline; /* 블록 요소를 인라인 요소로 변경 */
}
ul img { /* 작은 이미지  */
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
  <h2>Image change</h2>
  <div id="wrap">
    <div id="large">
      <a href="#">
        <img src="../images/01.jpg" />
      </a>
    </div>
    <div id="small">
      <ul>
        <!-- Unordered List(순서없는 리스트) -->
        <!-- li ==> list(리스트의 아이템) -->
        <li><a href="../images/01.jpg">
            <img src="../images/01.jpg" border="0px" />
          </a></li>
        <li><a href="../images/02.jpg">
            <img src="../images/02.jpg" border="0px" />
          </a></li>
        <li><a href="../images/03.jpg">
            <img src="../images/03.jpg" border="0px" />
          </a></li>
        <li><a href="../images/04.jpg">
            <img src="../images/04.jpg" border="0px" />
          </a></li>
      </ul>
    </div>
  </div>
</body>
</html>

input.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
	
	//버튼을 클릭하면
	$("#text").click(function(){
		//선택자.val() 태그에 입력한 값을 읽음
		//선택자.val("값") 태그에 입력한 값을 변경함
		var name=$("#target").val();
		alert("입력한 이름은 " + name+"입니다.");		
	
		name=prompt("이름을 입력하세요.", "아무개");
		$("#target").val(name);
		
		//선택자.attr("속성이름", "속성값")
		//<img src="" alt="" width="" height="">
		$("#img1").attr("src", "https://tse1.mm.bing.net/th?id=OIP.Gby_1Ya6mHIFsFL-EKCVIgEsCm&pid=15.1&P=0&w=382&h=213");
		
		//바꿀 속성이 2개 이상인 경우
		$("#img1").attr({
			"width":"300px", "height":"300px"
		});
		
		//선택자.attr("속성이름")속성값 읽기
		alert($("#img1").attr("src"));
		
	});

	
});
</script>
</head>
<body>

이름 :<input id="target" value="홍길동">
<br><br>
<img id="img1" src="https://tse2.mm.bing.net/th?id=OIP.CYVYNya6TLOTGehIJd8BIgEsDY&pid=15.1&P=0&w=233&h=169">
<br><br>

<button id="text">확인</button>


</body>
</html>

show_hide.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#img1{

	/* display:none; */
	position:relative;
}

#img2{
	/* display:none; */
}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
	
	$("#btnShow").click(function(){//클릭이벤트
		
		$("#img1").show("fast");	 //display:block
		//document.getElementById("img1").style.display="block";
		
	});

	$("#btnHide").click(function(){
		$("#img1").hide("slow");
		//document.getElementById("img1").style.display="none";
	});
	
	
	$("#btnToggle").click(function(){
		$("#img1").toggle("slow");//show, hide 교대로
	});
	
	$("#btnAnimate").click(function(){
		//애니메이션 효과
		$("#img1").animate(
		{ left:"500px"
		 , top:"200px"
		 , opacity:"0.5"
		 ,rotate: "180deg"
		 , scale:"1.5"
		}, 5000);
				
	});
	
	
	$("#btnFadein").click(function(){
		//img1 페이드 인 효과 , 5초 후 img2 페이드인
		$("#img1").fadeIn(3000, function(){
			//slow, fast , 숫자
			$("#img2").fadeIn("slow");
		});
	});
	
	
	$("#btnFadeout").click(function(){
		$("#img1").fadeOut(2000, function(){
			$("#img2").fadeOut(2000);
		});
	});
	
	//슬라이드 다운  효과
	$("#btnSlidedown").click(function(){
		$("#img1").slideDown("slow");
	});
	
	//슬라이드 업 효과
	$("#btnSlideup").click(function(){
		$("#img1").slideUp("slow");
	});
	
	//연쇄적인 효과
	$("#btnChain").click(function(){
		
		$("#img2").show().fadeOut("slow").slideDown("slow");
	});
	
});

</script>
</head>
<body>

<button id="btnShow">표시</button>
<button id="btnHide">숨김</button>
<button id="btnToggle">토글</button>
<button id="btnAnimate">애니메이션</button>
<button id="btnFadein">페이드인</button>
<button id="btnFadeout">페이드 아웃</button>
<button id="btnSlidedown">slide down</button>
<button id="btnSlideup">slide up</button>
<button id="btnChain">다양한 효과</button>
<hr>

<img id="img1" src="https://www.smashingmagazine.com/wp-content/uploads/2016/01/07-responsive-image-example-castle-7-opt.jpg" width="500">
<img id="img2" src="https://tse4.mm.bing.net/th?id=OIP.WSd6DN4qfjxUj9YYi433WgEsEs&pid=15.1&P=0&w=300&h=300">




</body>
</html>

표시 숨김 토글 애니메이션 페이드인 페이드 아웃 slide down slide up 다양한 효과