본문 바로가기
[자기계발]/유튜브로 코딩배우기

[생활코딩] jQuery를 이용해서 HTML element 제어하는 방법

슈총총 2021. 6. 13.
반응형

저번 편에서 생활코딩 jQuery event에 대해 알아보았다. 이번 편에서는 jQuery를 이용해서 HTML element를 제어하는 방법에 대해 알아볼 것이다. 

Eelement 제어

jQuery를 이용해서 HTML element 제어하는 방법

문서를 만든다하면 html, css로 충분하다

web을 문서가 아닌 application을 만드는 수단으로 사용한다면? 

html과 css 만으로는 부족하다. such as gmail spread sheet

html을 동적으로 프로그래밍 하기위해 JavaScript를 써야한다. 이 때, 부족한 생산성을 보충해줘서 효율을 극대화시키는 것이 jQuery이다.

1. 자식으로 삽입하기 ( .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>
  • p tag의 append 라는 method를 호출해서 인자로 strong 태그로 감싸고 있는 hello 라고 하는 텍스트를 인자로 전달했다.
  • <p> 안에 strong element가 생성이 된다. 

2. 형제로 삽입 ( .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>
  • 자식 태그는 p태그 안쪽에 Hello가 들어왔는데, 형제는 p태그 다음에 b태그가 나오고 Hello가 들어가 있다.
  • 자식은 P 태그 안에 있는 element를 삽입하는 것이다.
  • 형제는 p 태그 옆에 있는 element를 삽입하는 것이다.
  • 부모는 <body>가 부모가 되고 <hmtl>은 조상이라고 한다.

3. 부모로 감싸기 ( .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>
  • jQuery를 이용하면 .wrap이라는 method를 통하여 이런 복잡한 작업을 아주 편리하게 할 수 있다.
  • <body> 밑에 바로 <span>이 나오는 것이 아니라 <div>~<b>의 순서 다음에야 <span>이 나온다. 
  • wrapper에서 .wrap 이라는 method를 호출해주었기 때문에 인자로 전달된 element들이 span element의 부모 element로 추가가 된 것이다.

4. 삭제 ( .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>
  • hello 와 you 가 <p>태그에 들어가 있다.
  • wrapper 등장한 후, 인자로 button 이라는 element를 전달하고 있다.
  • .click이라는 method를 호출한다. 이것은 event 이다.
  • 뒤에 나오는 function은 event 가 발생했을 때 사용될 eventHandler 이다. 
  • wrapper 그 등장하고 이번엔 selector로 <p>태그가 들어가 있다.
  • element가 p인 element들을 선택하는 wrapper이다.
  • 그리고 remove 라는 method를 호출했다. 이렇게 하면 p 태그를 가지고 있는 element들이 전부 삭제가 된다. 
  • html 코드상에서는 button과 how are을 제외한 것들이 사라진다. 

5. 치환 ( .replaceAll(), .replace() )

<!-- 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>
  • 치환은 어떤 element를 다른 element로 변경하는 것을 말한다.  
  • 앞쪽에서 선언해놓은 element가 target을 교체한다 라는 뜻이다. 
  • .replaceAll(target) => 인자로 target이라는 값을 갖는다.
  • 제어하고자 하는 대상이 인자로 들어오고 교체될 element는 p태그를 <br>로 감싸고 있는 Paragraph로 변경시켜셔 Paragraph.이 연속해서 3개가 나온다.
  • $("<b>Paragraph. </b>") 이것은 web 문서 상에 존재하는 특정한 element를 선택하는 selector 가 아니라 html 코드를 직접 만들어 element를 생성해주는 것이다.
  • 이들은 .replaceAll 같이 어떤 method를 이용해서 수정할 수 있다.
  • element를 생성해서 replace 뒤에 나오는 인자로 seletor를 전달하게 되면 그에 해당하는 element를 wrapper를 이용해서 생성해 준 element 가 치환해주게 된다. 

6. 클래스 ( .addClass(), .hasClass(), .removeClass(), .toggleClass() )

  • .addClass() => Class를 추가해준다. 
  • .hasClass() => 어떤 element의 Class의 유무를 체크해준다.
  • .removeClass() =>element를 삭제한다.
  • .toggleClass() =>  그 Class가 가지고 있다면 삭제하고 없다면 추가해주는 토글 방식이다.
<!-- 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>
  • wrapper로 시작하고 p태그를 selector로 하고 있다. 그 p 태그의 element를 click 했을 때 
  • this (클릭된 element를 의미) 하고 wrapper 로 하게 되면 거기다가 toggleClass로 highlight 라는 인자를 전달했다.
  • p 태그를 사용자가 click 했다면 event가 발생되면서 toggleClass가 실행이 되는데 
  • 만약에 p태그가 highlight 를 class 명으로 하고있으면 제거해주고, 하고 있지 않다면 highlight 를 class로 추가해줘서 디자인을 css 한 것처럼 변경시켜준다.

7. 속성제어 ( .attr(), .prop(), .removeAttr(), . removeProp(), .val() )

이들은 대부분 form과 관련된 input element 이다.  

<!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() 은 element가 가지고 있는 value 값을 return 해주는 method 이다. 
  • 코드를 보면 <p> 태그 사이는 비어있다. 
  • 사용자가 이 input element에다가 어떤 text를 타이밍 하게 되면 그 event를 캡쳐해서 <p>태그로 넣어주게 된다. 
  • wrapper가 나오고 input element를 selector로 전달했다. 
  • keyup이라는 method를 통해서 eventHandler를 설치하고 있다. 이것은 사용자가 어떤 타이핑을 하고 누른 다음에 타이핑을 땠을 때 발생하는 event이다. 
  • eventHandler의 내용은 그 event가 발생한 element에 var이란 method를 호출해서 그 element가 가지고 있는 value 값을 알아내는 것이다. 그리고 그 값을 value라고 하는 변수에다가 저장을 한 것이다.
  • 그 다음 p태그를 select하고 .text 라는 method를 호출한 다음에 인자로 value 값을 전달 한다. 
  • 이 text는 어떤 element의 content 영역에 전달된 인자를 세팅하는 method이다.
  • trigger를 선택 실행하게 되면 input element가 가지고 있는 event 중에 keyup 이라는 event를 가지고 있는 eventHandler를 호출해주고 있기 때문에 그렇다. 초기 값을 세팅해 줄 때 주로 trigger를 사용한다.

참고할 사이트

 

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

Manipulation(조작)에는 html element를 조작하는 기능들이 정리가 되어있다. 작업의 형식에 따라서 카테고리가 나누어져있다. 위에 예제는 가장 기초적이고 중요한 것들을 설명한 것이다.

이전글 보고오기

반응형
저작자표시 비영리 변경금지

'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글

[생활코딩] jQuery 탐색(traversing)이란?  (0) 2021.07.04
[생활코딩] jQuery 폼(form) 이란?  (0) 2021.06.27
[생활코딩] jQuery event 정리  (0) 2021.06.12
[생활코딩] jQuery chain 이란?  (0) 2021.06.09
[생활코딩] jQuery 선택자(selector)란?  (0) 2021.06.08

'[자기계발]/유튜브로 코딩배우기' 관련글

티스토리툴바