복습 - click, dblclick, mouseenter, hover

- HTML -

<h2 id="p1">this is a heading</h2>
<p>this is a paragraph</p>
<p>this is a another paragraph</p>
<button>hide</button>

 

- JQUERY -

[1]

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide();
    });
});

=======================================

[2]

$(document).ready(function () {
    $("p").dblclick(function () {
        $(this).hide();
    });
});

=======================================

[3]

$(document).ready(function () {
    $("#p1").mouseenter(function () {
        alert("you entered p1!")
    });
});

=======================================

[4]

$(document).ready(function () {
    $("#p1").hover (function () {
            alert('enter');
        },
        function(){
            alert("leave");
        }
    );
});

 

설명

• [1] 버튼을 누르면 p에 있는 내용이 사라짐
• [2] p태그에 있는 내용을 더블 클릭하면 p태그에 있는 내용이 사라짐 (this ====> p)
• [3] id명 p1태그에 있는 내용에 마우스가 들어가면 경고창(you entered p1!) 뜸
• [4] id명 p1태그에 있는 내용에 마우스가 들어가면 경고창(enter) 뜨고, 나오면 경고창(leave)이 뜬다