head 안에 아래의 코드를 추가합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>1. $(selector).action()
- $(this).hide()
- hides the current element.
- $("p").hide()
- hides all p(paragraph) elements.
- $(".test").hide()
- hides all elements with class="test".
- $("#test").hide()
- hides the element with id="test".
2. Events
- $("p").click(function(){ $(this).hide(); });
- p를 클릭하면 p hide
- $("p").dblclick(function(){ $(this).hide(); });
- p를 더블클릭하면 p hide
- $("#p1").mouseenter(function(){ alert("You entered p1!"); });
- id로 p1을 가진 것에 마우스를 갖다대면 alert 뜸
- $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); });
- id로 p1을 가진 것에 마우스를 갖다대고 나오면 alert 뜸
- $("#p1").mousedown(function(){ alert("Mouse down over p1!"); });
- click과 매우 비슷. 마우스 누르면 alert 뜸
- $("#p1").mouseup(function(){ alert("Mouse up over p1!"); });
- 마우스 누르고 떼는 순간 alert 뜸
- $("#p1").hover(
function(){ alert("You entered p1!"); },
function(){ alert("Bye! You now leave p1!"); }
);- mouseenter, mouseleave를 합친 것과 매우 비슷
- $("input").focus(function(){ $(this).css("background-color", "yellow"); });
- text박스에 입력을 하려고 눌러서 focus가 맞춰졌을 때
- $("input").blur(function(){ $(this).css("background-color", "green"); });
- text박스 입력이 끝나고 다른 곳에 focus가 맞춰졌을 때
- on
- $("p").on("click", function(){ $(this).hide(); });
- click 하나만 사용
- $("p").on({
mouseenter: function(){ $(this).css("background-color", "lightgray");},
mouseleave: function(){ $(this).css("background-color", "lightblue");},
click: function(){ $(this).css("background-color", "yellow");}
});
- mouseenter, mouseleave, click 여러개 사용
- $("p").on("click", function(){ $(this).hide(); });
