본문 바로가기
프로그래밍 개발/JQuery

JQuery 엘리먼트 제어

by Jinseok Kim 2020. 12. 28.
반응형

 

엘리먼트 제어

 

 

 

Manipulation | jQuery API Documentation

Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of

api.jquery.com

 

 

 

 

 

자식으로 삽입 (.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>
            Jin seok kim:
        </p>
        <script>$("p").append("<strong>Hello</strong>");</script>
    </body>
</html>

p태그의 자식으로 Hello가 들어왔다.

 

 

 

 

 

 

 

형제로 삽입 (.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>
            jin seok kim:
        </p>
        <script>$("p").after("<b>Hello</b>");</script>
    </body>
</html>

P태그의 형제인 또다른 P태그로서 Hello가 들어왔다.

 

 

 

 

 

 

 

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

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

span태그을 div, p, em, b의 태그들로 감싸주어 적용시켰다.

 

 

 

 

 

 

 

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

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

버튼을 클릭하면 p태그를 삭제하도록 설정하였다.

 

 

 

 

 

 

 

 

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

<!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>jin seok. </b>").replaceAll("p"); </script>
    </body>
</html>

p태그 안의 원래 텍스트 값들을 설정한 텍스트로 변동 및 치환시켜주었다.

 

 

 

 

 

 

 

클래스 (.addClass(), .hasClass(), .removeClass(), .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>

.tooggleClass라는 메소드를 통해 P태그를 클릭하면 클릭당한 p태그는 CSS의 효과가 들어간 class 값 "highlight" 을 발동시키게 하였다.

 

 

 

 

 

 

 

속성제어 (.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>

.val이라는 메소드로 keyup 메소드로 받은 키보드 입력값을 품의 값으로서 알아내어 변수 value로 선언해주었다. 그리고 이 선언한 변수 value을 p태그에 text 메소드를 이용하여 텍스트 값으로 적용시켰다. 

 

 

 

 

반응형

'프로그래밍 개발 > JQuery' 카테고리의 다른 글

JQuery 탐색  (0) 2020.12.30
JQuery 폼  (0) 2020.12.29
JQuery Event  (0) 2020.12.25
JQuery Chain  (0) 2020.12.23
JQuery 선택자  (0) 2020.12.22

관련글

댓글

티스토리툴바