667 No

[동영상강의] javascript08_jquery의 개요, 다운로드 방법, 선택자(selector), 이벤트 처리 방법

2017-09-03 18:46:12 By 머나먼나라 0 590 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	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

selector.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../include/jquery-3.2.1.min.js"></script>

<script type="text/javascript">
//$(객체 or 태그 or id or class) 선택자
//태그.이벤트(함수) 이벤트 처리 방법
$(document).ready(function(){
//h2 태그를 선택
//h2 태그를 클릭하면 클릭한 요소를 숨김
	$("h2").click(function(){
		
		$(this).hide();
	});
	
});
</script>

</head>
<body>


<h2 >첫번째 h2</h2>
<h2>두번째 h2</h2>
<h2>세번째 h2</h2>




</body>
</html>

첫번째 h2

두번째 h2

세번째 h2

selector2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script 
src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- $ is not defined => jquery 링크 확인 -->

<script>
// $(document).ready( function(){} );
// $(function(){});  간단한 표현
/* $(document).ready(function(){
	
}); */

$(function(){
/* 	li = document.getElementsByTagName("li");
	for(i=0; i<li.length; i++){
		li[i].style.backgroundColor = "yellow";
	} */
//	선택자.css("스타일속성","값") 스타일 속성 변경
	//$("li").css("background-color","yellow");
// $("#id") 	id가 li2인 태그
	$("#li2").css("background-color","blue");
/* 	document.getElementById("li2").style.backgroundColor
		="blue"; */
	//li의 첫번째 요소
// 태그:first-of-type : 첫번째 자식 태그	
// 태그:last-of-type : 마지막 자식 태그	
	$("li:first-of-type").css("background-color","yellow");
//li의 마지막 child
	$("li:last-of-type").css("background-color","pink");
// nth-child(순번)
	$("li:nth-child(5)").css("background-color","green");
// nth-last-of-type(역순번) 뒤에서 3번째	
	$("li:nth-last-of-type(3)")
		.css("background-color","red");
});
</script>
</head>
<body>
  <h1>탐색 선택자</h1>
  <ul>
    <li>내용1</li>
    <li id="li2">내용2</li>
    <li>내용3</li>
    <li>내용4</li>
    <li>내용5</li>
    <li>내용6</li>
    <li>내용7</li>
    <li>내용8</li>
    <li>내용9</li>
    <li>내용10</li>
  </ul>
</body>
</html>

mouse1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$(function(){
	
/* 	$("img").mouseout(function(){
		$("img").attr("src", "http://shop2.daumcdn.net/thumb/R200x200/?fname=http%3A%2F%2Fshop2."
				+"daumcdn.net%2Fshophow%2Fp%2FD2759460091.jpg%3Fut%3D20160719115403");
	});
	

	$("img").mouseover(function(){
		$("img").attr("src", "http://shop1.daumcdn.net/thumb/R200x200/?fname=http%3A%2F%2Fshop1."
				+"daumcdn.net%2Fshophow%2Fp%2FN3442887784.jpg%3Fut%3D20170428073103");
	});
	

	$("img").click(function(){
		$("img").attr("src", "http://shop2.daumcdn.net/shophow/c/image/content/set/"
				+"A_sh_event_mall/samsungmall_B0_20170428170838_2713.png");
	}); */
	
	
	//여러 이벤트를 한꺼번에 등록
	$("img").bind({
		mouseout:function(){
			$("img").attr("src", "http://shop2.daumcdn.net/thumb/R200x200/?fname=http%3A%2F%2Fshop2.daumcdn."
					+"net%2Fshophow%2Fp%2FD2759460091.jpg%3Fut%3D20160719115403");
		},
		
		mouseover:function(){
			$("img").attr("src", "http://shop1.daumcdn.net/thumb/R200x200/?fname=http%3A%2F%2Fshop1."
					+"daumcdn.net%2Fshophow%2Fp%2FN3442887784.jpg%3Fut%3D20170428073103");
		},
		
		click:function(){
			$("img").attr("src", "http://shop2.daumcdn.net/shophow/c/image/content/set/"
					+"A_sh_event_mall/samsungmall_B0_20170428170838_2713.png");
		}
		
	});
	
	
	//여러 이벤트를 한꺼번에 등록
	$("img").bind({
		
		
		
	});
	
	
});
</script>

</head>
<body>

<img src="http://t1.daumcdn.net/midas/new/creative/2075735/2102196/08_BS_Basic_600x300_sitefiller.jpg" >


</body>
</html>

mouse2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//자동실행
$(function(){
	i=0;
	//div 태그 중에서 class 이름이 out인 태그 선택
	$("div.out").mouseover(function(){
		//p 태그 중에서 첫번째 태그의 내용을 변경
//innerHTML : html 해석
//innerText :html 무시
//태그.text() html 무시
//태그.html() html 해석
		
		$("p:first").text("mouse over");
		$("p:last").text(++i);//마지막 태그
	});
	
	$("div.out").mouseout(function(){
		$("p:first").text("마우스를 여기로 움직이세요.");
		
	});
});
</script>


</head>
<body>

<div class="out">
 <p>마우스를 여기로 움직이세요.</p>
 <p>0</p>

</div>

<div >
<h1>두번째 div</h1>
</div>


</body>
</html>

마우스를 여기로 움직이세요.

두번째 div

mouse_move.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script 
src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// 웹페이지에 마우스 동작 이벤트 설정
// e 변수 - 마우스 이벤트 정보를 저장하는 변수
$(document).mousemove(function(e){
	//id가 log인 태그의 내용 변경
	// pageX, pageY 마우스의 x,y 좌표
	$("#log").html("<h2>x:"+e.pageX+",y:"+e.pageY+"</h2>");
	//$("#log").text("<h2>x:"+e.pageX+",y:"+e.pageY+"</h2>");
});
</script>
<style>
h2 {
  color: red;
}
</style>
</head>
<body>
<div id="log">  </div>
</body>
</html>