JQUERY

jquery 시작 ready,onload차이점

funfunweb 2023. 6. 27. 16:29

jquery란?

jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만듭니다. 다양성과 확장성의 조합으로 jQuery는 수백만 명의 사람들이 JavaScript를 작성하는 방식을 변경했습니다.

 

라이브러리란(library)?

자주 사용하는 기능과 효과(그들을 실행하는 프로그램)을 javascript 코드로 미리 만들어 두고 재활용할 수 있게 한것

 

jquery library 가지고 오는 방법

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

1. 위에 사이트 들어가서 Download jQuery  클릭하여 다운로드 후 서버에 업로드 후 웹페이지안에 삽입

 

2. cdn 활용  - google cdn 클릭하였음

버전 선택후 복사하여 웹페이지 안에 삽입

head 또는 body 맨 아래에 삽입할 수 있다.

기본 형식

$(document).ready(function(){  //$(function(){});
실행문;
});

ready() : 문서의 로딩이 다 끝나면 이란 뜻으로 dom tree 생성 완료후 호출

 

 

See the Pen jquery ready 넣는 이유 by 정은 (@luchiaChoi) on CodePen.

onload() : 모든 페이지 구성요소 페인팅 완료 후 호출

 

만약 ready()와 onload()함수가 한페이지 않에 다 있다면 우선순위는 ready() -> onload 순으로 실행합니다.

See the Pen jquery ready,load by 정은 (@luchiaChoi) on CodePen.

 

 

See the Pen jquery ready,load by 정은 (@luchiaChoi) on CodePen.

 

 

jquery 를 작성방법  - 식별자 $() 사용

$("선택자")  또는 jQuery("선택자")

 

jquery 사용하다가 $식별자를 사용하는  다른 라이브러리와 겹칠 경우 해결 방법

 

<script>
$.noConflict();  // 이제부터 jquery 는 $ 식별자를 포기하고 jQuery()를 사용함.
</script>

 

$ 대신 다른 것 사용하기

<script>
 $.noConflict(); //이제부터 $식별자 포기하고
     var _$ = jQuery //식별자 _$ 를 사용하겠음 
 </script>

'JQUERY' 카테고리의 다른 글

each메서드  (0) 2023.07.05
항상 최신 jquery 사용  (0) 2023.07.05
waypoint 활용 스크롤 위치에 따른 애니메이션 만들기  (0) 2023.07.05