| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- 안드로이드
- 안드로이드 개발 강좌
- sky 시리우스폰
- 안드로이드 개발 2.0 강좌
- 안드로이드 개발
- Form Stuff
- 안드로이드 개발 2.0
- 안드로이드 바탕화면
- 안드로이드 2.0 개발
- 스마트폰 배경화면
- 아이폰 배경화면
- SKY 시리우스
- MapView
- android
- 스카이 안드로이드폰 시리우스
- 스카이 안드로이드폰 시리우스 K양 동영상
- 안드로이드2.0
- 인기있는 블로그 만들기
- 안드로이드개발
- 아이폰 바탕화면
- 구글안드로이드
- 안드로이드폰
- 하루한마디영어
- 영어
- 구글 안드로이드
- 하루 한마디 영어
- 구글 안드로이드 개발
- 안드로이드2.0개발
- objective-c
- 안드로이드 배경화면
- Today
- Total
moozi
jquery03.html 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box1").css("background","green");
//$("#box1").html("박스1");
});
$("#btn2").click(function(){
$("#box2").addClass("box2");
});
$("#btn3").click(function(){
$("#box2").removeClass("box2");
});
$("#btn4").click(function(){
$("img").attr("src", "img/math_img_2.jpg");
});
$("#btn5").click(function(){
$("#box1").addClass("on");
});
$("#btn6").on("click", function(){
console.log("test");
$("#box3").addClass("box3");
});
$(".btn1").click(function(){
// chaining
$(".btn1").parent().next().css({"color":"#f00"});
});
$(".btn2").on({
"mouseover focus": function() {
$(".btn2").parent().next().css({"color":"#0f0"});
}
});
$(".btn1").click(); //click이벤트함수호출
$(".btn2").trigger("mouseover");//triggert함수호출.이벤트이름지정
$("#btn7").on("click",function(e){
e.preventDefault();//다른페이지로 이동을 막는다.
$("#txt").css("color","red");
});
$(window).on("scroll",function(){
console.log($(this).scrollTop());
if($(this).scrollTop()>700){
$("#box3").addClass("bounceInLeft animated");
}
});
});
</script>
<link rel="stylesheet" href="css/animate.css" />
<style>
#box1{
width:300px;
height:300px;
background: red;
position:relative;
transition: 1s;
left:0;
}
#box1.on{left:50px;}
#box2{ width:300px;height:300px;background: blue;}
.box2{ background:orange !important;}
#box3{
width:300px;height:300px;background: orange;opacity: 1;
}
.box3{ opacity:0 !important;}
body{
height:10000px;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<button type="button" id="btn1">클릭1</button>
<button type="button" id="btn5">클릭5</button>
<div id="box2">box2</div>
<button type="button" id="btn2">클릭2</button>
<button type="button" id="btn3">클릭3</button>
<div>
<img src="img/math_img_1.jpg">
</div>
<button type="button" id="btn4">클릭4</button>
<div id="box3">box3</div>
<button type="button" id="btn6">클릭6</button>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
<a href="http://www.naver.com" id="btn7">클릭7</a>
<div id="txt">Text</div>
</body>
</html>
'TIS_2020 > 응용SW2020_1기' 카테고리의 다른 글
| vuejsAjax01 (0) | 2020.05.12 |
|---|---|
| vue.js ajax (0) | 2020.05.12 |
| 포트폴리오 url (26) | 2020.04.29 |
| 4/29 삼성데모 (0) | 2020.04.29 |
| company (0) | 2020.04.29 |