본문 바로가기

프로그래밍/jQuery

태그 마우스 클릭 시 반응_this, click

태그 클릭시 반응

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

<p>p tag</p>

<div>
    <p>div in p tag 1</p>
    
    <p>div in p tag 2</p>
    
    <p class="cls">div in p tag class cls</p>    
    
    
</div>


<script type="text/javascript">
$(function (){
/* 	$('p').click(function (){
	//	alert('p tag click');
	});
	
	
	$('div p').click(function (){
		alert('div p tag click');
	});
	 */
	/* $('div .cls').click(function (){   //div태그 안의 클래스 cls
		alert('div p tag click');
	}); */
	
	$('p').on("click", function(){
	//   $(this).hide();	 //hide는 감춰지는 것 . this를 해주면 클릭이된 오브젝트가 숨겨짐
	     $(this).css("background","#ff0000" );   // setter (property명, value) 
	
	     var color = $(this).css("background"); //getter
	     alert(color);
	});
	 
});


</script>

</body>
</html>

'프로그래밍 > jQuery' 카테고리의 다른 글

hide함수 활용_this  (0) 2020.01.10
mouseover, mouseout  (0) 2020.01.10
버튼을 누를시 상태변화_textfield/setget  (0) 2020.01.10
jQuery 버튼 호출  (0) 2020.01.10
jQuery의 개념과 동작원리  (0) 2020.01.10