jQuery 수업

예제1. (.focus(), .blur(), .change(), .select())

<!DOCTYPE html>
<html>
    <head>
        <style>
            span {
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>
            <input type="text" />
            <span></span>
        </p>
        <script>
            $("input").focus( function () {
                $(this).next("span").html('focus');
            }).blur( function() {
                $(this).next("span").html('blur');
            }).change(function(e){
                alert('change!! '+$(e.target).val());
            }).select(function(){
                $(this).next('span').html('select');
            });
        </script>
    </body>
</html>

예제2. (.submit(), .val())

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                margin:0;
                color:blue;
            }
            div, p {
                margin-left:10px;
            }
            span {
                color:red;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>
            Type 'correct' to validate.
        </p>
        <form action="javascript:alert('success!');">
            <div>
                <input type="text" />

                <input type="submit" />
            </div>
        </form>
        <span></span>
        <script>
            $("form").submit( function() {
                if ($("input:first").val() == "correct") {
                    $("span").text("Validated...").show();
                    return true;
                }
                $("span").text("Not valid!").show().fadeOut(1000);
                return false;
            });
        </script>
    </body>
</html>

참고 : 선택자 챕터의 예제 중 form 선택자 참고

댓글

댓글 본문
작성자
비밀번호
  1. 완료!
    완료! 감사합니다.
  2. tachyon
    감사합니다!
  3. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  4. JustStudy
    고맙습니다
  5. 찐똥구리구리
    자문자답입니다 ㅎ $('[type="text"]') 이렇게 ''로 감싸야되는군요..다른것과 마찬가지로...ㅎㅎ
    대화보기
    • 찐똥구리구리
      두번째 예제 32: if ($("input:first").val() == "correct") {
      if($([type="text"]).val() === 'correct'{
      로 바꾸어 봤는데요. 안되네요..뭐가 잘못된걸까요?? help me~
    • asdf
      오래전 글이긴 하지만..
      혹시나 비슷한 생각을 나중에 하게 될 까봐 적습니다.
      show를 안하니 span의 text가 보이지 않네요.
      이것을 보여주기 위한 동작인것 같습니다.
      왜안보이는지는..
      대화보기
      • prepath
        submit 실패할 경우 span 엘리먼트에 Not valid!를 출력하고 fadeOut()처리를 하고 있습니다.
        fadeOut()이 완료되면 브라우저에서 span 엘리먼트가 안보이는 상태가 되네요.
        이 후로는 show()가 호출되지 않으면 span이 더이상 보이지 않습니다.
        그래서 항상 show()를 호출하고 있는것 같습니다.
        대화보기
        • T-BONE Steak
          예제 2. 에서

          .show() 메서드를 사용 안해도 정상 작동하는것 같은데요,

          사용을 한 이유가 궁금합니다.
        • 저도 초보지만 도로시님의 의견에 추가드리자면
          저 문제를 해결하기 위해 head에 쓸 때에는
          $(document).ready(function(){

          });

          이렇게 쓰고 안에다가 쓰는 걸로 배웠어요 ! 저 말은 문서가 준비가 되면- 즉 html이 로딩이 된 후에 실행한다 로
          알고 있습니다 혹시 아니라면 추가 댓글 달아주세요~~
        • 도로시
          초보라서 답변 드리기 조심스럽지만..

          브라우저가 html 문서를 해석할 때엔 문서의 위에서부터 아래로 읽어 내려간대요

          그래서 head에 나온 자바스크립트 부분을 읽을 때에는
          아직 body에 있는 엘리먼트들을 읽기 전이기 때문에
          마치 존재하지 않는 엘리먼트들에 대해 어떤 명령을 하는 것처럼 되어서 실행이 안 된다고 알고 있어요 ^^
          대화보기
          • ipsled
            script부분을 body말고 head에 넣으면 왜 실행이 안되는걸까요?
          • egoing
            수정했습니다. 알려주셔서 고맙습니다. ^^
            대화보기
            • 88240
              생활코딩 HTML 튜토리얼 폼 편 참고 <-클릭하면 페이지가 안나와요~
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기