지난 시간 복습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>I like tto say, </p>
<button id="button1">append</button>
<button id="button2">prepend</button>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("p").append("<b style='color:red'>hihi</b>");
});
$("#button2").click(function(){
$("p").prepend("<b style='color:blue'>hihi</b>");
});
});
</script>
</body>
</html>
append 누르면 hihi 가 뒤에 늘어남
prepend 누르면 hihi 가 앞에 늘어남
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").show().fadeOut(1000).slideDown("slow").fadeOut(1000);
});
});
</script>
<button>메소드 체인시작</button>
<img src="../img/tiger.jpg" width="120" height="100" style="display: none;" alt="">
</body>
</html>
버튼을 누르면 호랑이가 나타났다가 사라졌다가 다시 나타났다가 사라진다.
연결해서 사용 가능하다.
오늘 JQuery 는 끝
어제 하던 clone coding 계속함.
오전 수업 끝
개발자 준비의 준비준비중..