[jQuery] jQuery 기본이해 / 스크립트파일작성방법
2020. 11. 19. 16:27ㆍ프론트엔드/jQuery
728x90
라이브러리
자주사용하는 기능화 효과(그들을 실행하는 프로그램)을 Javascript코드로 미리 만들어 두고 재활용할 수 있게 한 것
jQuery 특징
스크립트 코드보다 먼저 라이브러리 선언을 해주어야 함
문법이 간결함
사용하기 쉬움
빠르게 배울 수 있음
다른 라이브러리들과 충돌을 일으키지 않음
다야한 플러그인이 존재함
브라우저 호환성 문제를 해결해줌
MIT and GPL licenses
jQuery라이브러리 다운로드
url : code.jquery.com/
jQuery 1.x 버전까지만 IE9를 지원함 (jQuery 2.x, 3.x ,... IE9 지원안함)
uncompressed : 압축안된버전이므로 용량이 크고 로드시 느림, 주석이 상세함 , 코드이해하기 좋음
minified : 압축된버전이므로 로드할 때 사용, 코드 이해불가
jQuery 스크립트 파일 작성방법
기본 인라인태그로 스크립트 코드 작성시1
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Create jquery Sample</title>
</head>
<body>
<header class="page-header" role="banner">
<h1>Create jquery Sample</h1>
</header>
<div class="page-main" role="main">
<div id="typo">
<div class="inner">Creative jQuery</div>
</div>
</div>
<!--
</head>태그 안에 하단 코드를 먼저 작성시 html태그 로드가 안된 상태에서
실행되므로 하단 태그가 실행되지 않음
따라서 인라인스크립트 코드 작성시 html태그가 다 로드된 상태에서 실행되야 하므로
</body>바로 위에 스크립트코드 작성해야 더 빠르게 정상적으로 실행 가능
-->
<!-- jQuery 라이브러리를 반드시 본인이 작성한 코드보다 위에 작성해야함-->
<script
src="http://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
//document.getElementsByTagName('h1')[0].style.color='red';//vanilla JS사용시
$('h1').css({'color':'red'});
</script>
</body>
</html>- jQuery라이브러리를 본인이 작성한 코드보다 반드시 먼저 로드를 해주어야 jQuery 사용가능
- 인라인태그로 html페이지 내에 스크립트 코드 작성시에는 '</body>'태그 바로 앞에 작성해주어야 정상적으로 빠르게 실행됨(html이 모두 로드된 상태에서 스크립트를 실행해야 하기 때문)
기본 인라인태그로 스크립트 코드 작성시2
$(document).ready(function(){}); 사용
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Create jquery Sample</title>
<!--
</head>태그 안에 하단 코드를 먼저 작성시 html태그 로드가 안된 상태에서
실행되므로 하단 태그가 실행되지 않음
따라서 인라인스크립트 코드 작성시 html태그가 다 로드된 상태에서 실행되야 하므로
</body>바로 위에 스크립트코드 작성해야 더 빠르게 정상적으로 실행 가능
-->
<!-- jQuery 라이브러리를 반드시 본인이 작성한 코드보다 위에 작성해야함-->
<!-- 스크립트태그내에 'docuemnt(HTML)로드완료시'를 나타내주는 코드를 작성시
<head>태그안에서 스크립트코드 정상적으로 사용가능-->
<script
src="http://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
//vanilla JS사용시
//document.addEventListener('DOMContentLoaded', function(){ //docuemnt(HTML)로드완료시
// document.getElementsByTagName('h1')[0].style.color='red';
//});
$(document).ready(function(){ //docuemnt(HTML)로드완료시
$('h1').css({'color':'red'});
});
$(function(){ //docuemnt(HTML)로드완료시($(document).ready(function(){})과 동일)
$('h1').css({'color':'red'});
});
</script>
</head>
<body>
<header class="page-header" role="banner">
<h1>Create jquery Sample</h1>
</header>
<div class="page-main" role="main">
<div id="typo">
<div class="inner">Creative jQuery</div>
</div>
</div>
</body>
</html>
스크립트파일 분리해서 사용시
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Create jquery Sample</title>
<script
src="http://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<!-- 스크립트파일 분리해서 사용시-->
<script src="js/vendor/main.js"></script>
<!--<script src="js./vendor/main.js"></script> 위와동일-->
</head>
<body>
<header class="page-header" role="banner">
<h1>Create jquery Sample</h1>
</header>
<div class="page-main" role="main">
<div id="typo">
<div class="inner">Creative jQuery</div>
</div>
</div>
</body>
</html>
출처 : www.youtube.com/watch?v=uwn3Y4xzOcw&list=PL-qMANrofLyu4HcK14ntl-o7d-eHxo7-U&index=1
728x90
'프론트엔드 > jQuery' 카테고리의 다른 글
| [jQuery] $(document).ready 여러개 사용 (0) | 2020.12.16 |
|---|---|
| [jQuery] animate메서드 (0) | 2020.11.23 |
| [jQuery] 실행 시점 제어하기,메서드체인 (0) | 2020.11.20 |