<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Name:<input type="text" name="firstname"><br><br>
Email:<input type="text" name="email"><br>
<br><br>
<p>p Tag</p>
<button id="hideBtn">감추기</button>
<button id="showBtn">보여주기</button><br>
<button id="toggleBtn">toggle</button>
<script type="text/javascript">
$(function() {
$("input").focus(function () { //마우스로 클릭하거나 탭으로 요소가 선택될 때를 focus 라 하고 그에 대한 함수가 실행된다.
$(this).css("background-color", "#ffff00"); // this 는 해당 요소를 가지고 있는 태그를 가리킴
});
$("input").blur(function() { // 해당 요소가 focus를 잃을 때 발생하는 함수
$(this).css("background-color", "#ffffff");
});
$("#hideBtn").click(function () {
$('p').hide( 1000 );
});
$("#showBtn").click(function () {
$('p').show( 3000 ); // 보여주는 것
});
$("#toggleBtn").click(function () {
$('p').toggle( 2000 ); // 바뀌는 것
});
/* $("p").click(function () { //마우스 클릭시
$(this).hide();
}); */
$("p").dblclick(function () { // 더블클릭
$(this).hide();
});
});
</script>
<br><br>
<div align="center">
<div id="test" style="background-color: red; width: 50%; height: 100px; text-align: center;">
여기가 div tag입니다
</div>
</div>
<script type="text/javascript">
$(function () {
/* $("#test").mouseenter(function() {
alert("div영역에 들어옴");
});
$("#test").mouseleave(function() {
alert("div영역을 벗어남");
});
*/
$("#test").hover(function () {
alert("hover 동작"); //
마우스 포인터가 선택한 요소 위에있을 때 실행되는 두 가지 함수를 지정합니다.
이 메서드는 mouseenter 및 mouseleave 이벤트를 모두 트리거합니다.
});
/*
$("#test").mousedown(function() {
alert("div 클릭");
});
$("#test").mouseup(function() {
alert("div 놓음");
});*/
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| Jquery(6) 2차원배열, td:eq(index) ,for문 (0) | 2018.08.08 |
|---|---|
| Jquery(5) fade(In,Out,Toggle,to) (0) | 2018.08.08 |
| Jquery(3) 기본 hide,child,nth (0) | 2018.08.06 |
| Jquery(2) 기본 click,mouseover,mouserout (0) | 2018.08.06 |
| Jquery(1) $ , val , text , 기본정리 (0) | 2018.08.06 |