2020. 7. 30. 13:42ㆍWeb Camp
$("p").click(function(){
$(this).hide();
});
마우스로 클릭하면 숨겨짐
$("p").dblclick(function(){
$(this).hide();
});
마우스로 더블 클릭하면 숨겨짐
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
p1에 마우스를 올리면 알림창이 뜸
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
p1에 마우스를 떼면 알림창이 뜸
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});마우스 떼었을 때랑 올렸을 때 둘다 알림창이 뜬다.
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});칸이 포커스되면 색깔이 노란색, 포커스 잃으면 초록색으로 바뀜
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
'Web Camp' 카테고리의 다른 글
| JSP 개발환경 설치 & STS 깃허브와 연동하기 (0) | 2020.08.07 |
|---|---|
| JavaScript Forms & JS HTML DOM (0) | 2020.07.31 |
| Java Script (0) | 2020.07.27 |
| CSS Advanced & CSS Responsive (0) | 2020.07.24 |
| CSS (0) | 2020.07.23 |