본문 바로가기
공부일지

231018 (jQuery)

CD가참둥그렇다 2023. 10. 18. 12:09

예시 7. fade 메소드

  • fadeIn, fadeOut, fadeToggle(지속 시간, 사라지는 방법, 끝난 후 동작)
    • 지속 시간은 밀리 초 단위, fast는 200, slow는 600, 기본 값은 400
    • 사라지는 방법은 swing, linear가 있고 기본 값은 swing
    • swing은 가속 감속이 있는 사라짐, linear는 정속 사라짐
    • 끝난 후 동작은 함수가 들어간다.
  • fadeTo(지속 시간, 투명도, 끝난 후 동작)
    • 지속 시간과 끝난 후 동작은 fade 기능과 같고 투명도만 다르다
    • 투명도는 0~1 사이의 값
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		div {
			width: 80px;
			height: 80px;
			display: none;
		}
	</style>
</head>

<body>
	<button id="visible">Fade In</button>
	<button id="invisible">Fade Out</button>
	<button id="onOff">Fade Toggle</button>
	<img src="media/btn.png" width="50px" height="50px"></img>
	<div style="background-color: red;"></div>
	<div style="background-color: green;"></div>
	<div style="background-color: blue;"></div>
</body>
<script>
	$("button").click(function () {
		var txt = $(this).text();
		console.log(txt);
	});

	$("#visible").click(function () {
		$("div").first().fadeIn("fast", function () {
			$(this).next("div").fadeIn("fast", function () {
				$(this).next("div").fadeIn("fast");
			});
		});
	});

	$("#invisible").click(function () {
		$("div").first().fadeOut("slow", function showNext() {
			$(this).next("div").fadeOut("slow", showNext);
		});
	});

	$("#onOff").click(function () {
		$("div").first().fadeToggle("slow", function showNext() {
			$(this).next("div").fadeToggle("slow", showNext);
		});
	});

	$("img").hover(function () {
		$("img").fadeTo("slow", 0.15, function(){
			$("img").attr("src","media/btn2.png");
		});
	},function(){
		$("img").fadeTo("slow", 1, function(){
			$("img").attr("src","media/btn.png");
		});
	});
</script>

</html>

 

 

예시 8. slide 메소드

  • slideUp, slideDown, slideToggle(지속 시간, 사라지는 방법, 끝난 후 동작)
    • 지속 시간은 밀리 초 단위, fast는 200, slow는 600, 기본 값은 400
    • 사라지는 방법은 swing, linear가 있고 기본 값은 swing
    • swing은 가속 감속이 있는 이동, linear는 정속 이동
    • 끝난 후 동작은 함수가 들어간다.
  • slide는 위에서 아래로 생겨나고 아래에서 위로 사라지는 방식으로 동작한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		div {
			padding: 5px;
			text-align: center;
			background-color: #e5eecc;
			border: solid 1px #c3c3c3;
		}

		.panel {
			padding: 50px;
			display: none;
		}
	</style>
</head>

<body>
	<div id="flip">클릭하면, 아래로 메뉴가 나타납니다.</div>
	<div class="panel" id="p1">서브메뉴 입니다.</div>
	<div id="flip2">토글 메뉴입니다.</div>
	<div class="panel" id="p2">서브메뉴 입니다.</div>
</body>
<script>
	$("#flip").click(function () {
		var vision = $("#p1").css("display");
		if (vision == "none") {
			$("#p1").slideDown("slow", function () {
				$("#flip").text("클릭하면, 메뉴가 위로 올라갑니다.");
			});
		} else {
			$("#p1").slideUp("slow", function () {
				$("#flip").text("클릭하면, 아래로 메뉴가 나타납니다.");
			});
		}
	});

	$("#flip2").click(function () {
		$("#p2").slideToggle("fast", function () {
			var vision = $("#p2").css("display");
			console.log(vision);
			if (vision == "none") {
				$("#flip2").text("토글 - 다운");
			} else {
				$("#flip2").text("토글 - 업");
			}
		});
	});
</script>

</html>

 

 

 

예시 9. animate 메소드

  • animate() : 애니메이션 동작을 실행한다.
  • animate(속성, 지속 시간, 동작 방법, 끝난 후 동작)
    • 속성에는 애니메이션으로 동작할 내용을 지정한다.
    • 속성은일반적으로 중괄호 내부에 작성한다.
      • {”속성 종류” : “변화 방법”}
      • {속성 종류 : ”변화 방법” , 속성 종류 : [”변화 방법”, “변화 방법”] }
      • 변화 방법이 여러가지라면 변화 방법들을 대괄호로 묶어준다.
    • 지속 시간은 밀리 초 단위, fast는 200, slow는 600, 기본 값은 400
    • 동작 방법은 swing, linear가 있고 기본 값은 swing
    • swing은 가속 감속이 있는 이동, linear는 정속 이동
    • 끝난 후 동작은 함수가 들어간다.
  • 메소드 뒤에 메소드를 연결한다면 동일한 대상에 대해 앞의 메소드 실행 후 뒤의 메소드를 실행한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
		div {
			position: absolute;
			background-color: yellow;
			left: 5px;
			width: 90px;
			height: 90px;
			margin: 5px;
		}
	</style>
</head>

<body>
	<button id="left">◀</button>
	<button id="right">▶</button>
	<button id="stop">■</button>
	<button id="special">★</button>
	<button id="step">step</button>
	<div id="obj"></div>
</body>
<script>
	$("#right").click(function () {
		$("#obj").animate({"left": "+=1000"}, "slow", "swing");
	});

	$("#left").click(function () {
		$("#obj").animate({"left": "-=1000"}, "slow", "swing");
	});

	$("#stop").click(function () {
		$("#obj").stop();
	});
	
	$("#special").click(function () {
		$("#obj").animate({
			width: ["toggle","swing"],
			height: ["toggle","swing"],
			opacity: "toggle"
		}, 1500, "linear", function(){
			alert("애니메이션 끝")
		});
	});
	$("#step").click(function () {
		$("#obj").animate({"left": "+=500"},"slow").animate({"top": "+=500"},"slow").animate({"left": "-=500"},"slow").animate({"top": "-=400"},"slow");
	});
	
</script>

</html>

 

 

 

예시 10. txt와 html, 가상선택자

  • 태그 정보를 변수에 담을 수 있다.(var a = $(:radio);)
  • :radio 콜론이 들어간 태그는 가상 선택자. 라디오 버튼 관련 요소를 모두 저장한다.
  • txt와 html의 차이 : txt는 문자열만 대입, html은 문자열과 태그 모두 대입한다.
  • .attr(”속성”) 메소드 : 해당 요소에서 속성에 해당하는 값을 가져온다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
	</style>
</head>

<body>
	<input type="text" value="some text" />
	<p>문자가 쓰여진 <b>강조된</b> 영역</p>
	<span id="txt"></span>
	<span id="html"></span>
	<fieldset>
		<legend>숫자 입력</legend>
		RANGE(0~100):
		<input id="point" type="range" min="0" max="100" value="30" step=1>
		당신이 선택한 값
		<span id="msg"></span>
		<br>
		<button id="inc">증가</button>
		<button id="dec">감소</button>
	</fieldset>
	<fieldset>
		<legend>라디오 버튼</legend>
		<div>
			<input name="front" type="radio" value="HTML"/>
			HTML
		</div>
		<div>
			<input name="front" type="radio" value="CSS"/>
			CSS
		</div>
		<div>
			<input name="front" type="radio" value="JS"/>
			JS
		</div>
		<span id="selected">선택값 없음</span>
	</fieldset>
</body>
<script>
	var radio = $(":radio");
	console.log(radio);
	
	$(radio).click(function () {
		var val = $(this).val();
		$("#selected").html("당신의 선택값:"+val);
	});
	
	var i = $("#point").val();
	
	$("#inc").click(function () {
		i++;
		$("#point").val(i);
		$("#msg").html(i);
	});

	$("#dec").click(function () {
		i--;
		$("#point").val(i);
		$("#msg").html(i);
	});
	
	$("#point").change(function () {
		var val = $(this).val();
		i=val;
		console.log(val);
		$("#msg").html(val);
	});
	
	var txt = $("p").text();
	var html =  $("p").html();
	console.log(txt);
	console.log(html);
	$("#txt").text("<h1>HTML과 TXT 차이</h1>");
	$("#html").html("<h1>HTML과 TXT 차이</h1>");
	var attr = $("input").attr("type");
	var val = $("input").val();
	console.log(attr);
	console.log(val);
	//$("input").attr("type","password");
</script>

</html>

 

 

 

예시 11. attr 메소드

  • .attr(”속성”) 메소드 : 해당 요소에서 속성에 해당하는 값을 가져온다.
  • .attr(”속성”, ”값”) 메소드 : 해당 요소에서 속성에 해당하는 값을 값으로 변경한다.
<html>

<head>
	<meta charset="UTF-8">
	<title>J-Query</title>
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
	</style>
</head>

<body>

	<p id="test1">문자열 1</p>
	<p id="test2">문자열 1</p>
	<input id="test3" type="text" value="홍길동" />
	<input id="test4" type="text" value="비밀번호" />
	<br />
	<button>속성 변경</button>
</body>
<script>
	$("#test1").text("변경된 문자열");
	$("#test2").html("<b>변경된 문자열</b>");
	$("button").click(function () {
		$("#test3").attr("type","button");
		$("#test3").attr("onclick","alert('ok')");
		$("#test4").attr("type","password");
	});
</script>

</html>

 

 

 

예시 12. ready 메소드의 사용

  • attr() 메소드를 사용해 링크의 변경
  • .ready의 사용 : 쓰는 것이 일반적이다. 쓰지 않아도 동작하지만 브라우저 호환성으로 동작하는 것
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
	</style>
</head>

<body>
	<p>ID: <input type="text" id="test" value=""/><button id="goLink">확인</button></p>
	<a href="#">링크 이동</a>
</body>
<script>
	$(document).ready(function () {
		$("#goLink").click(function () {
			var userId = $("#test").val();
			if (userId == "admin") {
				$("a").attr("href", "http://www.icia.or.kr");
			} else {
				$("a").attr("href", "http://www.google.co.kr");
			}
		});
	});
</script>

</html>

 

 

 

예시 13. li 태그의 메소드들

  • append() : 해당 태그의 내부에 있는 리스트의 마지막 줄에 li를 추가한다.
  • prepend() : 해당 태그의 내부에 있는 리스트의 마지막 줄에 li를 추가한다.
  • before() : 해당 태그가 포함된 리스트에서 태그 앞에 li를 추가한다.
  • after() : 해당 태그가 포함된 리스트에서 태그 뒤에 li를 추가한다.
<html>

<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
	<style>
	</style>
</head>

<body>
	<ol>
		<li>List item 1</li>
	</ol>
	<button id="apnd">Append</button>
	<button id="ppnd">prepend</button>
	<button id="bef">Bdfore</button>
	<button id="aft">After</button>
</body>
<script>
	var i = 1;

	$("#apnd").click(function () {
		i++;
		$("ol").append("<li>List item " + i + "</li>");
	});
	$("#ppnd").click(function () {
		i++;
		$("ol").prepend("<li>List item " + i + "</li>");
	});
	$("#bef").click(function () {
		i++;
		$("ol").before("<li>List item " + i + "</li>");
	});
	$("#aft").click(function () {
		i++;
		$("ol").after("<li>List item " + i + "</li>");
	});
</script>

</html>

'공부일지' 카테고리의 다른 글

231024 (Oracle)  (0) 2023.10.24
231019 (jQuery)  (0) 2023.10.19
231017 (Java)  (0) 2023.10.17
231017 (jQuery)  (1) 2023.10.17
231012 (HTML)  (0) 2023.10.12

'공부일지' Related Articles

티스토리툴바