64일차 제이쿼리

쿠우·2022년 6월 27일
jquery
0

jQuery = 자바스크립트를 이용해 만든 라이브러리 언어

사용법
1.이렇게하면 로컬방식

  1. 우리는 cdn을 이용한 연결방식을 사용

▼기본적인 사용법(cdn연결/entry point 선언 및 script태그 위치)

<!DOCTYPE html>
<html lang="ko">
   
    <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">
        <link rel="" href="">
        <style>

        </style>
        <!-- cdn 연결 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        
        <script>
            // DOM tree가 브라우저 메모리에 완성되면(ready 이벤트),
            // 일련의 제이쿼리 코드를 실행하라!
            // jQuery Entry point 
            //$(선택자(내장객체))
            $(document).ready(function(){
                console.clear();
                console.log('document ready...');
            });//

            // 단축형
            $(function(){
                console.clear();
                console.log('document ready..2.')
            });
            $(function(){
                console.log()
            }

            )
        </script>
    </head>

    <body>

        
        <script>
            기본적인 스크립트의 위치는 여기다. 요소들을 다 읽고 난 후 처리하는 위치 
        </script>
    </body>
</html>

▼잘못된 사용법!

<!DOCTYPE html>
<html lang="ko">
   
    <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">
        <link rel="" href="">
        <style>

        </style>
        <!-- cdn 연결 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <script>
            //entry point를 준 jQuery
            $(function(){
                $('#txt').css('color', 'blue');
            });// .jq
             
            // jQuery의 잘못된 적용방법 -> entry point가 안되어있다
            $('#txt').css('color', 'blue');
            // css 메소드: 선택된 요소노드의 css스타일을 변경하는 제이쿼리 메소드
        </script>
    </head>

    <body>
        <p id="txt"> 내용</p>
    </body>
</html>

▼이런식으로 람다를 사용할 수도 있다.


<!DOCTYPE html>
<html lang="ko">
   
    <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">
        <link rel="" href="">
        <style>

        </style>
        <!-- cdn 연결 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        
        <script>
            $(function(){
                $("#title").css('color','red');
            }); //jq

            $(()=>{
                $("#title").css('color','blue');
            });

        </script>
    </head>

    <body>

        <h3 id="title"> 하잉</h3>
        

    </body>
</html>

▼jQuery의 핵심함수는 jQuery이다.

  • jQuery 는 $로 호출가능

<!DOCTYPE html>
<html lang="ko">
   
    <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">
        <link rel="" href="">
        <style>

        </style>
        <!-- cdn 연결 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <script>
            console.log('1. jQuery:' , jQuery);
            console.log('2. typeof  jQuery:' , typeof jQuery);
            console.log('3. jQuery instanceof Funtion: ' , jQuery instanceof Function);
        
            console.log('4. $:' , $);
            console.log('5. typeof  $:' , typeof $);
            console.log('6. $ instanceof Funtion: ' , $ instanceof Function);

            console.log('7. jQuery == $:', jQuery == $);
            console.log('8. jQuery === $:', jQuery === $);
        
            // jQuery 프로토타입이 무엇을 호출하는지 시그니쳐 확인 : 리턴타입이 JQuery
            jQuery() 
            // 개체의 무수히 많은 제이쿼리 메소드들은 다시 제이쿼리 개체를 반환한다.
            // 따라서 메소드 체이닝이 가능

            $(document).ready(function(params){
                console.log('- document.onload event handler invoked.');

                console.log('-params: ' , params, params ===jQuery, params===$);

                console.log(window.jQuery === window.$ , window.$ === jQuery, jQuery===$)
                // jquery 함수나 $함수나 window의 멤버가 된돠. 
                // jquery와 $는 같다. 
            })

        </script>
    </head>

    <body>

       
    </body>
</html>

▼ jQuery 요소선택자 사용

        
        <script>
            $(function(){
                $("h2").css('background-color','#ff0').css('border','2px solid #f00');
                // css메서드의 반환은 JQuery 여서 또 css를 추가할 수 있다.
            }); //jq

    
        </script>
    </head>

    <body>
        <h1>제이쿼리</h1>
        <h2 >선택자</h2>
        <h3>직접 선택자</h3>
    </body>

▼ jQuery 그룹선택자 사용

   <script>
            $(function(){
                
                // ,  << 그리고 라는 뜻/ 그룹 선택자
                $("h1, #tit3").css('background-color','#ff0').css('border','2px solid #f00');
                // css메서드의 반환은 JQuery 여서 또 css를 추가할 수 있다.
            }); //jq

    
        </script>
    </head>

    <body>
        <h1>제이쿼리</h1>
        <h2 >선택자</h2>
        <h3 id="tit3">직접 선택자</h3>
        <h3>인접 선택자</h3>
    </body>

▼ jQuery 선택된 선택자에 특정 클래스 지정선택

        <script>
            $(function(){
                
                // 소속 선택자 h1태그 중에 클래스속성명이 tit3 인 것!
                $("h1.tit3").css('background-color','#ff0').css('border','2px solid #f00');
                // css메서드의 반환은 JQuery 여서 또 css를 추가할 수 있다.
            }); //jq

    
        </script>
    </head>

    <body>
        <h1 class="tit3">제이쿼리</h1>
        <h2 >선택자</h2>
        <h3 class="tit3">직접 선택자</h3>
        <h3>인접 선택자</h3>
    </body>

▼ jQuery 선택자의 부모요소 선택


        <script>
            $(function(){
                // 선택자가 선택한 요소노드의 "부모요소"를 선택!
                $("#list_1").parent().css('background-color','#ff0').css('border','2px solid #f00');

            }); //jq

    
        </script>

▼ 후손선택자와 css저장 방식

        <script>
            $(function(){
                // 후손 선택자(공백으로 선택자를 구분) & css를 연관배열로 저장
                $("#wrap h1").css({
                    'background-color':'#ff0',
                    "border": "2px solid #f00"
                });

                //제대로 된 것은 이거와 같은 객체 리터럴 방식을 통해 만듬 
                $("#wrap h1").css({
                    backgroundColor:'green', // 카넬기법
                    border: "2px solid #f00"
                });
            }); //jq
        </script>

▼ 자식선택자 2가지방식


        <script>
            $(function(){
                // 자식 선택자
                $("#wrap > h1").css({
                    'background-color':'#ff0',
                    "border": "2px solid #f00"
                });

                //자식 선택자 
                $("#wrap h1").children().css({
                    backgroundColor:'green', // 카넬기법
                    border: "2px solid #f00"
                });
            }); //jq
        </script>

▼ 인접형제 요소 선택자(요고 유용해보인다)

        <script>
            $(function(){
                let style1 = {
                    backgruoundColor: "#0ff",
                    border: "2px solid green"
                }

                
                let style2 = {
                    backgruoundColor: "#ff0",
                    border: "2px solid yellow"
                }

                // 클래스 선택자 + 인접형제 요소 선택(prev) 메소드
                $('.txt').prev().css(style1);           //바로 윗 형을 선택 (prev)
                $('.txt + p').css(style2);              // 인접형제 선택자 (아랫동생)
                $('.txt').next().next().css(style2);    // 바로 아랫 동생 선택 (next)
            }); //jq
        </script>

▼인접 요소에서 모든 요소선택자(요고 유용해보인다)

        <script>
            $(function(){
                let style1 = {
                    backgruoundColor: "#0ff",
                    border: "2px solid green"
                };

                
                let style2 = {
                    backgruoundColor: "#ff0",
                    border: "2px solid yellow"
                };

                $('.txt').prevAll().css(style1);  //선택한 요소노드의 모든 형들을 선택   
                $('.txt').nextAll().css(style2);  // 선택한 요소노드의 모든 동생들을 선택

            }); //jq
        </script>

▼인접 요소에서 선택 노드 기준 지정된 요소 나올때까지 모든 것 선택(요고 유용해보인다)


        <script>
            $(function(){
                let style1 = {
                    backgruoundColor: "#0ff",
                    border: "2px solid green"
                };

                
                let style2 = {
                    backgruoundColor: "#ff0",
                    border: "2px solid yellow"
                };

                // 선택한 요소노드를 기준으로 , 지정된 형 요소가 나올때까지, 모든 형들을 선택
                $(".txt3").prevUntil(".title")
                .css(style1);

                // 선택한 요소노드를 기준으로, 지정된 동생 요소가 나올때까지 모든 동생들을 선택
                $(".txt3").nextUntil(".txt6")
                .css(style2);

            }); //jq
        </script>

▼ 지정한 부모요소가 나올때까지 모든 부모노드 선택 

        <script>
            $(function(){
                // 선택한 요소노드를 기준으로, 모든 부모요소 노드를 선택
                $(".txt1").parents()
                .css({
                    border:"2px solid blue"
                });

                // 선택한 요소노드를 기준으로, 모든 부모요소 노드를 선택하되, 
                // 지정된 요소가 나올때까지만
                $(".txt2").parents("div")
                .css({
                    border:"2px solid #f00"
                });
	

            }); //jq
        </script>

▼ 지정한 요소와 같은 가장 가까운 부모의 노드선택

        <script>
            $(function(){

                // 선택한 요소노드를 기준으로, 윗부모 요소노드를 찾되 지정된 가장 가까운 부모노드를 선택
                $(".txt1").closest("div")
                .css({
                    border:"2px solid #f00"
                });
	

            }); //jq
        </script>

▼ 인덱스가 생기는데 배열과도 같다. 

        <script>
            $(function(){
                // 요소 인덱스는 배열처럼 0부터 시작
                // 공백으로 구분한 후손 선택자 + 구조적 가상 클래스 선택자 (:even 짝수번째 요소노드만 선택)
                $("#menu li:even").css({ 
                    border:"2px solid black"
                });

                // 공백으로 구분한 후손 선택자 + 구조적 가상 클래스 선택자 (:odd 홀수번째 요소노드만 선택)
                $("#menu li:odd").css({
                    border:"2px solid #f00"
                });
	
	

            }); //jq

    
        </script>

오늘은 노드조작을 위해 css를 예로 보았지만 사실 css는 css파일에서만 해주는 것이 유지보수 측면에서 옳다하심!

css 선택자와 많이 비슷하다. 많이 알수록 조작할 때 편리하니까 좋긴하지만 중요한 것만 적어놓자

profile
쿠우
일단 흐자
이전 포스트

63일차! JS의 객체부분

다음 포스트

65일차 제이쿼리 선택자

0개의 댓글