JavaScript(jQuery)
jQuery 란?
자바스크립트를 짧고 더 편하게 사용할 수 있게 해주는 기능이예요.
jQuery를 사용하면 코드 양이 절반으로 줄어들게 되어서 빠르게 작성할 수 있어요.
React(jQuery를 좀 더 사용하기 쉽게 만들어준 기능)를 많이 배우고 있지만 아직까지는 jQuery가 더 많이 사용되며 jQuery로 개발된 사이트가 엄청 많기 때문에 공부하면 도움이 될 거예요.
2006년에 자바스크립트로 웹 개발을 하던 개발자가 자바스크립트 코드가 너무 길다고 생각을 했어요. 그래서 JS를 짧고 쉽게 작성할 수 있는 코드를 만들어서 쓰기 시작했고 그 코드를 웹에 올려서 공개를 했어요. 그렇게 공개된 코드가 jQuery예요.
jQuery 사용법
jQuery는 라이브러리를 설치해서 사용하시면 되요.
<script></script>태그 안에 개발 코드를 작성하셔도 사용할 수 있지만! 그 개발 코드가 1000줄이 넘어간다는점! 그대로 복붙하면 엄청나겠죠?
그래서 사용하는 방법이 CDN, 다른 사이트가 호스팅 해주는 js 파일을 가져와서 사용하는 것이예요.
CDN으로 jQuery를 설치하는 방법을 알려드릴께요.
< CDN으로 jQuery 설치하기 >
1. Google(구글)에서 jQuery cdn으로 검색을 해주세요.
2. 제일 처음에 보이는 jQuery CDN(http://code.jquery.com)으로 들어가 주세요. (혹은 주소 클릭)
3. 원하는 jQuery 와 버전을 찾아서 해당 버전 옆에 링크를 클릭하시면 <script></script>태그에 적인 소스를 보실 수 있어요.
* 다운 버전으로는 uncomprassed, minified, slim, slim minified 4가지가 있어요.
uncompressed : 그냥 원본 파일
minified : 공백 제거 버전
slim : 기능이 많이 빠진 라이트 버전
slim minified : 기능이 빠지고 공백 제거 버전
본인이 원하는 버전의 링크를 클릭하시면 되요.
저는 jQuery Core jQuery 3.x버전의 minified 버전을 사용했어요.
버전을 클릭해서 나오는 소스 <script> ~ </script>를 복사해서 사용하시면 되요.
jQuery 설치 소스의 위치
첫번째 방법, HTML의 <head></head>태그 안에 넣는다.
단, 그렇게 되면 웹 페이지의 로딩이 조금 더 걸릴 수 있어요. HTML은 위에서부터 한줄씩 읽기 때문에
위에서 읽으며 내려오다가 외부 js파일 발견하면 잠깐 멈추고 파일을 받아오게 되요. 그렇게 되면 웹사이트 로딩 오래걸리게 될 것이예요.
두번째 방법, HTML의 <body></body>태그 안에 넣는다.
<body></body>태그 안에서 제일 아래에 넣어주면 html 태그를 다 읽고 출력해준 후에 외부 js 파일을 받아오겠죠? 그러면 그만큼 웹사이트 로딩은 짧아지게되요.
jQuery 사용방법
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<h4 id="test">안녕하세요</h4>
<script>
document.getElementById('test').innerHTML = '???';
</script>저는 jQuery 설치 소스를 <head> 태그 안에 기록을 했어요.
JavaScript로 문구를 바꾸는 함수를 작성했어요. 그러면 이 함수를 jQuery로 변경을 해 볼께요.
<javaScript>
document.getElementById('test').innerHTML = '???';
<jQuery>
$('#test').html('안녕');코드가 매우 짧아졌죠? 이렇게 jQuery를 사용하면 길던 javaScript를 짧게 줄여서 사용할 수 있어요.
jQuery 코드를 하나씩 보도록 할게요.
$('css셀렉터') : 이 부분은 javaScript의 document.getElementById('아이디')와 같은 의미를 가지고 있습니다. css셀렉터 부분에 아이디명과 클래스명을 작성해주시면 되요. 아이디명과 클래스명을 작성할 때 앞에 # 혹은 . 작성해주셔야 되요. 아이디명일 때는 '#'을, 클래스명일 때는 '.' 를 앞에 적어주시면 되요.
id="test" -> #test / class="test" -> .test
.html('안녕') : 문구를 바꿔달라는 명령인데 우리가 사용하던 innerHTML이 아닌 html을 사용해 주셔야 해요. 혹은 text를 사용하셔도 문구는 바꾸실 수 있어요. HTML을 출력하고 싶으실 때는 .html() 혹은 .text()의 가로를 비워주시면 되요.
.css('color', 'red') : 스타일을 바꾸는 메소드예요. 구멍이 두개가 뚫려있는데 이를 css로 보시면 color:red;가 되요. 앞의 구멍에는 속성을 작성해주시고 뒤의 구멍에는 요소(색상, 폰트 등등)을 작성해주시면 스타일이 적용이 되요.
.attr('src', 'deddd') : 세부 속성을 변경하는 메소드예요. 이 메소드도 구멍이 2개이며 내가 바꾸고 싶은 속성을 앞의 구멍에 작성해주시고 어떻게 바꾸고 싶은지에 대한 요소를 뒤의 구멍에 작성해주시면 되요. attribute(이걸, 이렇게) 의 방식으로 적용된다고 생각하시면 되요.
jQuery 사용시 발생할 수 있는 에러
$ is not defined : jQuery를 제대로 불러오지 못해서 발생하는 에러입니다.
해결방법 : jQuery 설치 소스를 <head>태그 안에 넣어주시면 해결이 됩니다.
※ 에러 확인 방법
인터넷 창에서 키보드의 f12를 누르시면 개발자 도구를 보실 수 있습니다.
해당 개발자 도구에서 console을 보시면 에러를 확인하실 수 있습니다.
개발자도구 console 창에서 에러는 빨간색으로 표시되기 때문에 빠르게 에러를 찾으실 수 있습니다.
연습문제
< jquery.html >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<h4 id="test">안녕하세요</h4>
<script>
</script>
</body>
</html>* <head> 태그 안에 link 태그와 jQuery 설치 소스가 있어야 해요. (jQuery 설치 소스 위치는 <body>태그 안에 작성하셔도 되요. 원하시는 위치에 작성해 주세요.)
< main.css >
.yellow-bg{
background: yellow;
}문제) javaScript 혹은 jQuery로 jquery.html의 <h4> 태그에 yellow-bg라는 CSS class를 받아서 넣어보세요.
<문제 풀이>
$('#test').addClass('yellow-bg');
document.getElementById('test').classList.add('yellow-bg');두 가지 방법으로 class를 추가할 수 있어요.
Next > JavaScript(jQuery 2)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript(Bootstrap&UI) (0) | 2021.09.27 |
|---|---|
| JavaScript(jQuery 2) (0) | 2021.09.13 |
| JavaScript(document&DOM) (0) | 2021.09.09 |
| JavaScript (EventListener) (0) | 2021.08.06 |
| JavaScript (Parameter) (0) | 2021.08.05 |
