알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

[jQuery]엘리먼트 제어 본문

Web /JQuery

[jQuery]엘리먼트 제어

백곳 2017. 8. 23. 19:31

엘리먼트 제어




이제 부터 예제로 학습 하겠습니다. 


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

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

그리고 크롬 개발자 도구(F12) 로 보면 자식으로 해당 내용이 추가 되었습니다. 

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

<!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");   </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>


keyboard 에서 keyup 이 input 테그에서 발생할때 이벤트로 태그 p 의 벨류 값을 변경합니다. 


여기까지 예제로 써본것이고  JQuery 홈페이지에 더많은 제어 방법과 예제 들이 있으니 필요할때 마다 참고해서 사용하면 됩니다.


API 라는것은 물론 외우는것도 중요하지만 어떤한 API가 있는지만 알고 사용법은 문서를 그때 그때 참고 해서 사용하시는 편이 


효율적이라 생각 되네요 수많은 API를 디테일 하게 사용법까지 모두 외워서 하는것은 너무 힘들고 효율성이 적다고 생각되네요.




'Web > JQuery' 카테고리의 다른 글

[jQuery]애니메이션  (0) 2017.08.25
[jQuery ] 폼 이벤트  (0) 2017.08.23
[javascript,jQuery] 이벤트란?  (0) 2017.08.23
[jQuery] Chain이란?  (0) 2017.08.23
JQuery 선택자  (0) 2017.08.22
공유하기 링크
'Web /JQuery' Related Articles more
Comments