Web Camp

jquery

onlyforme 2020. 7. 30. 13:42
728x90
반응형

$("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");
    }  
  });
});

728x90
반응형