코딩 이야기

jQuery 수업 1일 차 본문

jQuery

jQuery 수업 1일 차

별메아리 2023. 1. 25. 09:40
728x90

jQuery 문장의 구조

$(selector).action();

$ : jQuery라는 의미

(selector) : 선택자

action(); : 선택한 요소의 함수 호출

 

선택자

타입 선택자

$("p")

.class선택자

$(".menu")

#id선택자

$("#check")

형식 설명
$("*") 모든 요소를 선택한다.
$(this) 현재 요소를 선택한다.
$("p.myClass") <p> 요소중에서 class="myClass"인 요소
$("p:frist") 첫 번째 <p> 요소
$("div span") <div> 안에 포함된 <span>요소
$(":button") 버튼과 버튼 타입 요소를 모두 선택

jQuery를 이용한 이벤트 처리

이벤트 등록방법

1. $("선택자").on('click',function(){

});

2. $("선택자").click(function(){

});

 

div박스 나타내는 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#button1").click(function () {
		//alert("연결됨")
		$("#box").show()
	})
});
</script>
<style type="text/css">
#box {
    border : 1px solid;
    padding : 30px;
    background-color: red;
    width : 400px;
    display: none;
    }
</style>
</head>
<body>
<input type="button" id="button1" value="눌러보세요!">
<div id="box"></div>
</body>
</html>

 

제이쿼리 마우스 이벤트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div.out {
		width: 200px;
		height: 60px;
		background-color: yellow;
	}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	var i = 0;
	$("div.out").mouseover(function () {
		$("p:first",this).text("mouse over");	
		$("p:last",this).text(++i);
	})
});
</script>
</head>
<body>
<div class="out">
	<p>마우스르 여기로 움직이세요</p>
	<p>0</p>
</div>
</body>
</html>

 

jQuery로 focus와 blur 이벤트 발생시키기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("input").focus(function () {
		$(this).css("background-color", "yellow");
	});
	$("input").blur(function () {
		$(this).css("background-color", "white");
	});
});
</script>
</head>
<body>
아이디 : <input type="text" name="name">
</body>
</html>

jQuery를 적용한 자바스크립트에서 하나의 요소에서 여러개의 이벤트를 처리한다면

        $("div").on({
            mouseenter: function(){
                console.log("hovered over a div");
            },
            mouseleave: function(){
                console.log("mouse left a div");
            },
            click: function(){
                console.log("clicked on a div");
            },
        });

이벤트 처리기 함수 안에서 사용 가능한 정보

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	background-color: #eef;
}
div {
	padding: 20px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
	$(document).mousemove( function (e) {
		$("#log").text("e.pageX : "+e.pageX+", e.pageY : " +e.pageY)
	});
</script>
</body>
</html>

제이쿼리를 이용한 애니메이션 효과

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#show").click(function () {
		$("#dog").show("slow",function(){alert("이미지가 나타난 후 알림창")});
	});
	$("#hide").click(function () {
		$("#dog").hide("slow",function(){alert("이미지가 사라진 후 알림창")});
	});
	$("#fadeIn").click(function () {
		$("#dog").fadeIn("slow",function(){alert("이미지가 나타난 후 알림창")});
	});
	$("#fadeOut").click(function () {
		$("#dog").fadeOut("slow",function(){alert("이미지가 사라진 후 알림창")});
	});
	$("#toggle").click(function () {
		$("#dog").toggle("slow")
	});
	$("#slideUp").click(function () {
		$("#dog").slideUp("slow")
	});
	$("#slideDown").click(function () {
		$("#dog").slideDown("slow")
	});
});
</script>
</head>
<body>
<button id="slideUp">slideUp it</button>
<button id="slideDown">slideDown it</button>
<button id="toggle">toggle it</button>
<button id="fadeIn">fadeIn it</button>
<button id="fadeOut">fadeOut it</button>
<button id="show">Show it</button>
<button id="hide">hide it</button>
<img src="" width="120" height="100" id="dog" style="display: none;">
</body>
</html>

이미지가 움직이는 효과

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#animate").click(function () {
		$("#dog").animate({
			left:"900px",
			opacity:"0.5",
			width:"150px"
		});
	});
	$("#stop").click(function(){
		$("#dog").stop();
	})
});
</script>
</head>
<body>
<img  src="" id="dog" width="120" height="100" style="position: relative;"><br>
<button id="animate">animate</button></button><button id="stop">stop</button>
</body>
</html>

메서드 체이닝

한 요소에 여러개의 메서드를 연결해서 호출하는 것

<!DOCTYPE html>
<html lang="ko">
<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="https://code.jquery.com/jquery-3.6.3.min.js"></script>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				$("#dog").show().fadeOut("slow").slideDown("slow");
			});
		});
	</script>
</head>
<body>
	<button>메서드 체이닝 시작</button>
	<img id="dog" src="" width="120" height="100" style="display: none;">
</body>
</html>
728x90
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jQuery 수업 2일차  (0) 2023.01.26
jQuery  (0) 2023.01.25
'jQuery' Related Articles more
Comments