본문 바로가기
JAVASCRIPT

Javascript Jquery 객체 조작 메서드 - 속성조작 메서드

by devorldist 2022. 7. 10.
728x90
반응형
SMALL

# html() / text() 메서드

 

$("요소 선택").html();

선택한 하위 요소를 가져와 문자열로 반환

$("요소 선택").html("새요소);

선택한 하위 요소를 전부 제거하고 지정한 새 요소를 생성

$("요소 선택").text();

선택한 요소의 텍스트만 가져옴

$("요소 선택").text("새 텍스트");

선택한 요소의 하위 요소를 전부 제거하고 지정한 텍스트를 생성

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        $(function() {
            var result_1 = $("#sec_1").html();
            console.log(result_1);

            $("#sec_1 p").html("<a href=\"#\">Text1</a>");


            var result_2 = $("#sec_2").text();
            console.log(result_2);

            $("#sec_2 h2").text("text()");
        });
    </script>
</head>
<body>
    <h1>
        <strong>객체 조작 및 설정</strong>
    </h1>
    <section id="sec_1">
        <h2>
            <em>html()</em>
        </h2>
        <p>내용1</p>
    </section>

    <section id="sec_2">
        <h2>
            <em>텍스트()</em>
        </h2>
        <p>내용2</p>
    </section>
</body>
</html>

 

# attr() / removeAttr() 메서드

 

$("요소 선택").attr("속성명");

선택한 요소의 지정한 속성 값을 가져 옴

$("요소 선택").attr("속성명", "새 값");

요소를 선택하여 지정한 속성 값을 적용

$("요소 선택").attr({"속성명1":"새 값1", "속성명2":"새 값2"...."속성명n":"새 값n"});

요소를 선택하여 지정한 여러 개의 속성값 적용

 

 

 

 

# addClass() / remveClass() / toggleClass() / hasClass() 메서드

 

$("요소 선택").addClass("class 값");

요소를 선택하여 지정한 class 값 생성

$("요소 선택").removeClass("class 값");

요소를 선택하여 지정한 class 값 삭제

$("요소 선택").toggleClass("class 값");

요소를 선택하여 지정한 class 값이 있으면 삭제하고, 없으면 생성

$("요소 선택").hasClass("class 값");

선택한 요소에 지정한 class 값이 있으면 true, 없으면 false를 반환

 

# val() 메서드

 

$("요소 선택").val();

선택한 폼 요소의 value 속성값을 가져 옴

$("요소 선택").val("새 값");

요소를 선택하여 value 속성에 새 값을 적용

 

# prop() 메서드

 

 

728x90
반응형
LIST