본문 바로가기

개발일지/JavaScript + jquery

[jquery] 다운로드 주의 사항 + 기본 사용법


<다운로드 주의사항>

www.jquery.com 들어가서 다운로드 해주는데 일반 다운로드 하듯이 하면 안 됨

 


최상단에 있는 파일로 다운을 받아야 하는데
일반적인 상황에서는 클릭을 하지만..
클릭을 하면 안 된다.

마우스 오른쪽 클릭 후
다른 이름으로 링크 저장


<html에서 제이쿼리 라이브러리 파일 불러오기>

 <head>
  <script src="../jquery-3.6.0.min.js"></script>
 </head>

head 사이에 파일명만 붙여주고, 뒤에 js만 붙이면 된다. 같은 폴더에 있으면 "jquery-3.6.0.min.js"만 해줘도 되는데 전 폴더에 있어서 ../ 트리구조를 이용했음

 


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <script>
	$(document).ready(function(){
		$("#sample").hide(); 
		});
  </script>
 </head>
 <body>
	<div id="sample">이 div를 지우고 싶다</div>
 </body>
</html>

 

 

제이쿼리를 사용하기 위한 기본형 (문법)

  <script>
	$(document).ready(function(){
		$("#sample").hide(); 
		});
  </script>

 ① $(document).ready(function(){ });

<script>
	$(function(){
		$("#sample").hide(); 
		});
  </script>

② $(function(){ });


body 영역에 모든 문서 객체들을 로딩한 후에 실행문을 실행하는 방법입니다. 둘 중에 하나만 해주면 되는데 빠지면 실행을 할 수 없습니다. 아무래도 1번 보다는 2번이 짧으니까 이걸 많이 사용하겠죠?

 

 

	$(function(){
		$("#sample").hide(); 
		});


그렇다면 $(function(){ }); 안에서는 무슨 일이 벌어지고 있는 걸까? 
$("#sample").hide(); 
마침표(.)를 기준으로 앞은 가져와, 뒤는 처리해 라는 뜻을 갖고 있다. 
말 그대로 #sample -> id가 샘플인 것을 갖고와서
hide(); -> 숨겨라 

 


 

 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <script src="jq-12.js"></script>
 </head>

 

html 파일에서 다른 jqurey 파일을 불러오고 싶다면?
<script src="../jquery-3.6.0.min.js"></script> 제이쿼리 위치를 먼저 불러오고, 내가 불러오고 싶은 제이쿼리 파일을 <script src="jq-12.js"></script> 이렇게 불러오면 된다.