이로

jQuary 리뷰 01 본문

컴퓨터/jQuary

jQuary 리뷰 01

利路 2019. 6. 17. 19:07
반응형

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <!--jQuary사용할 수 있게해주는 스크립트-->
    <script>
        $(document).ready(function () {
            // $('*').css('color', 'red'); 0. 전체 선택자
            $('h1').css('color', 'orange'); // 1. 선택자 하나 색 입히기
            // 선택자 여러개 동시에 사용하고 싶으면 쉼표로 구분한다. 
            $('h2,h3').css('color', 'blue');  // 2. 선택자 여러개 선택해서 색 입히기
            $('#target').css('color', 'yellow'); // 3. 타겟 선택해서 색 입히기
            $('h4#target').css('color', 'green');  // 4. 타겟이 여러개 있을 경우, 정확한 태그명으로 찾아가게 하기.
            // HTML 웹 표준에서는 id속성은 HTML 페이지 내에서 유일한 값을 가져야 한다. 그러나 2개이상있어도 실행에 문제는 없다.
            //================
            $('.select').css('color','green'); // 5. 클래스에 select 있는 것들
            $('h1.item').css('background','blue'); //6. h1중 class에 item있는 것들
        });
    </script>
</head>

<body>
    <h1>Time to travel</h1><!-- 1 -->
    <h1>Let's go!!!</h1> <!-- 1 -->
    <h2>we are Programmer</h2><!-- 2 -->
    <h3>to day is the first day</h3> <!-- 2 -->
    <h3 id="target">으아악</h3> <!-- 3 선택자 두개에 동시에 걸린다. 이럴때는 마지막에 걸린것으로 결정된다.-->
    <h4 id="target">끄어엄</h4> <!-- 4 -->
    <p>====================</p>
    <h1 class="item">Header-0</h1><!-- 글자색 1 백그라운드 6-->
    <h1 class="item select">Header-1</h1><!--글자 색 5 백그라운드 6-->
    <h1 class="item">Header-2</h1>

</body>

</html>
반응형
저작자표시 비영리 변경금지

'컴퓨터 > jQuary' 카테고리의 다른 글

테이블 구조 변경없이 내용 좌우 반전  (0) 2019.12.04
'컴퓨터/jQuary' Related Articles more
Comments