jQuery 수업

엘리먼트 제어

엘리먼트 제어

자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text())

<!-- http://api.jquery.com/append/ -->
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                background:yellow;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>
            I would like to say:
        </p>
        <script>$("p").append("<strong>Hello</strong>");</script>
    </body>
</html>

형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore())

<!-- http://api.jquery.com/after/ -->
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                background:yellow;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>
            I would like to say:
        </p>
        <script>$("p").after("<b>Hello</b>");</script>
    </body>
</html>

부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner())

<!-- http://api.jquery.com/wrap/ -->
<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                border:2px blue solid;
                margin:2px;
                padding:2px;
            }
            p {
                background:yellow;
                margin:2px;
                padding:2px;
            }
            strong {
                color:red;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <span>Span Text</span>
        <strong>What about me?</strong>
        <span>Another One</span>
        <script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
    </body>
</html>

삭제 (.detach(), .empty(), .remove(), .unwrap())

<!-- http://api.jquery.com/remove/ -->
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                background:yellow;
                margin:6px 0;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p>
            Hello
        </p>
        how are
        <p>
            you?
        </p>
        <button>
            Call remove() on paragraphs
        </button>
        <script>
            $("button").click( function () {
                $("p").remove();
            });
        </script>
    </body>
</html>

치환 (.replaceAll(), .replaceWith())

<!-- http://api.jquery.com/replaceAll/ -->
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p> Hello </p>
        <p> cruel </p>
        <p> World </p>
        <script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples        </script>
    </body>
</html>

클래스 (.addClass(), .hasClass(), .removeClass(), .toggleClass())

<!-- http://api.jquery.com/toggleClass/ -->
<!DOCTYPE html>
<html>
    <head>
        <style>p {
                margin: 4px;
                font-size:16px;
                font-weight:bolder;
                cursor:pointer;
            }
            .blue {
                color:blue;
            }
            .highlight {
                background:yellow;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <p class="blue"> Click to toggle </p>
        <p class="blue highlight"> highlight </p>
        <p class="blue"> on these </p>
        <p class="blue"> paragraphs </p>
        <script>
             $("p").click( function () {
                 $(this).toggleClass("highlight");
             });
         </script>
    </body>
</html>

속성제어 (.attr(), .prop(), .removeAttr(), .removeProp(), .val())

<!DOCTYPE html>
<html>
    <head>
        <style>p {
                color:blue;
                margin:8px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <input type="text" value="some text"/>
        <p>
        </p>
        <script>$("input").keyup( function () {
                var value = $(this).val();
                $("p").text(value);
            }).keyup();</script>
    </body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. 완료!
    감사합니다. 완료~
  2. tachyon
    감사합니다!
  3. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  4. JustStudy
    고맙습니다
  5. thesoul214
    강의 마지막 부분에 egoing님께서 설명해 주셨네요 ㅎ

    처음에 input 태그에 들어있는 값(예제에서는 some text라는 문자열)을 p태그 안에 초기화 시켜 주기 위한 트리거라고 하네요 ㅎ

    keyup을 호출할 때랑 안할때를 비교해보시면 바로 아실것 같습니다 ㅎ
    대화보기
    • tenbird
      <script>$("input").keyup( function () {
      var value = $(this).val();
      $("p").text(value);
      }).keyup();</script>

      여기서 keyup() 다시 호출하는건 무슨 의미인가요???
    • egoing
      아예 형제는 제 친구 이름인데 헷갈렸네요 ㅎㅎ
      대화보기
      • 니온스
        형재로 삽입 은 형제로 삽입의 오타이신거죠? --;ㅋ. 강의 감사합니다.
      • egoing
        크롬에서는 작동을 안할꺼예요. ^^ 곧 제거하고 다른 서비스로 교체할 예정입니다.
        대화보기
        • Guest
          맨 아래 입력, 출력란에 소스 붙여놓고 실행하면 익스플로러에선 스크립트가 잘 실행되는데 크롬에서는 안되네요. 설정 문제일까요?
        • Guest
          <script src="http://code.jquery.com/jquery-latest.js"></script>
          Hello
          cruel
          World
          <script>$("Paragraph. ").replaceAll("p"); // check replaceWith() examples </script>
        • egoing
          jQuery는 자바스크립트라는 언어의존재 방식을 바꿔놓은 혁신적인 라이브러리죠. ^^
          대화보기
          • tana
            우아... 정말 마음에 듭니다.jQuery 는 javascript의 아류일뿐이다라고 생각하고 무시할랬는데...위의 정보만으로도 엄청 매력적인 녀석인 것 같습니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기