생활 웹디자인

코스 전체목록

닫기

예제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. labis98
    20210924 좋은 강의 감사합니다.
  2. 허공
    감사합니다!
  3. 웅이
    생활코딩 HTML 튜토리얼 폼 편 참고

    페이지가 안나오네요 ㅠㅠ
  4. 삼고잉
    흠.. 폼내에서 서브밋을 하지않고 외부에서 할수도 있는건가요
  5. 프론트앤드_mydream
    좋은강의 감사드립니다. 귀에쏙쏙 들어오네요 ^^ 많이 배우고 갑니다.
  6. sheis
    잘 봤어요^^
  7. crable
    감사합니다.
  8. 나비다
    어렵네요.
  9. ckocko
    메소드와 이벤트의 차이가 뭘까요? 이번 강의에서 뜬금없이 헷갈리네요 ㅜ 둘다 .~~ 형식이라서 점점 헷갈립니다 ㅠ
  10. park
    return 값이 true라면 원래 서브밋 버튼을 눌렀을때 떠야하는 alert창이 뜨고
    false라면원래는 submit을 눌렀을 때 떠야할 경고창이 안뜨는군요
  11. 완료!
    완료! 감사합니다.
  12. tachyon
    감사합니다!
  13. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  14. JustStudy
    고맙습니다
  15. 찐똥구리구리
    자문자답입니다 ㅎ $('[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 자세히 보기