728x90
JQuery 란?
제이쿼리는 자바스크립트언어를 쉽게 활용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리이다.
- 간결하고 직관적인 문법 : CSS 선택자를 사용해 HTML 요소를 선택하고 조작
- 이벤트 처리 : 다양한 이벤트에 대한 처리를 간편하게 구현
- AJAX 요청 : AJAX 요청을 쉽게 생성하고 처리할 수 있는 기능 제공
- 애니메이션 효과 구현 : HTML 요소에 애니메이션 효과를 쉽게 적용
JQuery 적용
1. JQuery 파일을 다운로드 받은 후 적용
<head>
<script src="JQuery 파일경로"></script>
</head>2. CDN(Content Delivery Network) 을 이용하여 로드 👉 URL 제공
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>JQuery 기본 문법
$(css선택자)
$ 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소에 접근하고, 함수를 정의하여 요소에 원하는 동작을 부여한다.
- Js객체가 아닌 JQuery 객체를 반환한다. 👉 Js와 사용하는 메서드가 다름
- Js객체 -> $( Js객체 ) -> JQuery 객체
$(document).ready(익명함수);: DOM 트리가 준비되었을 때 실행될 코드 설정
💡 자바스크립트의onload="함수명"기능이랑 똑같다
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
// DOM 트리가 모두 완료된 후 호출
$(document).ready(function() {
console.log("ready");
});
</script>
</head>728x90
'Framework & Library > JQeury' 카테고리의 다른 글
| [JQuery] Utility method 유틸리티 메소드 (0) | 2023.07.14 |
|---|---|
| [JQuery] Mainipulation method (0) | 2023.07.14 |
| [JQeury] Attributes method 속성 메소드 (0) | 2023.07.14 |
| [JQuery] Traversing (0) | 2023.07.13 |
| [JQuery] 필터 선택자(Filter Selector) 종류 (0) | 2023.07.13 |
728x90
JQuery 란?
제이쿼리는 자바스크립트언어를 쉽게 활용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리이다.
- 간결하고 직관적인 문법 : CSS 선택자를 사용해 HTML 요소를 선택하고 조작
- 이벤트 처리 : 다양한 이벤트에 대한 처리를 간편하게 구현
- AJAX 요청 : AJAX 요청을 쉽게 생성하고 처리할 수 있는 기능 제공
- 애니메이션 효과 구현 : HTML 요소에 애니메이션 효과를 쉽게 적용
JQuery 적용
1. JQuery 파일을 다운로드 받은 후 적용
<head>
<script src="JQuery 파일경로"></script>
</head>2. CDN(Content Delivery Network) 을 이용하여 로드 👉 URL 제공
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>JQuery 기본 문법
$(css선택자)
$ 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소에 접근하고, 함수를 정의하여 요소에 원하는 동작을 부여한다.
- Js객체가 아닌 JQuery 객체를 반환한다. 👉 Js와 사용하는 메서드가 다름
- Js객체 -> $( Js객체 ) -> JQuery 객체
$(document).ready(익명함수);: DOM 트리가 준비되었을 때 실행될 코드 설정
💡 자바스크립트의onload="함수명"기능이랑 똑같다
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
// DOM 트리가 모두 완료된 후 호출
$(document).ready(function() {
console.log("ready");
});
</script>
</head>728x90
'Framework & Library > JQeury' 카테고리의 다른 글
| [JQuery] Utility method 유틸리티 메소드 (0) | 2023.07.14 |
|---|---|
| [JQuery] Mainipulation method (0) | 2023.07.14 |
| [JQeury] Attributes method 속성 메소드 (0) | 2023.07.14 |
| [JQuery] Traversing (0) | 2023.07.13 |
| [JQuery] 필터 선택자(Filter Selector) 종류 (0) | 2023.07.13 |
