220708 - 자바스크립트 - DOM 제어 / 제이쿼리

지고르 2022. 7. 11. 10:27

DOM 요소 제어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        legend{
            font-size: 1.2em;
            font-weight: bold;
            margin-left: 20px;
        }
        form{
            width: 520px;
            height: auto;
            padding-left: 10px;
            margin: 50px auto;
        }
        fieldset{
            border: 1px solid #ccc;
            padding: 30px 20px 30px 30px;
            margin-bottom: 35px;
        }
        .field{
            float: left;
            width: 60px;
            font-weight: bold;
            font-size: 0.9em;
            line-height: 55px;
            text-align: right;
            margin-right: 15px;
        }
        .input-box{
            width: 350px; /*정렬*/
            height: 35px;
            border: 1px solid #ccc;
            padding: 5px;
            margin: 10px 0;
            float: left;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload=function(){
            var check=document.querySelector('#shippingInfo');
            check.addEventListener('click',function(){
                if (this.checked==true){
                    // document.querySelector('#shippingName').value=document.querySelector('#billingName').value;
                    // document.querySelector('#shippingTel').value=document.querySelector('#billingTel').value;
                    // document.querySelector('#shippingAddr').value=document.querySelector('#billingAddr').value;
                    //name 으로 백엔드 연결하기 (queryselector 필요 X)
                    document.ship.shippingName.value=document.order.billingName.value;
                    document.ship.shippingTel.value=document.order.billingTel.value;
                    document.ship.shippingAddr.value=document.order.billingAddr.value;
                } else {
                    //document.querySelector('#shippingName').value='';
                    //document.querySelector('#shippingTel').value='';
                    //document.querySelector('#shippingAddr').value=''; 
                    document.ship.shippingName.value='';
                    document.ship.shippingTel.value='';
                    document.ship.shippingAddr.value='';               
                }
            });
        }
    </script>
</head>
<body>
    <div id="container">
        <form action="" name="order">
            <fieldset>
                <legend>주문 정보</legend>
                <ul>
                    <li>
                        <label class="field" for="billingName">이름 : </label>
                        <input type="text" class="input-box" id="billingName" name="billingName">
                    </li>
                    <li>
                        <label class="field" for="billingTel">연락처 : </label>
                        <input type="text" class="input-box" id="billingTel" name="billingTel">
                    </li>
                    <li>
                        <label class="field" for="billingAddr">주소 : </label>
                        <input type="text" class="input-box" id="billingAddr" name="billingAddr">
                    </li>
                </ul>
            </fieldset>
        </form>
        <form action="" name="ship">
            <fieldset>
                <legend>배송 정보</legend>
                <ul>
                    <li>
                        <input type="checkbox" id="shippingInfo" name="shippingInfo">
                        <label for="shippingInfo" class="check">주문 정보와 배송 정보가 일치합니다</label>
                    </li>
                    <li>
                        <label class="field" for="shippingName">이름 : </label>
                        <input type="text" class="input-box" id="shippingName" name="shippingName">
                    </li>
                    <li>
                        <label class="field" for="shippingTel">연락처 : </label>
                        <input type="text" class="input-box" id="shippingTel" name="shippingTel">
                    </li>
                    <li>
                        <label class="field" for="shippingAddr">주소 : </label>
                        <input type="text" class="input-box" id="shippingAddr" name="shippingAddr">
                    </li>                 
                </ul>
            </fieldset>
        </form>
    </div>
</body>
Colored by Color Scripter

cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    <script>
        function displaySelect(){
            var selectMenu=document.testForm.class; 
 //폼 안 select 요소를 변수에 전달
            var text=selectMenu.options[selectMenu.selectedIndex].innerText;
 //select 집합 중 선택된 인덱스를 변수에 전달
            alert('['+text+']를 선택했습니다.'); 
        }
    </script>
</head>
<body>
    <form action="" name="testForm">
        <p>
            <label>학과</label>
            <select name="class" onchange="displaySelect();">
                <!--onchange: select 버튼 클릭했을 때-->
                <option value="archi">건축공학과</option>
                <option value="mechanic">기계공학과</option>
                <option value="indust">산업공학과</option>
                <option value="elec">전자공학과</option>
                <option value="computer">컴퓨터공학과</option>
                <option value="chemical">화학공학과</option>
            </select>
        </p>
    </form>
</body>
Colored by Color Scripter

cs

jQuery

: 자바스크립트 라이브러리 (자바스크립트 기반 언어)
=> DOM용 / DOM 쉽게 제어하지만 속도가 느림
=> for, if문 등은 수행 못하므로 자바스크립트와 혼용 사용

다운로드 방식
1. CDN 링크 복사 (인터넷 필수)
2. 파일 다운

기본 문법

$('선택자').메서드();

$ => jQuery 식별자

선택자에 따옴표 필수 => 안 하면 변수로 인식

ex.

$(p) => p변수

$('p') => p 태그

문제 : h1 클릭 시 문구/색 변화

===>jQuery로 제어

<script src="js/jquery-3.6.0.min.js"></script>   
    <script>
        //$(document).ready(function(){ //window.onload=function(){
        $(function(){ //(document).ready는 생략 가능
        //body 안 문서가 준비(읽어오기)되면 function 수행
            $('h1').click(function(){
                $(this).css('color','red').html('코로나 퇴치 완료');
                //선택한 this의 css 속성 수정 & innerHTML 수정
                //this: click한 주체, 자신 / css, html : 메소드 / 하나의 선택자에 여러 메소드 => 메소드 체인
            });
        });
    </script>
</head>
<body>
    <h1>서울 코로나 바이러스</h1>
    <h1>경기 코로나 바이러스</h1>
</body>

jQuery - 선택자

$('*') => 전체 선택자
$('p') => 태그 선택자 (p)
$('#') => id 선택자
$('.') => class 선택자

자식 선택자, 후손 선택자

필터 선택자

: 선택지들 필터링하는 선택자

:selected

select문에서 선택된 option

위치 필터 선택자

:even 짝수
:odd 홀수
:first 첫번째 요소
:last 마지막 요소

    <script>
        $(function(){
            $('li:even').css('background','green');
            $('li:odd').css('background','beige');
            $('li:first').css('background','#f3f3f3');
            $('li:last').css('background','#beige');
            $('tr:odd').css('background','#cef279'); //0부터 시작
            $('tr:even').css('background','#ffb2d9'); //0부터 시작
            $('tr:first').css('background','#000').css('color','#fff'); //짝수 선택자 코드 뒤에 배치해야 함 (선택 범위 겹치므로)
            $('tr:last').css('background','#ccc');
        });
    </script>
    </script>
</head>
<body>
    <h2>동물의 세계</h2>
    <ul>
        <li>사자</li>
        <li>코끼리</li>
        <li>표범</li>
        <li>거북이</li>
        <li>기린</li>
        <li>악어</li>
    </ul>
</body>

함수 필터 선택자

:eq(인덱스) => 전달받은 인덱스에 해당하는 요소 선택 (-1: 마지막, 0: 처음)
:lt(인덱스) => 해당 인덱스 미만의 요소 선택 (less than)
:gt(인덱스) => 해당 인덱스 초과하는 요소 선택 (greater than)
:contains(문자열) => 해당 문자열 포함하는 요소 선택
:nth-child => 1부터 숫자 시작 (cf. :odd, :even => 0부터 숫자 시작)

jQuery - 메소드

메소드 체인

: 하나의 선택자에 메소드 여러개 연결

$(this).css('color','red').css('background','yellow').css('border','1px solid blue');

=> 같은 메소드는 객체로 묶을 수 있음

=>
              $('h1').hover(function(){
                $(this).css({
                    color : 'red',
                    background : 'yellow',
                    border : '1px solid red'
                });

이벤트성 메소드

hover

$('선택자').hover(함수1,함수2);
//함수1: 마우스 올릴 때 / 함수2: 마우스 떠날 때