[jQuery] 엘리먼트 제어 (Manipulation)

jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다.

 

 

- 자식으로 삽입 (.append())

<p>
I would like to say:
</p>
<script>$("p").append("<strong>Hello</strong>");</script>

• 결과

<p>
I would like to say:
<strong>Hello</strong>
</p>

 

 

- 형제로 삽입 (.after())

<p>
I would like to say:
</p>
<script>$("p").after("<b>Hello</b>");</script>

• 결과

<p>
I would like to say:
</p>
<b>Hello</b>

 

 

- 부모로 감싸기 (.wrap())

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

• 결과

<div>
    <div>
        <p>
            <em>
                <b>
                <span>Span Text</span>
                </b>
            </em>
        </p>
    </div>
</div>

 

 

- 삭제 (.remove())

<p>
Hello
</p>
how are
<p>
you?
</p>
<button>
Call remove() on paragraphs
</button>

<script>
    $("button").click( function () {
    	$("p").remove();
    });
</script>

버튼을 누를 시 p 태그를 모두 삭제한다.

 

 

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

<p> Hello </p>
<p> cruel </p>
<p> World </p>
<script>$("<b>Paragraph. </b>").replaceAll("p"); // 선택한 요소를 지정된 요소로 대체한다. </script>

• 결과

<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>

.replaceWith() 메소드는 replaceAll() 과 비슷하지만 소스와 타깃의 위치가 서로 반대다.

 

// $("<b>Paragraph. </b>").replaceAll("p");

$(지정된 요소).replaceAll(선택된 요소);

 

// $(".item").replaceWith($("#firstItem")); -> item 클래스를 갖고 있는 엘리먼트의 id를 firstItem을 바꾼다.
$(선택한 요소).replaceWith(지정된 요소);

 

또한 replaceWith() 메소드는 지정된 요소로 대체되어 제거된 기존 요소를 반환한다.

 

 

- 클래스 (.toggleClass())

<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");    // p 태그를 클릭 시 해당 p 태그 클래스에 highlight가 있으면 제거 없으면 추가
    });
</script>

 

 

- 속성제어 (.val())

<input type="text" value="some text"/>
<p>
</p>

<script>
$("input").keyup( function () {
    var value = $(this).val();    // input에 들어온 값을 .val() 메소드로 가져와서
    $("p").text(value);          // p 태그의 값으로 지정해준다.
}).keyup();                     // 초기 값을 셋팅 해주기 위한 트리거 .keyUp() 함수를 호출해준다.
</script>