<이공계기술전문연수> 1. jQuery(1일차)

<수업내용>

@JQuery

-> 존 레식에 의해 만들어진 JavaScript 프레임워크
-> 기본의 JavaScript를 사용하는 방법보다 훨씬 단순하고 간결한 코드 형태를 제공

#JQuery 가장 큰 특징
1. DOM과 관련된 처리를 쉽게 구현 가능
2. 일관된 이벤트 연결을 쉽게 구현
3. 시각적 효과를 쉽게 구현 가능
4. Ajax 애플리케이션을 쉽게 개발 가능

@jQuery 사용법
1.CDN방식 : 온라인으로 js파일을 불러와서 실행
2. 파일 다운로드 후 연결
https://code.jquery.com

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

innerHTML -> html() -> html('aaaa');
value -> val() -> val('aaa');

@선택자

@@기본선택자

$('선택자')
1. 전체 선택자 -> *$("*")
2. Element Selector
-> 지정된 tag와 일치하는 모든 element 선택
-> $("태그 이름") -> $("p"),$("h1")

3. Id Selector
-> 지정된 id와 일치하는 element 선택
-> $("#id")

4. Class Selector
-> 지정된 class와 일치하는 모든 element선택
-> $(". class")

5. Multiple Selector
-> $("선택자 1, 선택자 2")
-> 여러 선택자 동시 선택 시 사용

@자손/후손 선택자

@@자손 선택자 $("부모> 자식")
@@후손 선택자 $("부모 후손")

@속성 선택자

->기본선택자 뒤에 붙여 사용

요소[속성]
요소[속성=값]
요소[속성~=값] : 속성 안에 특정 값을 단어로 포함
요소[속성^=값] : 특정 값으로 시작하는
요소[속성$=값] : 특정 값으로 끝나는

@입력 양식 필터 선택자

-> input 태그는 type 속성에 따라 문서 객체 선택 가능

input:button
input:checkbox
input:file
input:image
input:password
input:radio

input:checked -> input 태그 중 체크된 객체 선택
input:disabled -> input 태그 중 비활성화된 객체 선택
input:enabled -> input 태그 중 활성화된 객체 선택
option:selected -> select태그의 option 태그 중 선택된 객체 선택

@위치 관련 선택자

요소:odd ->홀수 번째에 위치한 객체 선택
요소:even ->짝수 번째에 위치한 객체 선택
요소:first ->첫 번째 위치한 객체 선택
요소:last ->마지막에 위치한 객체 선택

@함수 형태의 필터 선택자

요소:eq(n) :n번째 위치하는 객체 선택
요소:gt(n) :n번째 초과하는 객체 선택
요소:lt(n) :n번째 미만에 위치하는 객체 선택
요소:has(h1) :h1태그를 가지고 있는 객체 선택
요소:not(선택자):선택자와 일치하지 않는 객체 선택
요소:nth-child(3n+1):3n+1번째에 위치하는 객체 선택(1,4,7,...)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>    
</head>
<body>
<!--
    <script>
        function test(){
            var test =
                document.getElementsByClassName("test");
                for(var i=0; i<test.length; i++){
                    test[i].style.color="red";
                }
            
        }
        
    </script>
-->
    <p id="p1" class ="test">test1</p>
    <p id="p2" class ="test">test2</p>
    <p id="p3" class ="test">test3</p>
    <p id="p4">test4</p>
    <span id="span1" class="test">test5</span><br>
    <span id="span2">test6</span>
  
<!--    <button onclick="test();">글자색변경</button>-->
    <script>
        $(document).ready(function(){
//            $("*").css('color','red');
            $('span').css('background-color','yellow');
            $('#p4').css('background-color','skyblue');
            $(".test").css('text-decoration','underline');
            $("#p2,#p3").css('background-color','pink');
        
            $("li>h1").css("color","blue");
            $("div h1").css("background-color","yellow");
            
        });
        
        
        
//        window.onload=function(){
//            
//        }
//        $(document).ready(function(){
//            
//        });
//        $(function(){
//            
//        });
//        
//    function test(){
//            $(".test").css('color','red');
//        }
    </script>
    
    <br><br>
    <div>
        <ul>
            <li><h1>Test1</h1></li>
            <li>Test2</li>
            <li>Test3</li>
            <li>Test4</li>
        </ul>
        <h1>Test5</h1>
    </div>
    
    <input type="text" name="id"><br>
    <input type="password" name="pw"><br>
    <script>
        $(function(){
            $("input[type=text]").css('background-color','red');
        });
        function sel(){
            var value = 
                $("select>option:selected").val();
            alert(value);
        }
    </script>
    <select>
        <option>AAAA</option>
        <option>BBBB</option>
        <option>CCCC</option>
        <option>DDDD</option>
    </select>
    <button type="button" onclick="sel();">클릭</button>
    <br><hr><br>
    <script>
        $(function(){
            $("tr:odd").css('color','red');
            $("tr:even").css('background-color','gray');
            $("tr:first").css('color','black').css('background-color','white');
            $("tr:last").css({
                'color':'red',
                'background-color':'yellow'
            });
            
            $("#tbl>tbody>tr:eq(0)").css("background","black").css("color","white");
            $("#tbl td:nth-child(3n+1)").css('background','green');
            $("#tbl td:nth-child(3n+2)").css('background','blue');
        })
    </script>
    <table>
        <tr><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>2</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>3</td><td>3</td></tr>
    </table>
    <br><br><br><br><br>
    <table id="tbl">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>        
        </tr>
        <tr><td>2</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>3</td><td>3</td></tr>
        <tr><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>2</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>3</td><td>3</td></tr>
    
    </table>
    <br><br><hr><br><br>
    
    <h3 class="hh">Header-0</h3>
    <h3 class="hh">Header-1</h3>
    <h3 class="hh" name="test">Header-2</h3>
    <h3 class="hh">Header-3</h3>
    <script>
        $(function(){
            var select = $(".hh");
            
            select.first().css('background','yellow');
            select.last().css('background','blue');
            select.eq(1).css('color','red');
            select.filter("[name=test]").css('color','green');
            
            select.not("[name=test]").css('text-decoration','underline');
        });
    </script>

  
    
</body>
</html>

@JQuery Traversing
-> 순회(탐색)
-> 특정 요소를 찾거나 필터링하는 작업은 대부분 선택자를 사용하면 됨
하지만 1차적으로 선택자에서 찾은 요소들을 2차 필터링하거나
새로운 요소를 추가할 때 Traverse 관련 메서드를 사용하면 됨

@@first()
->선택된 요소중 가장 첫 번째 요소

@@last()
->선택된 요소중 가장 마지막 요소

@@eq(0)
-> 인덱스 번호화 일치하는 요소

@@filter(인자 값)
-> 선택자 1.filter(선택자 2);
-> 선택자 1로 불러온 요소 중에 선택자 2인 요소

@@not(인자 값)
-> 인자 값과 일치하지 않는 요소만

@Ancestors 메서드(조상)
-> 선택된 요소의 상위 요소들을 선택할 수 있는 메서드

@@$(선택자). parent()
-> 선택된 요소의 바로 위 상위 요소만 리턴

@@$(선택자). parent([인자])
-> 매개변수가 없는 경우 선택된 요소의 모든 상위 요소 리턴
-> 매개변수가 있으면 매개변수와 일치하는 조상만 리턴

@@$(선택자). parentsUntil(인자)
->선택된 요소부터 인자 요소(포함 X)까지 범위 요소 리턴
->선택된 요소는 제외

@ Descendants 메서드
->선택된 요소의 하위 요소들을 선택할 수 있는 메서드

@@ $(선택자). children([인자])
-> 선택된 요소의 모든 자손(다음 레벨) 객체를 리턴
-> 선택된 요소의 인자와 일치하는 자손(다음 레벨) 객체

@@ $(선택자). find(인자)
-> 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴

@ siblings 메서드
-> 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메서드

@@ $(선택자). siblings([인자])
-> 선택된 요소와 같은 레벨에 있는 요소 리턴
-> 선택된 요소와 같은 레벨 중 인자와 일치하는 요소 리턴

@@ $(선택자). next(), $(선택자). nextAll(), $(선택자). nextUntil(인자)

next() : 선택된 요소의 같은 레벨들 중 선택된 요소 다음의 한 개
nextAll() : 선택된 요소의 같은 레벨들 중 선택된 요소 다음의 모든 요소
nextUntil(인자) : 선택된 요소부터 같은 레벨들 중 인자까지 범위의 모든 요소

@@$(선택자). prev(),$(선택자), prevAll(),$(선택자). prevUntil(인자)

prev() : 선택된 요소의 같은 레벨들 중 선택된 요소 이전의 한 개 요소 리턴
prevAll() : 선택된 요소의 같은 레벨들 중 선택된 요소 이전의 모든 요소를 리턴
prevUntil(인자) : 선택된 요소의 같은 레벨들 중 선택된 요소로부터 인자 사이의 요소를 리턴

@@$(선택자). is(인자)
-> 선택된 요소의 범위 내에 인자와 동일한 요소가 있는지 찾아서 true/false를 리턴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <style>
        .ancestors *,.descendants *,.siblings *{
            display : block;
            border: 2px solid lightgray;
            color : lightgray;
            padding: 5px;
            margin : 15px;
            
        }
    </style>
    
</body>
    <div class="ancestors">
        <div style="width: 500px;">div(great-grandparent)
        <ul>ul(grandparent)
            <li>li(direct parent)
                <span>span</span>
            </li>
        </ul>
        </div>    
    
    
        <div style="width: 500px;">div(grandparent)
            <p>p(direct parent)
                <span>span</span>
            </p>
        </div>
    </div>
    
    <script>
        $(function(){
//            $("span").parent().css("border","2px solid red");
//            $("span").parents().css("border","2px solid red");
//            $("span").parents("ul").css("border","2px solid red");
//            $("span").parentsUntil("div").css("border","2px solid red");
//            $(".descendants").children(".child1").children().css("border","2px solid red");
//            $(".descendants").find("span").css("border","2px solid red");
            
//            $(".siblings h2").siblings().css("border","2px solid red");
//            $(".siblings h2").siblings("p").css("border","2px solid red");
//            $(".siblings h2").next().css("border","2px solid red");
//            $(".siblings h2").nextAll().css("border","2px solid red");
//            $(".siblings h2").nextUntil("h6").css("border","2px solid red");
            $(".siblings h2").prev().css("border","2px solid red");
//            $(".siblings h2").prevAll().css("border","2px solid red");
//            $(".siblings h2").prevUntil().css("border","2px solid red");
            
        });
    </script>
    
    <div class="descendants" style="width: 500px;">div(current element)
        <p class="child1">p (child)
            <span class="child1">span (grandchild)</span>
        </p>
        <p class="child2">p (child)
            <span>span (grandchild)</span>
        </p>
    </div><br><br><br>
    
    <div class="siblings">
        <div>div (parent)
            <p>p</p>
            <span>span</span>
            <h2>h2</h2>
            <h3>h3</h3>
            <h4>h4</h4>
            <h5>h5</h5>
            <h6>h6</h6>
            <p>p</p>
        </div>
    </div>
    <br><br><br>
    <script>
        $(function(){
            //each 각각의 요소에 접근
            //this 는 각각의 요소를 말함
            
            $(".isTest>h3").each(function(){
                if($(this).is(".select")){
                            
                    $(this).css("color","red");
                }     
            });
        });
    </script>
    
    <div class="isTest">
        <h3 class="select">Test1</h3>
        <h3>Test2</h3>
        <h3>Test3</h3>
        <h3 class="select">Test4</h3>
    </div>
</html>

@each 메서드

-> 배열을 관리하는 for in문과 비슷한 메서드로 객체나 배열의 요소를 검사하는 메서드
-> index : 객체, 배열의 순번
-> item : 값을 보관하는 변수, '.'으로 접근

1)$. each(배열 이름, function(index, item){실행 로직});
-> 지정한 배열을 0번부터 자동으로 불러와 순번을 index에 넣고, 값을 item에 넣는 메서드
-> 단, item은 jQuery객체 형태가 아니기 때문에 jQuery메서드를 사용할 수 없음

@@ addClass() 메서드
-> 문서 객체에 class 속성을 추가하는 메서드

@@ removeClass() 메서드
-> 문서 객체에 class 속성을 제거하는 메서드

@@문서 객체의 속성 검사
-> 문서 객체의 속성을 메서드를 통해서 검사할 수 있음

@@ attr() 메서드

@ 문서 객체의 스타일 검사 및 추가

@@ CSS() 메서드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <script>
        $(function(){
           $("#btn1").click(function(){
              var arr = $(".test1>li");
               $.each(arr,function(index,item){
                  alert("인덱스 번호 : " + index + " / 값 : " + item.innerHTML); 
               });
           }); 
            $("#btn2").click(function(){
               $(".test1>li").each(function(index,item){
                    alert("인덱스 번호 : " + index + " / 값 : " + item.innerHTML); 
               });
                
            });
            $(".test1>li").click(function(){
//                alert($(this).html());
                alert($(this).index());                     //인덱스 번호호출
            });
        });
    </script>
    <button type="button" id="btn1">목록 가져오기</button>
    <button type="button" id="btn2">목록 가져오기</button>
    <ul class="test1">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        
    </ul>
    <br><br><hr><br><br>
    <script>
        $(function(){
            $("#btn3").click(function(){
                $(".classTest").children().first().addClass("textChange");
            });
            $("#btn4").click(function(){
                $(".classTest").children().first().removeClass("textChange");    
            });
        });
    </script>
    
    <style>
        .textChange{
            font-size: 40px;
            color: red;
        }
    </style>
    <button type="button" id="btn3">클래스 추가</button>
    <button type="button" id="btn4">클래스 제거</button>
    
    <div class="classTest">
        <p>클래스 테스트 1</p>
        <p>클레스 테스트 2</p>
    </div>
    <br><br><br>
    <img id="img" src="image/wz_1_5_1_1522134274.jpg" width="300px" height="300px">
    <br>
    <button type="button" id="btn5">파일 이름</button><br>
    <button type="button" id="btn6">파일 크기</button><br>
    <button type="button" id="btn7">이미지 키우기</button><br>
    <button type="button" id="btn8">속성 지우기</button><br>
    
    <script>
        $(function(){
           $("#btn5").click(function(){
               var img =$("#img").attr("src")
               alert(img);
           });
           $("#btn6").click(function(){
               var width =$("#img").attr("width");
               var height =$("#img").attr("height");
               alert("width : " +width+" / height : " +height); 
           });
            
            $("#btn7").click(function(){
               $("#img").attr("width",500);
                $("#img").attr("height",500);
            });
            
            $("#btn8").click(function(){
               $("#img").removeAttr("width");
                $("#img").removeAttr("height");
            });
            
            $("#btn9").click(function(){
                alert($(".first").css('color'));
                alert($(".second").css('color'));
                alert($(".third").css('color'));
                $(".first").css("background-color","skyblue");
            });
        });
        
    </script>
    <br><br><hr><br><br>
    <button type="button" id="btn9">스타일 확인하기</button><br>
    <h1 class="first">Test1</h1>
    <h1 class="second">Test2</h1>
    <h1 class="third">Test3</h1>
    <style>
        .first{
            color : red;
        }
        .second{
            color : pink;
        }
        .third{
            color : orange;
        }
    </style>
</body>
</html>

<<실습>>

문제1.
학생정보 출력 버튼을 클릭시 테이블에 있는 학생 정보가
fieldset 안에 출력되도록 만드시오! ($.each 사용)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>    
    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
    
문제1. <br>
학생정보 출력 버튼을 클릭시 테이블에 있는 학생 정보가 <br>
fieldset 안에 출력되도록 만드시오! ($.each 사용) <br>
<table border="1px">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>주소</th>
    </tr>
    <tr><td>홍길동</td><td>20</td><td>서울시</td></tr>
    <tr><td>김말똥</td><td>30</td><td>경기도</td></tr>
    <tr><td>고길똥</td><td>40</td><td>강원도</td></tr>
    <tr><td>김지똥</td><td>50</td><td>인천광역시</td></tr>  
</table>

<fieldset style="height:200px;width:500px;">
    <legend>출력</legend>
    <span id="span1"></span>
</fieldset>

<button id="btn">학생정보 출력</button>
    
    <script>
        $(function(){
           $("#btn").click(function(){
            var arr = $("tr"); //tr table > tr 무슨차이임
            var str = "";
//               for(String str : arr)     str = item
               $.each(arr,function(index,item){
                   if(index>0){
                       var name =
                       $(item).children().eq(0).html(); 
                       var age =
                       $(item).children().eq(1).html(); 
                       var addr = 
                       $(item).children().eq(2).html(); 
                       str += (index)+"번째 학생 이름 : "+name+"/나이 : "
                           +age+"/주소 : "+addr+"<br>";
                            
                   }
               });
               $("#span1").html(str);
                });
        });
                           
                            
        
    </script>



</body>

</html>

문제2.
적용 버튼 클릭시 style이 적용될 수 있도록 하여라.
취소 버튼 클릭시 style이 취소될 수 있도록 하여라.
(css 코드는 변경하지 않도록 함)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>

<style>
    .title {
        background-color : black;
        color:white;
    }
    .name {
        background-color:yellow;
    }
    .age{
        background-color:blue;
    }
    .addr{
        background-color:grey;
    }
</style>
문제2. <br>
적용 버튼 클릭시 style이 적용될 수 있도록 하여라.<br>
취소 버튼 클릭시 style이 취소될 수 있도록 하여라.<br>
(css 코드는 변경하지 않도록 함) <br>

<table border="1px">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>주소</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>20</td>
        <td>서울시</td>
    </tr>
    <tr><td>김말똥</td><td>30</td><td>경기도</td></tr>
    <tr><td>고길똥</td><td>40</td><td>강원도</td></tr>
    <tr><td>김지똥</td><td>50</td><td>인천광역시</td></tr>  
</table>

<button id="btn2">적용</button>
<button id="reset">취소</button>

    <script>
        $(function(){
               var title = $("tr").eq(0);
               var td1 = $("td:nth-child(3n+1)");
               var td2 = $("td:nth-child(3n+2)");
               var td3 = $("td:nth-child(3n+3)");
               $("#btn2").click(function(){
                   title.addClass("title");
                   td1.addClass("name");
                   td2.addClass("age");
                   td3.addClass("addr");
//               var td1 = $("td").filter(function(index){
//                   return index%3==0;
//               alert(td1);
//               alert(td1.length); 12개 잡힘
              });
            
            $("#reset").click(function(){
                title.removeClass("title");
                td1.removeClass("name");
                td2.removeClass("age");
                td3.removeClass("addr");
            });
              
           });
            
      
    </script>



</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
<style>
   .test *{
        display:block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 3px;
        margin: 15px;
    }
</style>
    

<div class="test">
    <div>
      난 부모 
       <ul>
           <li>당근</li>
           <li>김치</li>
           <li>오이</li>
           <li>양배추</li>
           <li>파푸리카</li>
       </ul>
        
        <p id="pp">
            <span id="pica">피카츄</span>
            <span>파이리</span>
            <span>꼬부기</span>
        </p>
        <p>난 뭐임?</p>
    </div>
</div>




문제1. 아래의 버튼을 클릭하였을때 p태그(id=pp)를 중점으로 당근을 <br>
선택하여 빨간색 배경으로 만들어 보아라.
<button onclick="action1();">작동1</button><br><br>

문제2. 아래의 버튼을 클릭하였을때 ul태그를 중점으로 파이리를 <br>
선택하여 빨간색 배경으로 만들어 보아라.
<button onclick="action2();">작동2</button><br><br>

문제3. 아래의 버튼을 클릭하였을때 span 태그(id="pica")를 중점으로 <br>
ul과 p태그를 감싸고 있는 div 의 테두리를 파란색으로 만들어 보아라.
<button onclick="action3();">작동3</button><br><br>


문제4. 아래의 버튼을 클릭하였을때 div태그(class="test")를 이용하여<br>
당근,김치,오이,양배추,파푸리카가 console.log에 출력 되도록 <br>
만들어 보아라. (JS 에서 innerHTML은 jQuery에선 html() 입니다.)
<button onclick="action4();">작동4</button><br><br>

    <script>
       function action1(){
            $("#pp").siblings().children().first().css("border","2px solid red");
            
//           $("#pp").siblings('ul').children().first().css("border","2px solid red");

        };
        function action2(){
            $("ul").siblings().children().eq(1).css("border","2px solid red");
        }
        function action3(){
            $("#pica").parents().eq(1).css("border","2px solid blue");
        }
        function action4(){
            var li = $(".test").find("li"); //배열형태
            console.log(li);
            
            for(var i=0; i<li.length; i++){
                console.log(li.eq(i).html());
            }
            
            
        }
    
    </script>



</body>

</html>

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

<이공계기술전문연수> 3. jQuery(3일차) (0)	2019.09.26
<이공계기술전문연수> 2. jQuery(2일차) (0)	2019.09.25
<이공계전문기술연수> 3. JavaScript(3일차) (0)	2019.09.25
<이공계전문기술연수> 2. JavaScript(2일차) (0)	2019.09.24
<이공계전문기술연수> 1. JavaScript(1일차) (0)	2019.09.22

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

<이공계기술전문연수> 1. jQuery(1일차)

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역