jQuery Event
40196 ワード
○Event
Webページにアクセスするユーザーが実行するアクション
->運転点の制御
○on()メソッド
特定のイベントが発生したときに実行するコマンドを設定する方法です.
実習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<style>
</style>
<body>
<h1>jQuery Click!</h1>
<script>
// Javascript에서 기능을 달아줄 때 -> addEventListener
// .on() -> jQuery에서 기능을 달아줄 때 사용하는 메소드
// h1태그에 마우스를 올리면 색깔을 바꾸고 싶어요!
// $("h1").on('mouseover', function(){
// $("h1").css("color","blue");
// });
// // h1태그를 클릭하면 원래대로 돌아오게 만들기
// $("h1").on('click', function(){
// $("h1").css("color","black");
// });
// // h1태그에서 마우스가 벗어나면 h1태그의 배경색을 바꿔주세요
// $("h1").on('mouseout', function(){
// $("h1").css("backgroundColor","orange");
// });
// 기능을 한번에 달아주는 방법 -> 객체 형식으로 달아주기
$("h1").on({
"mouseover":function(){
$("h1").css("color","blue");
},
"click" : function(){
$("h1").css("color","black");
},
"mouseout" : function(){
$("h1").css("backgroundColor","orange");
}
});
</script>
</body>
</html>○thisキーワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js""></script>
</head>
<body>
<h1>월요요요요용일</h1>
<h1>금요일</h1>
<h1>퇼</h1>
<script>
// 클릭했을 때 글씨 색을 빨강으로
$("h1").on("click",function(){
// this -> 실행의 주체를 저장시켜주는 키워드
// this 키워드 장점 : 컴퓨터 연산을 줄여주는 이득을 준다
$(this).css("color","red");
$(this).css("background-color","blue");
$(this).css("font-size","yellow");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>this 사용해보기</h1>
<h1>this 사용해보기</h1>
<h1>this 사용해보기</h1>
<h1>this 사용해보기</h1>
<p>눌렀을 때, 나만 텍스트를 출력해주세요 </p>
<p>눌렀을 때, 나만 텍스트를 출력해주세요 </p>
<p>눌렀을 때, 나만 텍스트를 출력해주세요 </p>
<p>눌렀을 때, 나만 텍스트를 출력해주세요 </p>
<script>
// jQuery 객체는 Javascript 객체 배열로 이루어져 있다.
$("h1")[0].innerText = "this 완료!";
$("h1")[1].innerText = "this 완료!";
$("h1")[2].innerText = "this 완료!";
$("h1")[3].innerText = "this 완료!";
$("p").css({
"color" : "yellow",
"backgroundColor" : "black"
});
$("p").on("click",function(){
$(this).text("나만 클릭했네요!");
});
</script>
</body>
</html>
実習2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "moveImgStyle.css">
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- div : 배경화면 -->
<div id = "bg">
<!-- img : 말 -->
<img src ="horse.png">
<!-- btn left -> 클래스명이 두개인거임(btn, left) -->
<button class="btn left" onclick="left()">LEFT</button>
<button class="btn right" onclick="right()">RIGHT</button>
</div>
<script>
// 이미지에 적용된 css를 버튼이 눌릴때마다 변경 시켜서
// 이미지의 위치 옮기기
let position = 0; // 위치를 저장시켜주는 변수
let ro = 0; // 각도를 저장할 변수
function left(){
if(position<1200 ){
position += 100;
}
ro+=45;
$("img").css("right", position+"px");
$("img").css("transform","rotate("+ro+"deg)");
}
function right(){
if(position > 0){
position -= 100;
}
$("img").css("right", position+"px");
$("img").css("transform","scaleX(-1)");
}
</script>
</body>
</html>@charset "UTF-8";
#bg {
width: 1280px;
height: 720px;
background-image: url('./bg.png');
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
img {
width: 70px;
height: 170px;
position: absolute;
right: 0px;
bottom: 200px;
}
.btn {
width: 170px;
height: 100px;
border: none;
font-size: 20px;
font-weight: bold;
position: absolute;
color:white;
background: rgba(0,0,0,0.3)
}
.left{
right:600px;
bottom:25px;
}
.right{
right:400px;
bottom:25px;
}Reference
この問題について(jQuery Event), 我々は、より多くの情報をここで見つけました https://velog.io/@seoil1221/jQuery-Eventテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol