09009

[JQuery] 문서 객체 선택 본문

Front-End/JQuery
[JQuery] 문서 객체 선택
09009

jQuery 라이브러리 설정

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

위 코드를 script 태그에 작성한다.

 

 

jQuery 라이브러리 메서드의 기본 형태

$(선택자).메서드(매개변수, 매개변수)

 

jquery 라이브러리를 사용하면 자바스크립트에서 했던 것보다 더 쉽게 문서 객체를 선택할 수 있다.

 

✍ 입력

<!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 src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function() {
            // 스타일 속성을 변경합니다.
            $('h1').css('color', 'red');
            $('h1').css('background', 'black');
        });
    </script>
</head>
<body>
    <h1>Harry kane</h1>
    <h1>Harry kane</h1>
    <h1>Harry kane</h1>
</body>
</html>

💻 출력 

querySelector() 메서드와 달리 문서 객체 여러 개를 한 번에 선택하고 document.querySelectorAll() 메서드와 다르게

반복문을 사용하지 않아도 된다.

 

 

'Front-End > JQuery' 카테고리의 다른 글

[JQuery] 무한 스크롤  (0) 2023.04.04
[JQuery] 문서 객체 생성과 추가  (0) 2023.04.04
[JQuery] 시각 효과  (0) 2023.04.04
[JQuery] 이벤트  (0) 2023.04.04
[JQuery] 문서 객체 조작  (0) 2023.04.03
'Front-End/JQuery' Related Articles more
Comments