yongyong-e

[jQuery] 문서 객체 다루기 - 1 본문

웹 프로그래밍/jQuery

[jQuery] 문서 객체 다루기 - 1

Yonghan Kim 2019. 9. 4. 10:58

0) 개요

jQuery의 css, attr, html, text 함수에 대한 정리

 

1) css 함수

1. (문자열, 문자열) 형태

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        // 1. Setter
        $("h1").css("color", "red")
        
        // 2. Getter
        var value = $("h1").css("color")
        alert(value)
    </script>
</body>
</html>

추가적으로 아래 처럼 함수를 사용하여 태그를 리스트로 가져와 사용할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <script>
        // 1. Setter
        var colors = ["red", "green", "blue"]
        $("h1").css("color", function (index) {
            return colors[index]
        })
        
        // 2. Getter - 일반적으로 첫 번째 태그의 요소만 가져옴
        var value = $("h1").css("color")
        alert(value)
    </script>
</body>
</html>

 

2. (객체) 형태

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        $("h1").css({
            "color": "red",
            "background-color": "black",
            "text-align": "center"
        })
        <!-- $("h1").css({
            color: "red",
            backgroundColor: "black",
            textAlign: "center"
        }) -->
    </script>
</body>
</html>

추가적으로 아래 처럼 함수를 사용하여 태그를 리스트로 가져와 사용할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
    <script>
        var colors = ["red", "green", "blue"]
        $("h1").css({
            "color": function (index) { return colors[index] }
        })
    </script>
</body>
</html>

 

2) attr 함수

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <img />
    <img />
    <img />
    <script>
        // 1. Setter
        $("img").attr("src", "http://placehold.it/100x100")
        $("img").attr({
            "src": "http://placehold.it/100x100",
            "alt": "test image"
        })
        $("img").attr({
            "src": function (index) {
                return "http://placehold.it/100x" + ((index + 1) * 100)
            }
        })

        // 2. Getter
        var value = $("img").attr("src")
        alert(value)
    </script>
</body>
</html>

 

3) html 함수

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <script>
        // 1. Setter
        $("h2").html("<img src='http://placehold.it/100x100' />Hello World")

        // 2. Getter
        var value = $("h2").html()
        alert(value)
    </script>
</body>
</html>

결과

 

4) text 함수

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 문서 객체 다루기 - 1</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <script>
        // 1. Setter
        $("h2").text("<img src='http://placehold.it/100x100' />Hello World")

        // 2. Getter - css 함수와는 다르게 모든 태그를 출력함
        var value = $("h2").text()
        alert(value)
    </script>
</body>
</html>

결과

 

저작자표시 비영리 변경금지

'웹 프로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] 이벤트 연결하기  (0) 2019.09.05
[jQuery] 문서 객체 다루기 - 3  (0) 2019.09.04
[jQuery] 문서 객체 다루기 - 2  (0) 2019.09.04
[jQuery] 문서 객체 생성 방법  (0) 2019.09.04
[jQuery] 라이브러리 사용 설정  (0) 2019.09.04
'웹 프로그래밍/jQuery' Related Articles more
Comments