jQuery_여러가지 효과, 라이브러리 소

MINJOO·2022년 6월 23일

효과

-jQuery는 선택자로 선택된 태그를 사라지게 하거나 나타나게 할 수 있다.
-여러가지 효과 제공

예시

정리

-Show, fade in, slide down을 사용하면 애니메이션 효과와 함께 나타나거나 사라지게
-사라지거나 나타날 때 호출되는 함수를 등록해서 사용할 수 있다.

애니메이션 사용

정리

-animate 함수를 사용하면 애니메이션 효과를 만들어 사용할 수 있다.
-jQuery UI라이브러리를 사용하면 좀 더 다양한 효과를 만들 수 있다.

오늘의 코드

Ajax

Insert title here 문자열 데이터 HTML 데이터 XML 데이터 JSON 데이터

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

</script>
</head>
<body>
	<button onclick="getText()">문자열 데이터</button>
	<button onclick="getHtml()">HTML 데이터</button>
	<button onclick="getXml()">XML 데이터</button>
	<button onclick="getJson()">JSON 데이터</button>
	<div id="result"></div>
</body>
</html>

Slide

Insert title here slide up slide down slide toggle

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

</script>
<style>

</style>
</head>
<body>
	<button onclick="div_slideup()">slide up</button>
	<button onclick="div_slidedown()">slide down</button>
	<button onclick="div_slidetoggle()">slide toggle</button>
	<div id="a1"></div>
</body>
</html>

ShowHide

Insert title here hide show toggle

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

</script>
<style>

</style>
</head>
<body>
	<button onclick = "div_hide()">hide</button>
	<button onclick = "div_show()">show</button>
	<button onclick = "div_toggle()">toggle</button>
	<div id="a1"></div>
</body>
</html>

Fade

Insert title here fade out fade in fade toggle fade to

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

</script>
<style>

</style>
</head>
<body>
	<button onclick="div_fadeout()">fade out</button>
	<button onclick="div_fadein()">fade in</button>
	<button onclick="div_fadetoggle()">fade toggle</button>
	<button onclick="div_fadeto()">fade to</button>
	<div id="a1"></div>
</body>
</html>

Callback

Insert title here callback 함수 테스트

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

</script>
<style>

</style>
</head>
<body>
	<button onclick="test_callback()">callback 함수 테스트</button>
	<div id="a1"></div>
</body>
</html>