<!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>

    <title>회원가입</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.validate-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            //$('#myForm').validate(); // 유효성 검사

            $('#myForm').validate({

                rules: {

                    txtID: { required: true, minlength: 3, remote:"Validate.aspx" },

                    txtPassword: { required: true },

                    txtName: { required: true },

                    txtEmail: { email: true },

                    txtPasswordConfirm: { equalTo: "#txtPassword" },

                    txtAge: { range: [1, 150] }

                },

                messages: {

                    txtID: {

                        required: "아이디를 입력하시오.",

                        minlength: jQuery.format("아이디는 {0}자 이상"),

                        remote : jQuery.format("{0}는 이미 있는 아이디")

                    },

                    txtPassword: { required: "암호를 입력하시오." },

                    txtName: { required: "이름을 입력하시오." },

                    txtEmail: { email: "올바른 이메일을 입력하시오." },

                    txtPasswordConfirm: { equalTo: "암호를 다시 확인하세요." },

                    txtAge: { range: "나이는 1~150" }

                },

                // 아래 코드는 버그

                //submitHandler: function () {

                //    $('#myForm').submit(); // 통과시 전송

                //},

                submitHandler: function (frm) {

                    frm.submit(); // 통과시 전송

                },

                success: function (e) {

                    //

                }               

            });

        });

    </script>

</head>

<body>

<form id="myForm" method="post" action="Validate.aspx">

    아이디 : <input type="text" id="txtID" name="txtID" class="required" /><br />

    암호 : <input type="text" id="txtPassword" name="txtPassword" class="required" /><br />

    암호확인 : <input type="text" id="txtPasswordConfirm" name="txtPasswordConfirm" class="required" /><br />

    이름 : <input type="text" id="txtName" name="txtName" class="required" minlength="2" /><br />

    이메일 : <input type="text" id="txtEmail" name="txtEmail" class="required email" /><br />

    나이 : <input type="text" id="txtAge" name="txtAge" /><br />

   

    <input type="submit" value="전송" />

</form>

</body>

</html>


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

JQuery_[ 'undefined' 값 체크하기 ]  (0) 2013.11.05
JQuery_[ SelectBox 활용 값제어 ]  (0) 2013.07.16
JQuery_[ trigger() 이벤트 강제 실행 ]  (0) 2013.01.21
JQuery_[ one() 이벤트(이벤트를 한번만 연결) ]  (1) 2013.01.21
JQery_[ hover() & toggle ]  (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 () {
            // 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

<!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 () {
            //이벤트 연결( 해당 태그 클릭시 문자"+" 추가 )
            J("h1").bind("click", function () {
                J(this).html(function (index, html) {
                    return html + "+";
                });
            });
            //이벤트 연결
            J("h1").bind({
                //마우스 올리면(style 적용)
                mouseenter: function () { J(this).addClass("reverse"); },
                //마우스 내리면
                mouseleave: function () { J(this).removeClass("reverse"); }
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

 

※ 이벤트 메서드 중 한번만 실행시키는 one() 도 bind 와 사용법이 같다

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

JQuery_[ one() 이벤트(이벤트를 한번만 연결) ]  (1) 2013.01.21
JQery_[ hover() & toggle ]  (0) 2013.01.21
JQuery_[특정 태그 선택(find)]  (0) 2013.01.07
JQuery_[JQuery filter() 메서드 사용]  (0) 2013.01.07
JQuery_[JQuery 를 이용한 객체 확장]  (0) 2013.01.07

- JQuery 특정 태그 선택 : find()

<!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>
   
        //변수 선언
        var xml = "";
        xml += "<friends>";
        xml += "    <friend>";
        xml += "        <name>연하진</name>";
        xml += "        <language>Ruby</language>";
        xml += "    </friend>";
        xml += "    <friend>";
        xml += "        <name>윤명월</name>";
        xml += "        <language>Basic</language>";
        xml += "    </friend>";
        xml += "    <friend>";
        xml += "        <name>윤하린</name>";
        xml += "        <language>C#</language>";
        xml += "    </friend>";
        xml += "</friends>";

        $.noConflict();
        var J = jQuery;
        J(function () {
            var xmlDoc = J.parseXML(xml);
            J(xmlDoc).find("friend").each(function () {
                var outPut = "";
                outPut += "<div>";
                outPut += "     <h1>" + J(this).find("name").text() + "</h1>";
                outPut += "     <p>" + J(this).find("language").text() + "</p>";
                outPut += "</div>";

                document.body.innerHTML += outPut;
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
</body>
</html>

 

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

JQery_[ hover() & toggle ]  (0) 2013.01.21
JQuery_[ 이벤트 연결 기본 bind() ]  (0) 2013.01.21
JQuery_[JQuery filter() 메서드 사용]  (0) 2013.01.07
JQuery_[JQuery 를 이용한 객체 확장]  (0) 2013.01.07
JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07

- JQuery_[JQuery filter() 메서드 사용]

<!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 () {
            // h3 행(0 부터 시작)이 홀수이면 배경 : 검정, 폰트 : 하얀색
            J("h3").filter(function (index) {
                return index % 3 == 0;
            }).css({
                backgroundColor: "Black",
                color: "White"
            });

            // filter & end 사용 법( filter : 문서 객체 선택 후 체이닝 처리, end : 문서 객체 선택을 한 단계 뒤로 이동 )
            J("h3").css("background", "Orange").filter(":odd").css("color", "Red").end().filter(":even").css("color", "Blue");
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h3>Header - 0</h1>
    <h3>Header - 1</h1>
    <h3>Header - 2</h1>
    <h3>Header - 3</h1>
    <h3>Header - 4</h1>
    <h3>Header - 5</h1>
</body>
</html>

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

JQuery_[ 이벤트 연결 기본 bind() ]  (0) 2013.01.21
JQuery_[특정 태그 선택(find)]  (0) 2013.01.07
JQuery_[JQuery 를 이용한 객체 확장]  (0) 2013.01.07
JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07

- JQuery_[JQuery 를 이용한 객체 확장]

<!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 () {
            var object = {};
            object.name = "RintIanTta";
            object.gender = "Male";
            object.part = "Second Guitar";

            J.extend(object, {
                age: "28"
            });

            var outPut = "";
            J.each(object, function (key, item) {
                outPut += key + ": " + item + "\n";
            });
            alert(outPut);
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>

</body>
</html>

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

JQuery_[특정 태그 선택(find)]  (0) 2013.01.07
JQuery_[JQuery filter() 메서드 사용]  (0) 2013.01.07
JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07

- JQuery 를 이용한 배열 관리(1) : 자바 스크립트 배열을 이용한 배열관리

사용 예) array : 받은 배열, index : 배열인덱스 자동, item :  array 배열의 해당 인덱스에 속한 객체의Key 값

<!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 () {
            var array = [
                { name: "hanbit", link: "http://hanb.co.kr" },
                { name: "Naver", link: "http://naver.com" },
                { name: "Yahoo", link: "http://yahoo.co.kr" },
                { name: "PAran", link: "http://paran.com" }
            ];

            J.each(array, function (index, item) {

                var output = "";
                output += "<a href='" + item.link + "'>";
                output += "<h1>" + item.name + "</h1>";
                output += "</a>";
                document.body.innerHTML += output;
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
</body>
</html>

 

- JQuery 를 이용한 배열 관리(1) : 선택자를 이용한 배열관리

<!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>
        .high_light_0 { background : Yellow; }
        .high_light_1 { background : Pink; }
        .high_light_2 { background : Blue; }
        .high_light_3 { background : Red; }
        .high_light_4 { background : Orange; }
        .high_light_5 { background : Green; }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            J("h1").each(function (index, item) {
                J("item").addClass("high_light_" + index);
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>item - 0</h1>
    <h1>item - 1</h1>
    <h1>item - 2</h1>
    <h1>item - 3</h1>
    <h1>item - 4</h1>
    <h1>item - 5</h1>
</body>
</html>


 

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

JQuery_[JQuery filter() 메서드 사용]  (0) 2013.01.07
JQuery_[JQuery 를 이용한 객체 확장]  (0) 2013.01.07
JQuery_[필터 선택자]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07
JQuery_[JQuery 자식, 후손 선택자]  (0) 2013.01.07

- JQuery 필터 선택자

앞의 속성 선택자(요소[속성=값]) 보다 조금 더 간단한 방법으로 쓰고 싶다면 필터 선택자 사용

양식 필터 선택자(1)

 선택자 형태 

 설명 

 요소:button

 input 태그 중 type 속성이 button인 문서 객체와  button 태그를 선택

 요소:checkbox

  input 태그 중 type 속성이 checkbox인 문서 객체를 선택
 요소:file  input 태그 중 type 속성이 file인 문서 객체를 선택
 요소:image

 input 태그 중 type 속성이 image인 문서 객체를 선택

 요소: password

  input 태그 중 type 속성이 password인 문서 객체를 선택
 요소:radio

 input 태그 중 type 속성이 radio인 문서 객체를 선택

 요소:reset  input 태그 중 type 속성이 reset인 문서 객체를 선택
 요소:submit  input 태그 중 type 속성이 submit인 문서 객체를 선택
 요소:text  input 태그 중 type 속성이 text인 문서 객체를 선택

 

양식필터 선택자(2)

 선택자 형태  설명 
 요소:checked

 체크된 입력 양식을 선택 

 요소:disabled  비활성화된 입력 양식을 선택
 요소:enabled  활성화된 입력 양식을 선택
 요소:focus

 초점이 맞춰져 있는 입력 양식을 선택

 요소:input

 모든 입력 양식을 선택(input, textarea, select, button 태그)

 요소:selected

 option 객체 중 선택된 태그를 선택

 

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

JQuery_[JQuery 를 이용한 객체 확장]  (0) 2013.01.07
JQuery_[배열1(스크립트배열), 배열2(선택자)]  (0) 2013.01.07
JQuery_[속성 선택자]  (0) 2013.01.07
JQuery_[JQuery 자식, 후손 선택자]  (0) 2013.01.07
JQuery_[JQuery 선택자(전체, 태그, 아이디, 클래스)]  (0) 2013.01.07

+ Recent posts

티스토리툴바