JS & HTML 연결. 기본 환경설정

김가오리·2022년 8월 8일
0

JAVASCRIPT

목록 보기
3/35

jQuery 란?

jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리.
따라서 jQuery는 한 개의 JavaScript 파일로 존재하며, 공통의 DOM, 이벤트, 특수 효과, Ajax 함수를 포함.
jQuery를 사용하기 위해, 해당 홈페이지에서 최신 버전(필수 X)의 자바스크립트 파일을 저장해야 함.
jQuery 최신버전 다운로드
출처 : (https://ko.wikipedia.org/wiki/JQuery)

jQuery 기본 구조

jQuery 연결

1. 다운받은 js파일을 작업중인 폴더 안에 넣은 후 script src로 연결

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리연결</title>
<script src="js/jquery-1.6.2.min.js"></script>
</head>

<body>
</body>
</html>

2. CDN을 사용하여 jQuery 이용

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1-1</title>
<!-- 제이쿼리를 연결하라는 명령어  -->

<!-- <script src="js/jquery-3.6.0.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 내 pc사용 X. 구글 경로 사용 -->
</head>

<body>
</body>
</html>

cdn : content delivery network.
콘텐츠 다운시 내 pc에서 가져오지 않고 가까운 서버를 이용하여 로드.

기본구조

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2-2</title>
<!-- 제이쿼리 연결하기 -->
<script src="js/jquery-1.6.2.min.js"></script>
<!-- 제이쿼리 기본구조 -->
<script type="text/javascript">
	// 객체(제어대상). 제어명령(메서드)
	//$().메서드();
	//$().ready();
	//$("").ready();
	$(document).ready( //문서가.준비되면 실행해라();
		function(){ //명령 실행 함수
			//실행될 구체적인 명령들
			//객체.메서드();
			//$("body").css("","");
			$("body").css("background","red"); // body에.스타일을 지정하시오();
		}
	);
</script>
</head>

<body>
</body>
</html>

2개 이상의 css속성 지정

<script>
	$("document").ready(
		function(){
			$("body").css({"background":"yellow","font-size":"14px"});
		}
	);
</script>

마크업태그에 class명 지정 & 함수 실행

<script>
$(document).ready(
	function(){
    	$("h1").addClass("head");
        $("a").click(
        	function(){
            	$("a").addClass("head")
                //a에 클래스 지정
            }
        );
        $("button").hover(function(){
        	$("aside").removeClass("sdown");
            });
            //클래스 지우기
       	$("button").click(function(){
        	$("aside").toggleClass("noticeAni");
         })
         //클래스 값을 넣었다, 뺐다 가능. 
    }  
);
</script>

jQeury 외부로 보내기

jQeury를 작성한 스크립트 부분을 별도의 js파일로 작성.

out.js

$(document).ready(
		function(){
			//h1에 클래스를 붙여라(head)
			$("h1").addClass("head");
			$("aside").addClass("sdown");
			//a를 클릭하면 실행하시오
			$("a").click(
				function(){
					//a에 클래스를 붙이시오(head)
					$("a").addClass("head");
				}
			);
			// 공지사항 닫기클릭애니
			$("aside button").hover(function(){
				$("aside").removeClass("sdown");
			});

			$("aside button").click(function(){
			  $("aside").toggleClass("noticeAni");
			});

		}
	);

html의 script부분에 작성한 js경로 적어주기.

<script src="js/jquery-1.6.2.min.js"></script>
<script src="out.js"></script>
js파일에 $(document).ready()생략하고 싶다면...
  <script defer src="js/out.js"></script>

defer : html 파일을 다 읽은 후, js파일을 실행하여라.

profile
가보자고

0개의 댓글