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파일을 실행하여라.
가보자고