- animtaion()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("button").click(
function() {
var div = $("div");
div.animate({height: "300px", opacity: "0.4"}, "slow");
div.animate({width: "300px", opacity: "0.4"}, "slow");
div.animate({height: "100px", opacity: "0.4"}, "slow");
div.animate({width: "100px", opacity: "1.0"}, "slow");
});
// 각 애니메이션은 이전의 애니메이션이 끝나고 나서 실행됨
}
);
</script>
<style>
div {
background: yellow;
height: 100px;
width: 100px;
position: absolute;
}
</style>
</head>
<body>
<button>Start Animation</button>
<div></div>
</body>
</html>
- val()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("button").click(function() {
alert("value : " + $("#test").val()); // #test가 가진 value의 값을 가져옴
});
}
);
</script>
</head>
<body>
<p>Name : <input type="text" id="test" value="Mickey Mouse"></p>
<button>show value</button>
</body>
</html>
- attr()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(
function() {
$("button").click(function() {
alert($("#naver").attr("href")); // attr() 안에 지정한 항목의 값을 가져옴
});
}
);
</script>
</head>
<body>
<p><a href="https://www.naver.com" id="naver">naver.com</a></p>
<button>show attr value</button>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] attr() 사용하여 href 값 변경하기 (0) | 2020.08.12 |
|---|---|
| [제이쿼리] Button을 사용한 text(), html(), val() Set (0) | 2020.08.12 |
| [제이쿼리] Button을 사용한 hide(), show() (0) | 2020.08.12 |
| [제이쿼리] ready(), focus(), blur() (0) | 2020.08.12 |
| [제이쿼리] setInterval() / clearIntetval() (0) | 2020.06.03 |
