jquery-13: jQuery기초
색상 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery로 색상 바꾸기</title>
<!-- CDN방식-인터넷이 연결이 되는 곳에서만 아래코드가 적용 -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<!-- jquery파일을 다운로드를 하여 연결하는 코드 -->
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
//현재 문서가 준비가 되면 #menu2 li를 찾아서 스타일 아래와 같이 적용해라.
$(document).ready(function(){
$("#menu2 li").css("color", "#f00");
})
</script>
</head>
<body>
<div>
<ul class="menu" id="menu1">
<li>김밥</li>
<li>비빔밥</li>
<li>제육덥밥</li>
<li>오징어덮밥</li>
<li>돌솥밥</li>
</ul>
<ul class="menu" id="menu2">
<li>자라탕</li>
<li>감자탕</li>
<li>오리탕</li>
<li>닭백숙</li>
<li>추어탕</li>
</ul>
</div>
</body>
</html>
지구본 움직이기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>지구본 움직이기</title>
<link rel="stylesheet" href="css/gigu.css" >
<script src="libs/jquery-3.5.1.min.js"></script>
<script src="js/gigu.js"></script>
</head>
<body>
<div id="panel">
<div id="bar"></div>
<img src="images/gigu.png" id="gigu">
</div>
<div id="btn">
<button id="btnStart">지구본 움직이기</button>
</div>
</body>
</html>
$(document).ready(function(){
//지구이미지 웹요소(노드) 찾아서 저장
var $gigu = $("#gigu");
//버튼에 이벤트 등록.(5초만에 left값 480px으로 설정하는 것이 곧
//마치 움직이는 애니메이션 형태가 된다.)
//버튼을 클릭하면 콜백함수가 실행된다.
$("#btnStart").click(function(){
$gigu.animate({
left : "480px"
}, 5000);
})
})
#panel {
width: 600px;
height: 300px;
border: 1px solid #999;
position: relative;
}
#bar {
position: absolute;
left: 50px;
top:190px;
width: 500px;
height: 15px;
background-color: #F33;
}
#gigu {
width: 80px;
position: absolute;
left: 50px;
top: 110px;
}
#btn {
text-align: center;
width: 600px;
}
#btnStart{
font-size: 12pt;
font-weight: bold;
}
지구본 흔들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>지구본,텍스트 흔들기</title>
<link rel="stylesheet" href="css/text.css">
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
function hello() {
//아래 코드는 좌표값과 배경이미지의 크기를 난수로 대입하기
//위해서 값을 얻고 있다.
var rnd1 = Math.floor(Math.random() * 20);
var rnd2 = Math.floor(Math.random() * 40);
var rnd3 = Math.floor(Math.random() * 3) + 100;
//글자 흔들기
$(".hello").css({
"bottom" : rnd1, "left" : rnd2
});
//배경 확대
$(".hello .text").css({"background-size" : rnd3 + "%"});
}
//0.01초마다 hello()함수가 호출된다.
setInterval(hello, 10);
</script>
</head>
<body>
<div class="hello">
<div class="text">안녕하세요!!</div>
</div>
</body>
</html>
.hello {
background-image:url("../images/gigu.png");
background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 300px;
position: relative;
}
.hello .text {
bottom: 0;
color: brown;
font-family: Verdana !important;
font-size: 40pt !important;
font-weight: bold;
position: absolute;
text-shadow: 0 0 5px #000;
}
글자 숨기기, 보이기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 숨기기, 보이기 예제</title>
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
//글자 숨기기 버튼을 눌렀을때
$("#showText").click(function(){
$("div").hide(); //div영역의 내용을 숨긴다.
});
//글자 보이기 버튼을 눌렀을때
$("#hideText").click(function(){
$("div").show(); //div영역의 내용을 보인다.
});
});
</script>
</head>
<body>
<div>안녕하세요.초보 jquery-3버전입니다.</div>
<button id="showText">글자 숨기기</button>
<button id="hideText">글자 보이기</button>
</body>
</html>
댓글남기기