4. 객체 조작 - 속성 조작 메소드

종류	사용법	설명
html( )	$("요소선택").html( ); $("요소선택").html("새요소");	선택한 요소에 하위 요소들을 반환하거나 새 요소로 변환합니다.
text( )	$("요소선택").text(); $("요소선택").text(새텍스트);	선택한 요소에 포함되는 텍스트를 반환하거나 새 텍스트로 변환합니다.
css("속성")/ css(속성","값")	$("요소선택").css("color"); $("요소선택").css("color","blue");	선택한 요소에 css속성값을 반환 또는 변환합니다.
removeAttr("속성")	$("요소선택").removeAttr("title");	선택한 요소의 지정한 속성을 삭제합니다.
attr("속성")/ attr("속성","값")	$("요소선택").attr("href"); $("요소선택").attr("href","main.html");	선택한 요소에 속성값을 반환 또는 변환합니다.
addClass("클래스값")	$("요소선택").addClass("abc");	선택한 요소에 지정한 클래스를 생성 또는 추가합니다.
removeClass("클래스값")	$("요소선택").removeClass("abc");	선택한 요소의 지정한 클래스 값을 삭제합니다.
toggleClass("클래스값")	$("요소선택").toggleClass("abc");	선택한 요소에 지정한 클래스값을 생성,삭제를 반복합니다.
hasClass("클래스값")	$("요소선택").hasClass("abc");	선택한 요소에 지정한 클래스 값이 포함되어 있는지 검사합니다. 있을 경우에는 true, 없으면false를 반환합니다.
prop("")	$("요소선택").prop("tagName");	선택한 태그의 속성들을 반환합니다.
val( )/ val(값)	$("요소선택").val(); $("요소선택").val("홍길동");	선택한 입력요소에 지정한 value값을 반환 또는 변환합니다.

[출처] 4_객체 조작|작성자 구름

1) html() , text(), css(), attr()

<!DOCTYPE html>
<html lang="ko">
<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 src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("h2").html("<a href='#'>HTML 메서드</a>");
            alert($("h1").html());
        });
    </script>
</head>
<body>
    <h1><strong>객체 조작 및 생성</strong></h1>
    <h2><em>html()</em></h2>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<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 src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("h2").text("텍스트 메서드");
            alert($("h1").text());
        });
    </script>
</head>
<body>
    <h1>객체 조작 및 생성</h1>
    <h2>text()</h2>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<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 src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("p").text($("h1").css("color"));
            $("h2").css("color", "red");
        });
    </script>
</head>
<body>
    <h1 style="color:blue">객체 조작 및 생성</h1>
    <p></p>
    <h2>CSS 메서드</h2>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<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 src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("#txt").text($("#wrap img").attr("src"));
            $("#wrap img").attr("width", "200");
            $("#box img").removeAttr("border");
        });
    </script>
</head>
<body>
    <h1>객체 조작 및 생성</h1>
    <p id="wrap">
        <img src="images/math_img_1.jpg" alt="가위" width="100">
    </p>
    <p id="txt"></p>
    <p id="box">
        <img src="images/math_img_3.jpg" alt="보" width="100" border="2">
    </p>
</body>
</html>

.addClass(), .removeClass(), .toggleClass(), .hasClass()

.addClass() - 요소에 클래스 추가

.removeClass() - 요소에 클래스 제거

.toggleClass() - 요소가 클래스를 가지고 있다면 클래스 제거, 클래스를 가지고 있지 않다면 클래스 추가

.hasClass() - 요소가 클래스를 가지고 있으면 true 반환, 가지고 있지 않다면 false 반환

<!DOCTYPE html>
<html lang="ko">
<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 src="js/jquery-3.6.0.min.js"></script>

    <style>
        .aqua{
            background-color: aqua;
        }

        .red{
            background-color: red;
        }

        .green{
            background-color: green;
        }

        .yellow{
            background-color: yellow;
        }
    </style>

    <script>
        $(function(){
            $("#p1").addClass("aqua");
            $("#p2").removeClass("red");
            $("#p3").toggleClass("green");
            $("#p4").toggleClass("green");
            $("#p6").text($("#p5").hasClass("yellow"));
        });
    </script>
</head>
<body>
    <p id="p1">내용1</p>
    <p id="p2" class="red">내용2</p>
    <p id="p3">내용3</p>
    <p id="p4" class="green">내용4</p>
    <p id="p5" class="yellow">내용5</p>
    <p id="p6"></p>
</body>
</html>

val(), prop()

val() - 요소의 value 값에 대해서 반환 혹은 새로운 value 값으로 변환

prop() - 선택한 태그의 속성값 반환

<!DOCTYPE html>
<html lang="ko">
<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 src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function(){
            $("#my_name").val($("#user_name").val());
        });
    </script>

</head>
<body>
    <p>
        <input type="text" name="user_name" id="user_name" value="홍길동">
    </p>
    <p>
        <input type="text" name="my_name" id="my_name">
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">

<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 src="js/jquery-3.6.0.min.js"></script>

    <script>
        $(function () {
            $("#st_1").prop("title", "단락 태그");
            $("#txt1").text($("#st_1").prop("title"));
            $("#txt2").text($("#st_1").prop("tagName"));
            $("#txt3").text($("#sel").prop("selectedIndex"));
        });
    </script>
</head>

<body>
    <p id="st_1">내용1</p>
    <p id="txt1"></p>
    <p id="txt2"></p>
    <select id="sel">
        <option value="naver">네이버</option>
        <option value="nate" selected="selected">네이트</option>
        <option value="daum">다음</option>
    </select>
    <p id="txt3"></p>
</body>

</html>

'jQuery > 기본' 카테고리의 다른 글

4. 객체 조작 - 예제 (0)	2022.06.09
4. 객체 조작 - 객체 편집 메서드 (0)	2022.06.09
4. 객체조작 - 수치조작 메소드 (0)	2022.06.08
step2 - 종합 (0)	2022.06.02
선택자 (0)	2022.05.31

'jQuery > 기본' 카테고리의 다른 글

티스토리툴바