JQuery
자바스크립트를 이용해 만든 라이브러리 언어.
자바스크립트로 만들어진 다양한 함수들의 집합.
자바스크립트가 가지고 있는 "각 브라우저에 따른 호환성 문제"를 해결
쉽고 편리한 애니메이션 효과 기능 구현
1. jquery 사이트에서 라이브러리 파일을 다운받아 웹 문서에 연동
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
2. 온라인에서 파일을 가져오는 방식. CDN (Content Delivery Network)
선택자
자바스크립트가 인터프리터 언어이기에,
일반적으로는 윗단에 선언해놓은 j쿼리가 실행되고 body의 영역이 로딩된다.
이에 문서 객체 로딩 후 j쿼리가 실행되려면 다른 방법을 써야한다.
// 1
$(document).ready( function() {
// 로딩후 실행될 부분
});
// 2
$(function () {
// 로딩후 실행될 부분
});
직접 & 인접 관계 선택자
<body> 영역에 있는 문서 객체를 선택하기위해서.
| 구분 | 종류 | 사용법 | 설 명 |
| 직접 선택자 | 전체 선택자 | $("*") | 모든 요소 선택 |
| id 선택자 | $("#id 명") | id 속성에 지정한 값을 가진 요소 선택 | |
| class 선택자 | $("class 명") | class 속성에 지정한 값을 가진 요소 선택 | |
| 요소명 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들만 선택 | |
| 그룹 선택자 | $("선택1, 선택2, 선택n) | 선택한 요소들을 한 번에 선택 | |
| 인접 관계 선택자 |
부모 요소 선택자 | $("요소 선택").parent() | 선택한 요소의 부모 요소 선택 |
| 상위 요소 선택자 | $("요소 선택").parents() | 상위 요소를 모두 선택 | |
| 하위 요소 선택자 | $("요소 선택 하위 요소") | 선택한 요소의 하위 요소 선택 | |
| 자식 요소 선택자 | $("요소 선택>자식 요소") | 선택한 요소 기준으로 자식 관계에 지정한 요소만 선택 |
|
| 자식 요소들 선택자 | $("요소 선택").children() | 자식 관계에 지정한 요소만 선택 | |
| 형(이전) 요소 선택자 | $("요소 선택").prev() | 선택한 요소의 바로 이전 요소 선택 | |
| 형(이전) 요소들 선택자 | $("요소 선택").prevAll() | 선택한 요소의 이전 요소 모두 선택 | |
| 지정 행(이전) 요소들 선택자 | $("요소 선택").prevUntil("요소명") | 선택한 요소부터 지정한 요소의 이전요소까지 모두 선택 | |
| 동생(다음) 요소 선택자 | $("요소 선택").next() $("요소 선택+다음 요소") |
선택한 요소의 다음 요소 선택 | |
| 동생(다음) 요소들 선택자 | $(요소 선택").nextAll() | 선택한 요소의 다음 요소 모두를 선택 |
'프로그래밍&IT > Javascript & jQuery' 카테고리의 다른 글
| [JQuery] 그외 선택자 (0) | 2021.12.07 |
|---|---|
| [JQuery] 탐색 선택자 / 속성 선택자 (0) | 2021.12.07 |
| [Javascript] events , 이벤트 객체 (0) | 2021.11.25 |
| [Javascript] 문서 객체 모델 (DOM, Document Object Model) (0) | 2021.11.24 |
| [Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) (0) | 2021.11.24 |
