<!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('갔구나')});
});
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [jquery] clickTest 줄여서 쓰기 $(this) (0) | 2021.09.13 |
|---|---|
| [jquery] focus()명령어 (0) | 2021.09.13 |
| [jquery] 사진 불러오고 효과주기 appendTo()명령어 (0) | 2021.09.13 |
| [jquery] append() 명령어 (0) | 2021.09.13 |
| [jquery ] addClass(),removeClass() 명령어 (0) | 2021.09.13 |
