본문 바로가기

개발일지/JavaScript + jquery

[jpuery] click 명령어

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <style>
	.bordered{border: 3px solid red;}
	div{background:yellow;}
  </style>
  <script>
	$(function(){
		$('#div1').click(function(){$('#div1').text('클릭되었네요'); //html 가능
		});
	});
  </script>
 </head>
 <body>
	<div id="div1">div!!!</div>
 </body>
</html>

 

$('#div1').click(function(){$('#div1').text('클릭되었네요');});


$('#div1').click();
div1가 클릭을 하면 안에 있는 것을 실행해라

function(){$('#div1').text('클릭되었네요');}
div1에 '클릭되었네요' 텍스트를 출력해라

 

여기서 text는 html로 활용이 가능하다.


text와 html의 차이?

$('#div1').click(function(){$('#div1').html('<strong>클릭되었네요</strong>');});

클릭하면 글씨가 두꺼워짐<- 이런 태그를 활용하기 위해서는 text가 아니라 html 명령을 사용해야 한다. text는 말 그대로 태그도 출력해야 하는 글씨로 받아들이기 때문에 

 


$('#div1').mouseenter(function(){$('#div1').text('클릭되었네요');});

$('#div1').mouseenter();
이런 것도 있다. hover와 같은 명령으로 mouseenter는 스치기만 해도 바뀌는 명령어다. 여기서는 스치면 '클릭되었네요'로 바뀜. 대신에 떠났을 때도 '클릭되었네요'이 글씨가 그대로 멈춰있다.


$('#div1').mouseenter(function(){$('#div1').text('왔네요');});
$('#div1').mouseleave(function(){$('#div1').text('떠났네요');});

그렇다면 스쳤다가 마우스가 떠났을 때 원래대로 돌아가거나 다른 글씨를 출력하려면 어떻게 해야할까? mouseenter부분을 mouseleave 부분으로 바꾸어준다. 글씨에 마우스를 가져다대면 '왔네요', 마우스가 글씨에서 떠나면 '떠났네요'로 바뀐다.


$('#div1').hover(function(){}, function(){});

한 번에 합쳐서 출력을 할 수 있다. 하지만 코드가 길어지기 때문에 엄청 헷깔린다는 점! 그럴 땐 이렇게 뼈대를 만들어주고 시작하면 된다.

$('#div1').hover(function(){$('#div1').text('왔구나')}, 
		 function(){$('#div1').text('갔구나')});
		});