jQuery P2 // 0514

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

<script>
alert (“마우스 over 하면 \n위/아래 방향에 따라 \n색이 다르게 변합니다.”)

$(document).ready(function() {
$(“b”).hover(
function(){
$(“b”).css(“backgroundColor”,”#7bbad2″);
},
function(){
$(“b”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p”).hover(
function(){
$(“p”).css(“backgroundColor”,”red”);
},
function(){
$(“p”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p+p”).hover(
function(){
$(“p+p”).css(“backgroundColor”,”#fe5b41″);
},
function(){
$(“p+p”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p+p+p”).hover(
function(){
$(“p+p+p”).css(“backgroundColor”,”yellow”);
},
function(){
$(“p+p+p”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p+p+p+p”).hover(
function(){
$(“p+p+p+p”).css(“backgroundColor”,”green”);
},
function(){
$(“p+p+p+p”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p+p+p+p+p”).hover(
function(){
$(“p+p+p+p+p”).css(“backgroundColor”,”blue”);
},
function(){
$(“p+p+p+p+p”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p+p+p+p+p+p”).hover(
function(){
$(“p+p+p+p+p+p”).css(“backgroundColor”,”#2121c8″);
},
function(){
$(“p+p+p+p+p+p”).css(“backgroundColor”,”yellow”);
}

);
});

$(document).ready(function() {
$(“p+p+p+p+p+p+p”).hover(
function(){
$(“p+p+p+p+p+p+p”).css(“backgroundColor”,”#32004b”);
},
function(){
$(“p+p+p+p+p+p+p”).css(“backgroundColor”,”yellow”);
}

);
});

</script>

<style>

* {margin:0 ; padding:0 }

/*
animation 속성
animation-delay : 요소가 로드된 후 애니메이션이 시작될 때까지의 시간
animation-direction : 애니메이션의 진행 방향
normal : 기본값
reverse : 반대로 진행
alternate : 순방향으로 진행 후 역방향으로 진행
alternate-reverse : 역방향으로 진행 후 순방향으로 진행
animation-duration : 애니메이션 진행되는 시간
animation-iteration-count : 반복횟수
animation-name : @keyframes 로 지정한 이름 호출
animation-play-state : 애니메이션 멈추거나 다시 시작
running : 재생
paused : 중지
animation-timing-function : ease, linear 등

-webkit-animation : bgblink 5s linear 1s infinite;
animation : bgblink 5s linear 3s infinite;
}

a {
width: 100px;
height: 100px;
}

@keyframes : 지점을 지정하여 스타일 지정
@keyframes bgblink {
0% {
background-color: #f00;
}
50% {
background-color: #00f;
}
100% {
background-color: #f00;
}
}

*/

</style>

 

<body>

<b>테스트 </b>
<p>빨</p>
<p>주</p>
<p>노</p>
<p>초</p>
<p>파</p>
<p>남</p>
<p>보</p>

</body>

 

 

<script>

var h=1;
if (h<=2) {h=3}

var k = [ 1, 4, 5, 6, 7, 15]

alert (h)
alert (k[5])
alert (k[0])

</script>

 

논리합

논리곱

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.