프로그래밍/Javascript

[JAVASCRIPT/자바스크립트] 메소드(onclick/text/html/attr/appendTo)

Rolen 2022. 12. 6. 20:52 
<!DOCTYPE html>
<html>
<head>
    <title>Event Basic</title>
                <button id = "bt">버튼을 누르세요.</button>
    <script>
        window.onload = function () {
            const rbt = document.getElementById("bt");
            
            rbt.onclick = function () {     
                //load >> 이벤트 이름, 이벤트 타입 / 그 안의 속성 <function> 부터는 이벤트 핸들러, 이벤트 리스너
                this.innerHTML = this.innerHTML + "★"
                // this : current element (현재 선택된 요소)
            };
        }
    </script>
    
</head>
<body>
    <button id = "bt"버튼을 누르세요.></button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Text</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // text() 메소드와 html() 메소드의 리턴 값을 출력합니다.
            alert($('p').text()); // 전체 p 태그에서 전체 문서객체
            alert($('p').html()); // 전체 p 태그에서 첫 번째 문서객체
        });
    </script>
</head>
<body>
    <p>TestA</p>
    <p>TestB</p>
    <p>TestC</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Text</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.text-1').text('<h1>text() 메소드</h1>'); // .text() 내부에 태그가 있다면 태그도 문자로 인식
            $('.text-2').html('<h1>html() 메소드</h1>'); // .html() 내부에 태그가 있다면 태그를 적용
        });
    </script>
</head>
<body>
    <p class="text-1">TestA</p>
    <p class="text-1">TestA</p>
    <p class="text-2">TestB</p>
    <p class="text-2">TestB</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        // 웹 페이지를 모두 불러오면
        $(document).ready(function () {
            // img 태그에
            $('img').each(function (index, element) {
                // src 속성을 조작합니다.
                $(this).attr('src', 'https://via.placeholder.com/' + (index + 1) * 100 + 'x100');
                // attr() 메소드 -> img 태그 별 속성을 변경함. (반복으로 각 태그 속성값 변경)
            });
        });
    </script>
</head>
<body>
    <img />
    <img />
    <img />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Event</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        // 웹 페이지를 모두 불러오면
        $(document).ready(function () {
            // 0부터 255까지 반복문을 돌리고
            for (var i = 0; i < 256; i++) {
                // div 태그에 스타일을 적용해 body 태그에 추가합니다.
                $('<div></div>').css({
                    height: 2,
                    background: 'rgb(' + (255-i) + ',' + (103 - i) + ',' + i + ')'
                }).appendTo('body'); // body 태그에 추가
            }
        });
    </script>
</head>
<body>

</body>
</html>

 

728x90