yongyong-e

[jQuery] 문서 객체 생성 방법 본문

웹 프로그래밍/jQuery

[jQuery] 문서 객체 생성 방법

Yonghan Kim 2019. 9. 4. 09:31

1. CSS 선택자 사용

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 객체 생성</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1></h1>
    <script>
        $("h1").css("color", "blue")
        $("h1").html("Hello World")
    </script>
</body>
</html>

 

2. 태그 형태의 문자열 사용

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 객체 생성</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1></h1>
    <script>
        $("<h1></h1>")
            .appendTo("body")
            .css("color", "green")
            .html("Hello World")
    </script>
</body>
</html>

 

3. 문서 객체 사용

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 객체 생성</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
    <h1></h1>
    <script>
        var header = document.querySelector("h1")
        $(header).css("color", "blue")
        $(header).html("Hello World")
    </script>
</body>
</html>

 

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

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

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