jQuery 함수 offset() width() mouseenter() mouseleave() click() hover() on()

1. offset 함수

jQuery 의 offset 함수는 대상이 시작되는 x좌표와 y좌표 값을 리턴한다.

<script type="text/javascript">

var pos = $("p").offset();    // p 태그의 x좌표와 y좌표값을 반환한다. 

alert("Top: " + pos.top + " Left: " + pos.left);

var pos = $("p").offset(100,200);    // p 태그의 x좌표와 y좌표값을 세팅한다. 

</script>

2. width 함수 

대상 엘리먼트의 폭을 반환한다. 

$("button").click(function(){
    alert($("div").width());
}); 

3. mouseenter 함수 / mouseleave 함수 

마우스포인터가 해당 객체위로 올라왔을 경우에 호출된다. 

<script>

$(document).ready(function(){

    $("p").mouseenter(function(){

        $("p").css("background-color", "yellow");

    });

    $("p").mouseleave(function(){

        $("p").css("background-color", "lightgray");

    });

});

</script>

바로 확인하려면 아래 링크 클릭!!!

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave

4. click 함수

해당객체에 마우스클릭이 일어났을 때 호출된다.

<script>

$(document).ready(function(){

    $("p").click(function(){

        alert("The paragraph was clicked.");

    });

});

</script>

바로 확인하려면 아래링크 클릭!!!

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_click

5. hover 함수

해당 객체에 mouseenter / mouseleave  이벤트가 발생할 경우 hover 는 두가지 이벤트에 모두 호출되어 실행된다 

<script>

$(document).ready(function(){

    $("p").hover(function()

    {

        $(this).css("background-color", "yellow");

    }, 

    function()

    {

        $(this).css("background-color", "pink");

    });

});

</script>

바로 확인하려면 아래 링크 클릭 !!!

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover

6. on 함수

선택된 객체나 자식객체의 이벤트발생시 핸들링을 하기위한 함수 이다.

<script>

$(document).ready(function(){

    $("p").on("mouseover", function(){

        $(this).toggleClass("intro");

    });

});

</script>

문법정의는 다음과 같다

$(selector).on(event,childSelector,data,function,map)

상세한 정의는 다음링크 클릭

http://www.w3schools.com/jquery/event_on.asp

[출처] Jquery offset() 함수

의 기능|작성자 푸른인연