[JQuery]

디지털 컨버전스/Java Script

[JQuery]

gimyeondong 2020. 4. 17. 16:12

JQuery
Javascript를 편하게 더 강력하게 사용하기 위한 Framework
Javascript > JQuery 기능상 자바스크립트의 범위가 더 넓다.

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

slim은 기능이 일부 생략 (에이작스)

minified 공백 줄바꿈 등 줄여놓기

<script
  src="https://code.jquery.com/jquery-3.5.0.js"
  integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
  crossorigin="anonymous"></script>

bootstrap cdn도 제이쿼리 포함

동일한 라이브러리를 중복해서 가져오면 충돌! 주의할것

jQuery.

$ 로 줄여서 쓴다.

$(선택자).함수();

jQuery 안에는 다 함수

document 는 객체, 인스턴스 : 변수에는 ""을 붙이거나 선택자를 쓰지 않음

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script>
            // $(선택자).함수();
            // document.getElementById("id").value = "abc";
            
            // window.onload = function()
            $(document).ready(function(){
                 $("#id").val("JQuery");
            });
        </script>
    </head>
    <body>
        <!--    JQuery 
Javascript를 편하게 더 강력하게 사용하기 위한 Framework
Javascript > JQuery 기능상 자바스크립트의 범위가 더 넓다. -->
        <input type="text" id="id">

    </body>
</html>

축약 한번 더 가능

            $(function(){
                 $("#id").val("JQuery");
            })

인자값을 안넣으면 getter

인자값 넣으면 setter

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script>
            $(function(){
                 $("#id").val();
            })          
        </script>
    </head>
    <body>

        <input type="text" id="id" value="JQuery Practice">

    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(function(){
                $("#pop").on("click",function(){
                    //document.getElementById("pop").html;
                    var result = $("#pop").html();
                    console.log(result);
                })
            })
        </script>
    </head>
    <body>
        <input type="text" id="id">
        <button id="pop"><b>Pop!</b></button>
    </body>
</html>

JQuery에는 on click 없음

			$("#pop").on("click",function(){})

정적바인딩 click

동적바인딩 on : 더 좋다.

            $(function(){
                $("#pop").on("click",function(){
                    //document.getElementById("pop").html;
                    var result = $("#pop").html();
                    console.log(result);
                })
            })

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script>
            $(function(){
                $("#pop").on("click",function(){
                    $(".box").css("background-color","pink");
                    $(".box").attr("class","test");
                })
            })
        </script>
        <style>
            div{border : 1px solid black;}
            .box{width: 200px; height: 200px;}
        </style>
    </head>
    <body>
        <input type="text" id="id">
        <button id="pop"><b>Pop!</b></button>
        <div class="box"></div>
    </body>
</html>

.css()

.attr