JavaScript

[JavaScript] jQuery 사용법

퓨어맨 2022. 5. 31. 09:02 
<!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>
</head>
<body>

    <ul>
        <li>유재석</li>
        <li>전소민</li>
        <li>이미주</li>
    </ul>
    
    <h1>jquery 배우기</h1>

    <h2>기분좋은 월요일~!</h2>
    
    <!-- jquery 적용시키기 -->
    <!-- 1. 직접 다운로드 받아서 로드하는 방법 -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- 2. CDN(Content Delivery Network)을 활용해서 로드하는 방법 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- integrity, crossorigin : 보안상 필요한 옵션(수정하지 말 것) -->
    <script>
        // 절대 jquery 파일 로딩하는 script 태그 안쪽에 코드 작성하지 말 것 !!
        // 태그에 여러개의 스타일을 적용시키는 방법
        // 1. 메소드 체인
        $('li').css('color','blue').css('font-size','50px').css('font-family','궁서')

        // 2. javascript의 객체 형태로 스타일 적용시키기
        // {'property' : '값', 'property2' : '값', ...}
        $('h1').css({'color':'red',
                    'font-family':'굴림'})

        // 3. javascript의 객체 형태로 스타일 적용시키기2
        $('h2').css({color:'orange',
                    fontFamily : '나눔고딕'})


    </script>

</body>
</html>