반응형
jQuery
- HTML의 조작을 단순하게 하기위해 설계된 크로스 플랫폼 자바스크립트 라이브러리입니다.
- 존 레식이 2006년 뉴욕시 바캠프에서 공식적으로 소개하였습니다.
- 최근 리액트나 Vue.js같은 자바스크립트 프레임워크가 나오면서 트렌드에 밀리고는 있지만 실무에서는 여전히 많이 사용합니다.
- jQuery의 목적은 웹사이트에서 javascript를 훨씬 쉽게 사용할 수 있도록 하는 것입니다.
라이브러리 적용
- 기본적으로 웹페이지가 라이브러리 없이 인식하는 프론트엔드 언어는 HTML, CSS, Javascript 세가지입니다.
- 그 외의 자바스크립트 프레임워크들을 사용하려면 반드시 라이브러리를 적용해야 합니다.
- 웹페이지에 jQuery를 추가하는 방식은 두 가지가 있습니다.
다운로드 방식
jQuery 라이브러리 파일을 다운로드 받아서 <script>태그에 연결하는 방식입니다.
<script src="제이쿼리파일경로"></script>
CDN 방식
외부 서버(google 등)에 있는 파일을 끌어다 쓰는 방식입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
준비구문
<script>태그가 <body>보다 위쪽에 써있는 경우 먼저 코드를 읽기 때문에 문서객체를 읽지 못한 상태에서 명령이 실행되어 전혀 명령이 적용되지 않습니다. 이를 해결하기 위해 준비구문을 사용하여 문서 객체를 먼저 읽고 스크립트구문을 실행합니다.
준비구문은 크게 세가지 종류를 나뉩니다.
$(document).ready(function(){});
- 이미지나 동영상이 다 읽혀지지 않고 DOM트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할 때 적합합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('h1').css('color','red');
});
</script>
</head>
<body>
<h1>제목태그</h1>
</body>
</html>
$(window).on('load',function(){});
- 화면에 필요한 요소(css, js, image, iframe)들이 웹브라우저에 모두 로딩이 완료된 다음에 실행됩니다.
- $(document).ready(function(){});에 비해 속도가 좀 느립니다.
- 이미지 높이 인식이나, 동영상 시간을 인식 등을 해야 할 때 사용합니다.
- 1.8 버전 이하에선 $(window).load(function(){}); 으로 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(window).on('load',function(){
let h = $('img').height();
$('.load').html(h);
});
</script>
</head>
<body>
<img src="http://placehold.it/200x200" alt="예시이미지">
<h3>load시 이미지 높이인식 : <span class="load"></span></h3>
</body>
</html>반응형
'jQuery' 카테고리의 다른 글
| 6. HTML 요소 관련 메서드 (0) | 2024.09.10 |
|---|---|
| 5. DOM 탐색 메서드 (0) | 2024.08.22 |
| 4. 필터 메서드 (0) | 2024.08.21 |
| 3. 메서드 문법 (0) | 2024.08.20 |
| 2. 선택자 (0) | 2024.08.07 |