<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
        <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // trigger() : 이벤트를 강제로 발생시킴

           // 이벤트 연결
            J("h1").click(function () {
                J(this).html(function (index, html) {
                    return html + "★";
                });
            });

            //1초마다 함수를 실행
            setInterval(function () {
                J("h1").first().trigger("click");
            }, 1000);
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>start : </h1>
    <h1>start : </h1>
</body>
</html>

※ 간단한 예제라 설명이 없어도 나중에 보면 딱 이해할수 있겠지? 그래야 되는데...

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ SelectBox 활용 값제어 ]  (0) 2013.07.16
JQuery_ [ jQuery PlugIn - Validate (유효성 검사) ]  (0) 2013.03.26
JQuery_[ one() 이벤트(이벤트를 한번만 연결) ]  (1) 2013.01.21
JQery_[ hover() & toggle ]  (0) 2013.01.21
JQuery_[ 이벤트 연결 기본 bind() ]  (0) 2013.01.21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // 이벤트 연결
            J("h1").one("click", function () {
                J(this).html("CLICK");
                alert("이벤트가 발생하였습니다.");
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

※ 사용법은 앞에서 설명한 이벤트 기본연결 bind() 와 동일하다.

one() 말고 unbind() 를 사용해서도 가능하다.

위의 one() 이벤트 핸들러를 unbind() 로 바꿔서 구현을 하면

    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // 이벤트 연결
            J("h1").click(function () {

                 //출력

J(this).html("CLICK");

alert("이벤트가 발생하였습니다.");

//이벤트 제거

J(this).unbind();

                 });
            });
        });
    </script>

 

'공부 > JQuery' 카테고리의 다른 글

JQuery_ [ jQuery PlugIn - Validate (유효성 검사) ]  (0) 2013.03.26
JQuery_[ trigger() 이벤트 강제 실행 ]  (0) 2013.01.21
JQery_[ hover() & toggle ]  (0) 2013.01.21
JQuery_[ 이벤트 연결 기본 bind() ]  (0) 2013.01.21
JQuery_[특정 태그 선택(find)]  (0) 2013.01.07

-    hover() 이벤트

mouseenter (마우스 커서가 대상 element의 위로 올라간 경우)

이벤트와

mouseleave (마우스 커서가 대상 element 에서 벗어난 경우)

이벤트를 동시에 연결한다.

 

-    toggle() 이벤트

click 이벤트를 여러 이벤트를 핸들러를 번갈아가며 실행 할 수 있게 연결한다.

매개변수로 여러 개의 함수를 입력 할 수 있으며, 입력한 순서대로 함수를 실행한다.

※ 모두 클릭("Click") 이벤트 핸들러와 관련이 있다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style>
        .reverse
        {
            background : Black;
            color : White;
            }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // 이벤트 연결
            // hover 이벤트는 매개변수 2개( 클릭시, 클릭해제시)
            J("h1").hover(function () {
                J(this).addClass("reverse")
            }, function () {
                J(this).removeClass("reverse");
            });

            // 이벤트 연결
            J("h1").toggle(function () {
                J(this).html(function (index, html) {
                    return "★" + html;
                });
            },
                function () {
                    J(this).html(function (index, html) {
                        return html + "★";
                    });
                },
                    function () {
                        J(this).html(function (index, html) {
                            return html.substring(1, html.length - 1);
                        });
                    });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

'공부 > JQuery' 카테고리의 다른 글

JQuery_[ trigger() 이벤트 강제 실행 ]  (0) 2013.01.21
JQuery_[ one() 이벤트(이벤트를 한번만 연결) ]  (1) 2013.01.21
JQuery_[ 이벤트 연결 기본 bind() ]  (0) 2013.01.21
JQuery_[특정 태그 선택(find)]  (0) 2013.01.07
JQuery_[JQuery filter() 메서드 사용]  (0) 2013.01.07

+ Recent posts

티스토리툴바