IT/프론트엔드

[jquery기초]jquery적용법(src,download)

삥뽕뺑뽕 2023. 1. 13. 00:04

안녕하세요 오늘은 간단하게 jquery적용법을 알아볼게요~!

jquery를 적용하는건 기본중 기본이지만 ~ 그래도 한번 알아볼게요

 

1.src로 주소지정해주기.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

요렇게 src로 주소를 지정해주면 jquery를 사용할 수 있습니다.

매우 간단하고, 용량을 차지 하지 않는 장점이 있지만,

인터넷이 연결되지 않은 환경에서는 사용할 수 없습니다.

웹디자이너기능사 시험에서는 서버연결이 안되어있기때문에 사용할 수 없다고합니다~!

 

2.download하여 적용 시키기

해당주소에 들어가서 Ctrl + s 키를 눌러서 내 pc에 저장해줍니다. 

적용할때는 html코드와 같은 위치에 있어야하고 그렇지 않으면 src로 파일 위치로 지정해주어야합니다.

 

 

jquery적용 간단한 예제로 확인하기

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
        //jquery라이브러리를 src로 주소 지정해줘야한다. 주소를 연결하지 않고 파일을 받아서 해도됨.
        function myFunc(){
            $("h1").css("color","red")
            //$(),css메서드
            //document.querySelector(h1).style.color="red"
        }
    </script>
</head>
<body>
    <h1>제목</h1>
    <button onClick="myFunc()">클릭</button>
</body>
</html>

1 방법을 이용해서 간단하게 확인해보았습니다.

버튼을 클릭하면 글자가 red로 바뀌는것을 확인할 수 있습니다.

밑에는 document로 한다면 어떻게 써야할지도 적어두었습니다.

 

코딩공부 화이팅 !~