[jQuery] getter 메소드와 setter 메소드 (.html, .text, .attr, .val)

2021. 8. 8. 00:54
728x90

01 getter 메소드와 setter 메소드

  • getter 메소드 는 선택된 요소의 값을 읽어서 그 값을 반환.
  • 만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 '첫 번째 요소'의 값만을 반환.

 

  • setter 메소드 는 선택된 '모든 요소'에 인수로 전달된 값을 설정.
  • 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환.

 

 

메소드 설명
.html()  해당 요소의 HTML 콘텐츠를 반환하거나 설정
.text()  해당 요소의 텍스트 콘텐츠를 반환하거나 설정
.attr()  해당 요소의 명시된 속성의 속성값을 반환하거나 설정
.val()  <form>요소의 값을 반환하거나 설정

 

 

 

 

 

02 .html(), .text()

  • .html() : 해당 요소의 HTML 콘텐츠를 반환하거나 설정
  • .text() :  해당 요소의 텍스트 콘텐츠를 반환하거나 설정

 

 

 

console.log

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>html/text</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
       $(function(){
            console.log($("#d3").html());
            console.log($("#d3").text());
       });
    </script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">
        <p>#d3 문단 내용</p>
        <p>#d3 문단 내용</p>
    </div>
</body>
</html>

 

 

 

.html()  과   .text()

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>html/text</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
       $(function(){
            $("#d1").html("<p>안녕하세요 html()를 사용했습니다.</p>");
            $("#d2").text("<p>안녕하세요 text()를 사용했습니다.</p>");
       });
    </script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">
        <p>#d3 문단 내용</p>
        <p>#d3 문단 내용</p>
    </div>
</body>
</html>

 

 

 

 

 

03 .attr()

  • 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용.

 

 

 

구글 이동

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>태그 속성 제어</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            console.log($("a").attr("href"));
            $("a").attr("href", "https://www.google.co.kr");
        });
    </script>
</head>
<body>
    <a href="#">구글로 이동</a><br>
    <form action="">
        <input type="text" name="txt"><button>전송</button>
    </form>    
</body>
</html>

 

 

 

구글 새창 이동

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>태그 속성 제어</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            console.log($("a").attr("href"));
            $("a").attr("href", "https://www.google.co.kr");
            //하이퍼링크에 새탭에 띄우는 속성을 설정
            $("a").attr("target","_blank");
        });
    </script>
</head>
<body>
    <a href="#">구글로 이동</a><br>
    <form action="">
        <input type="text" name="txt"><button>전송</button>
    </form>    
</body>
</html>

※ 새창으로 이동 : $("a").attr("target","_blank");

 

 

 

속성 코드 같이 쓰기

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>태그 속성 제어</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            console.log($("a").attr("href"));
            $("a").attr({
                "href" : "https://www.google.co.kr",
                "target" : "_blank"
            });
        });
    </script>
</head>
<body>
    <a href="#">구글로 이동</a><br>
    <form action="">
        <input type="text" name="txt"><button>전송</button>
    </form>    
</body>
</html>

 

 

※ console 에 $("a") 입력시 해당 요소에 대해 나온다. id를 입력 하지 않았으면 id의 기본값인 "" blank 이다. id가 없지는 않음.

 

 

 

 

 

04 .val

  • <form>요소의 값을 반환하거나 설정함.

 

 

 

.val 기본

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>val</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            alert($("#txt").val());
        })
    </script>
</head>
<body>
    <input type="text" id="txt" value="test"><button id="btn">실행</button>
</body>
</html>

 

 

 

실시간 적으로 바뀐 값 : .val("안녕하세요")

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>val</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //실시간 적으로 바뀐값
            $("#txt").val("안녕하세요");
        })
    </script>
</head>
<body>
    <input type="text" id="txt" value="test"><button id="btn">실행</button>
</body>
</html>

 

 

 

최초의 작성된 값 : alert($("#txt").attr("value"));

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>val</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="/resource/lib/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //attr 최초에 작성된 값
            alert($("#txt").attr("value"));
        })
    </script>
</head>
<body>
    <input type="text" id="txt" value="test"><button id="btn">실행</button>
</body>
</html>
728x90

'jQuery > Study' 카테고리의 다른 글

[jQuery] 클래스 설정 (.addClass, .removeClass, .hasClass, .ToggleClass)  (0) 2021.08.11
[jQuery] 프로퍼티 설정 (.attr, removeAttr, .css)  (0) 2021.08.08
[jQuery] 필터링 메소드 (.eq, .slice)  (0) 2021.08.08
[jQuery] 제이쿼리 선택자 (:eq(n), :gt(n), :lt(n), :even, :odd, :first, :first-of-type, :last, :last-of-type, :nth-child(n), :only-child)  (0) 2021.08.08
[jQuery] 자손 요소의 탐색 (.children, .find)  (0) 2021.08.07

BELATED ARTICLES

more

티스토리툴바