jQuery

jQuery(getter 메소드와 setter 메소드)_2024-07-25

앵보몬 2024. 7. 25. 14:18
728x90
반응형

대표적인 getter 메소드와 setter 메소드

요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메소드와 setter 메소드는 다음과 같습니다.

.html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함.
.text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함.
.width() 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함.
.height() 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함.
.attr() 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함.
.position() 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드)
.val() <form>요소의 값을 반환하거나 설정함.

https://www.tcpschool.com/jquery/jq_elementSelection_access

jQuery Get and Set Content Practice Problems

1) Get Text Content
`#content1` 요소의 텍스트 내용을 `#output1` 요소에 표시하는 jQuery 코드를 작성하세요. (text() 사용)

2)Get HTML Content
- `#content2` 요소의 HTML 내용을 `#output2` 요소에 표시하는 jQuery 코드를 작성하세요. (html() 사용)

3) Get Input Value
`#input1` 입력 요소의 값을 `#output3` 요소에 표시하는 jQuery 코드를 작성하세요. (val() 사용)

4)Set Input Value
 `#input4` 입력 요소의 값을` #output6` 요소에 표시하는 jQuery 코드를 작성하세요. (val() 사용)

 

jquery_3.7.1.js
0.28MB
연습문제1.html
0.00MB

 

연습문제1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

  </head>

  <body>
    <h1>jQuery Get and Set Content Practice</h1>

    <div id="content1">기본 텍스트 내용</div>
    <button id="btn1">Get Text Content</button>
    <div id="output1"></div>
    <br /><br />
    <hr />

    <div id="content2">
      <h2>기본 HTML 내용</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <button id="btn2">Get HTML Content</button>
    <div id="output2"></div>
    <br /><br />
    <hr />
    <h2>입력내용 출력</h2>
    <input type="text" id="input1" placeholder="입력하세요" />
    <button id="btn3">Get Input Value</button>
    <div id="output3"></div>
    <br /><br />
    <hr />

    <h2>변경할내용 input박스에 출력</h2>
    <div id="content5"></div>
    <input type="text" id="input4" placeholder="기본 값" />
    <button id="btn6">Set Input Value</button><br />

    출력 : <input type="text" id="input6" placeholder="기본 값" /> <br /><br />
    <hr />

    <script>
      $(document).ready(function () {
        // 1. Get Text Content
        $("#btn1").click(function () {
          $("#output1").text($("#content1").text());
        });

        // 2. Get HTML Content
        $("#btn2").click(function () {
          $("#output2").html($("#content2").html());
        });

        // 3. Get Input Value
        $("#btn3").click(function () {
          $("#output3").text($("#input1").val());
        });

        // 4. Set Input Value
        $("#btn6").click(function () {
          $("#input6").val($("#input4").val());
        });
      });
    </script>
  </body>
</html>

 

728x90
반응형