반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Yeonee's Story

JQUERY - 7. manipulation 엘리먼트 제어 본문

VsCode(HTML)/3. JQUERY

JQUERY - 7. manipulation 엘리먼트 제어

yeonee 여니 2023. 7. 9. 19:28
728x90
반응형
SMALL

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

 

yeonee 블로그 : 네이버 블로그

예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co

blog.naver.com

 

* manipulation 엘리먼트 제어

 

* 위안으로 삽입 ( .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>

 

 

다음글>>

 

 

+ 아래의 링크를 참고하여 공부하였습니다.

728x90
반응형
LIST

'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글

JQUERY - 선택자(Selector) 요약 정리  (0) 2023.07.09
JQUERY - 8. Form 폼  (0) 2023.07.09
JQUERY - 6. 이벤트 event  (0) 2023.07.09
JQUERY - 5. Chain  (0) 2023.07.09
JQUERY - 4. 선택자  (0) 2023.07.09
'VsCode(HTML)/3. JQUERY' Related Articles more