Mainpulation(엘리먼트 제어)

Mainpulation(엘리먼트 제어)

2023. 7. 28. 13:55ㆍjquery

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

- 자식으로 삽입

.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태그 : 하나의 문단 -->
        <p>
            I would like to say:
        </p>
    
        <script>$("p").append("<strong>Hello</strong>");</script>
        
    </body>
</html>

- 형제로 삽입

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

.after() 사용했기 때문에 다음 형제로 삽입!

- 선택한 태그 부모로 감싸기

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

.wrap() 사용하여 아래의 여러부모태그로 감싸는 것 사이에 들어감!

- 삭제

.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 태그 삭제 > how are과 버튼 태그만 남음!

- 치환

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

.replaceAll() 사용 시 element 생성 된다고 보면 됨!

문법 :

replaceAll(target-selector)

인자로 target이 들어오고 그 target는 선택자임!

p태그를 b태그로 다 치환.

*.replaceWith() 문법 :

.replaceWith( newContent )

* 주의! h1의 내용 뿐 아니라 h1 태그까지 지우고 바꿈

ex)

출처 : https://www.codingfactory.net/10344

  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( 'h1' ).replaceWith( '<p>Ipsum</p>' );
        } );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem</h1>
    <button>Replace</button>
  </body>

버튼을 클릭하면 h1 요소를 Ipsum로 치환

- 클래스 제어

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

.toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있음.

클릭 시 class "highlight" 빠짐

- 속성 제어

.attr(), .prop(), .removeAttr(), .removeProp(), .val()

<html>
    <head>
        <style>p {
                color:blue;
                margin:8px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    	<script type="text/javascript">
       		
			//타이핑을 뗐을 때 이벤트 발생
		$("input").keyup( function () {
                var value = $(this).val();
		//p태그에 value 값을 text라는 메소드 호출(엘리먼트의 content 영역에 전달된 인자 셋팅하는 것)
                $("p").text(value);
            }).keyup();
            //트리거 > keyup이라는 이벤트를 가진 핸들러 호출 > input 태그 밑에 입력한 글자 나오게 됨
    	</script>
    </body>
</html>

val()을 사용하여 폼 유형의 태그의 value 값 제어

* .attr(), .prop()의 차이

.attr()은 속성 그 자체의 값을 반환

.attr()는 요소의 속성값이나 정보를 조회(style, src, rowspan 등)하거나 세팅하는 형식

.prop()은 속성값의 상태를 판단

.prop()는 요소가 가진 실제적인 상태(활성화, 체크, 선택여부 등)를 제어

<input type="checkbox" id="check1" checked>check1

체크 박스 클릭 시 첫번째 alert은 attr 속성 , 두번째 alert은 prop 속성이 뜨게 설정

//# attr(), prop()의 차이
$("input").click(function(){
    alert($('#check1').attr("checked"));
    alert($('#check1').prop("checked"));
});

attr :

check1의 속성값 그대로를 가져옴

prop :

check1의 checked 속성이 있는지 여부 판단

저작자표시

'jquery' 카테고리의 다른 글

traversing(탐색) (0)	2023.07.28
Form (0)	2023.07.28
event (0)	2023.07.28
Chain (0)	2023.07.27
선택자 (0)	2023.07.27

📚개발 복습 노트

📚개발 복습 노트

태그

최근글

댓글

공지사항

아카이브

'jquery' 카테고리의 다른 글

관련글

티스토리툴바