jquery - jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
</head>
<body>
 
    <!-- DOM Document Object Model -->
    <!-- 
    Javascript - innerHTML, value 
    innerHTML =             setter
    = innerHTML             getter
    JQuery - text(), val(), html(), attr(), prop()
    text("Hello")
    = text()
    -->
 
    <p id="test">
        1인당 <b>23억원씩</b> 보유…부동산에 자산 절반 이상 투자
    </p>
 
    <button id="btn1">show text</button>
    <button id="btn2">show html</button>
 
    <script type="text/javascript">
        $(function() {
            // 문자열만 불러옴
            $("#btn1").click(function() { // text
                alert("text: " + $("#test").text());
            });
            
            // 코드까지 불러옴
            $("#btn2").click(function() { // html
                alert("html: " + $("#test").html());
            });
        });
    </script>
 
    <br>
    <br>
 
    <p>
        <a href="http://www.naver.com" id="naver">네이버</a>
    </p>
    <button id="btn3">Attribute(속성)</button>
 
    <script type="text/javascript">
        $(function() {
            $("#btn3").click(function() {
                // alert("Attr : " + $('#naver').attr("href"));            // getter
                // attribute (URL)
                // $('#naver').attr("href", "http://zum.com");        // setter
                $('#naver').prop("href", "http://zum.com");
                alert("http://zum.com으로 버튼 변경");
            });
        });
    </script>
 
    <br>
    <br>
 
    <input type="text" id="id" value="홍길동">
    <button id="btn4">버튼</button>
    <br>
    <br>
 
    <p id="demo">여기 p</p>
 
    <script type="text/javascript">
        $(function name() {
            $("#btn4").click(function() {
                // value
                alert("text : " + $("#id").val());
                $("#demo").text($("#id").val());
            });
        });
    </script>
 
</body>
</html>
jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

단축키

Articles
