안녕하세요 오늘은 간단하게 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로 한다면 어떻게 써야할지도 적어두었습니다.
코딩공부 화이팅 !~
'IT > 프론트엔드' 카테고리의 다른 글
| [React]JSX와 JSX문법 이해하기 ep.01 (0) | 2023.07.05 |
|---|---|
| [React] 리액트 시작하기, 설치하기 ep.00 (0) | 2023.07.05 |
| [React]크롬 도구를 활용해서 개발자도구에서 리액트 쉽게 확인하기 (0) | 2023.03.14 |
| [jquery기초]jquery를 활용하여 width,height 변경하기(클릭할때마다 커지는 my-div) (0) | 2023.01.13 |
| [JavaScript]라이브러리 모음,사용법 (0) | 2022.12.29 |