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. labis98
    20210924 좋은 강의 감사합니다.
  3. psmqdt
    클래스 예제를 복사해서 사용하면 style이 제대로 적용이 되지 않는데, 검사를 하면 이상한 문자들이 많이 들어 있는 것을 볼 수 있습니다. 짧은 예제이니 직접 입력해서 하면 작동이 잘 됩니다.
  4. 허공
    감사합니다!
  5. ericpark
    감사합니다.
  6. 삼고잉
    초기값을 세팅해주기위해 체이닝된 이벤트핸들러함수를 호출시킨다.
    제거를 한후에 붙여넣는 작업은 replaceAll이 좋다.. ㅎㅎ
  7. Hyun Woo Lee
    더 많은 것을 알아봐야겠어요!
    사용할때마다 서칭을 통해..
  8. Kang Inho
    감사합니다! 기본을 배우고 찾아보면서 더 많이 알아가는 것 같습니다.
  9. 카라멜팝콘
    항상 명강의였지만
    이번 강의는 정말... 레전드급이네요 ㄷㄷ
  10. sheis
    봤어요^^
  11. crable
    감사합니다.
  12. 보리밥
    Gooooooooooooooooood ^^ㅇ
  13. kanu
    appendTo() 로 요소를 추가하고 appendTo() 한것을 remove() 하는 방법좀 알려주세요.
  14. 완료!
    감사합니다. 완료~
  15. tachyon
    감사합니다!
  16. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  17. JustStudy
    고맙습니다
  18. 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의 아류일뿐이다라고 생각하고 무시할랬는데...위의 정보만으로도 엄청 매력적인 녀석인 것 같습니다.