728x90
반응형
jQuery는 요새 안쓰는 추세이지만 아직 쓰는 회사가 있다...
// JS와 jQuery 차이점
// 배경 :black
// 글자색 : yellow
// 글자크기 : 20px
//Javascript
document.querySelector("#jsBtn").addEventListener("click",function(){
this.style.backgroundColor="black";
this.style.color="yellow";
this.style.fontSize="20px";
})
//jQuery
$("#jQueryBtn").on("click",function(){
$(this).css("backgroundColor","black").css("color","yellow").css("fontSize","20px");
})
//window.onload 확인
window.onload = function(){
console.log("1"); // 문서 로딩이 완료된 후 수행
}
//window.onload 중복 작성 - > 앞서 작성한 window.onload를 덮어 씌움
window.onload = function(){
console.log(3);
}
console.log(2);
// ready() 함수 확인
$(document).ready(function(){
$("#readyTest").on("click", function(){
alert("클릭");
})
})
//ready()함수 중복 작성 -> 작성한 모든 내용이 적용됨
$(document).ready(function(){
$("#readyTest").css("color","red");
})
//ready()함수 다른 형태
$(function(){
console.log("ready()함수 다른 형태");
})
// ready() + 화살표 함수
$(()=>{console.log("화살표 함수로도 가능");
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_jQuery개요</title>
</head>
<body>
<h1>jQuery란?</h1>
<pre>
기존에 복잡헀던 클라이언트 측 HTML 스크립팅(JS)을
간소화 하기 위해 고안된 Javascript Libraryd이다.
(* 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능)
jQuery는 JS보다 적은양의 코드로 다양하고 풍부한 기능을 제공함
* 단점 : jQuery 라이브러리를 다운로드 받아서 사용 -> 로딩 속도 느림
순수 JS보다 속도가 조금 느림
</pre>
<hr>
<h1>jQuery 라이브러리 연결 방법</h1>
<pre>
jQuery 라이브러리는 .js 확장자로 작성되어 있어
script 태그를 이용하여 연결할 수 있다.
1) jQuery 라이브러리를 다운로드 받아서 직접 연결
- 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름
- 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다.
- jQuery 공식 홈페이지 : https://jquery.com/
- jQuery CDN 코드 제공 페이지 : https://code.jquery.com/
2) CDN(Content Delivery Network)을 이용한 연결 방법
- 장점 : 언제 어디서든 jQuery를 이용할 수 있다.
- 단점 : 온라인 환경에서 이용 가능. 인터넷 속도에 따라 지연이 될수 있다.
</pre>
<h1>JS와 jQuery 차이점</h1>
<button id="jsBtn"> JS버튼</button>
<button id="jQueryBtn"> JQuery버튼</button>
<hr>
<h1>HTML문서 해석 순서와 window.onload / ready()의 차이점</h1>
<pre>
HTML 문서는 기본적으로 위 - > 아래 순서대로 해석된다.
-> 아랫쪽에 작성되어 미해석된 코드는 윗쪽 코드에서 호출할 수 없다!
* window.onload / ready() 공통점
(JS) (jQuery)
- > 윗쪽에 코드가 작성되어도 제일 마지막에 해석(문서 로딩이 끝나는 시점)
- 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
- 단점 : 먼저 해석된느 코드가 너무 많으면 수행되는 시간이 뒤처질 수 있음
* window.onload / ready() 차이점
- window.onload는 페이지 내에서 딱 한번만 작성할 수 있음
- ready()는 여러번 작성 가능
*** ready() 작성방법 3가지 ***
1) jQuery(document).ready(function(){코드;});
2) $(document).ready(function(){코드;});
('$' 기호는 jQuery를 의미한다.)
3) $(function(){코드;});
</pre>
<!-- 1. 라이브러리를 다운로드 받아서 직접 연결 -->
<!-- <script src="js/jquery-3.7.1.min.js"></script> -->
<!-- 2. CDN방식 연결 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- jQuery를 사용하기 위해서는 라이브러리 로딩이 우선적으로 진행되어야 한다. -->
<script src="js/01_jQuery개요.js"></script>
<!-- ready() 함수 확인 테스트 -->
<h1 id="readyTest">ready() test</h1>
</body>
</html>
728x90
반응형
'괴발개발 > jQuery' 카테고리의 다른 글
| jQuery 선택자 (0) | 2024.06.22 |
|---|