일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 다이나믹프로그래밍
- 프로그래머스
- 그리디알고리즘
- 자료구조
- 컨디션 변수
- DirectX12
- Direct12
- 운영체제
- 병행성 관련 오류
- 렌더링 파이프라인
- 타입 객체
- OS
- 멀티쓰레드
- 디자인패턴
- 쓰레드
- 락
- codility
- 파일시스템 구현
- 병행성
- 멀티프로세서
- 영속성
- 백준
- 스케줄링
- DirectX 12
- directx
- 동적계획법
- 알고리즘
- 다이나믹 프로그래밍
- 그리디 알고리즘
- I/O장치
- Today
- Total
기록공간
jQuery(제이쿼리) 정리 본문
jQuery는 자바스크립트 라이브러리 일종이다. "write less, do more"를 통해 알 수 있듯이 기존 자바스크립트 문장을 더 적은 라인으로 줄일 수 있다. 또한 라이브러리 자체도 가볍고 설치도 필요없이 사용할 수 있다.
[개요]
-
jQuery 는 빠르고 간결한 자바스크립트 라이브러리이다.
-
HTML DOM 횡단(HTML Document traversing, HTML 요소들을 넘나드는 것), 이벤트 처리, 애니메이션, AJAX 를 단순화 하여 빠른 웹 개발을 가능하게 해준다.
-
다양한 브라우저에 지원된다.
-
라이브러리 자체가 매우 경량 파일이다. (약 90kb 수준의 파일 크기)
-
존 레식(John Resig)에 의해 개발되었다.
[장점]
-
HTML 과 DOM, CSS 의 변경이 매우 간편하다.
-
이벤트 처리가 간편하다.
-
애니메이션 같은 각종 효과를 적용하기 쉽다.
-
AJAX, JSON 과 같은 처리가 간편하다.
-
브라우저 호환성을 해결할 수 있다.
[다운로드 및 라이브러리 포함 방법]
- 다운로드
다운로드를 원한다면 http://jquery.com/ 에서 라이브러리 파일을 다운 받을 수 있다.
- jQuery 를 사용하기 위한 라이브러리 포함
1. 로컬 PC 저장소에 물리적으로 존재하는 경우(다운로드 받은 경우)에는 저장된 파일의 경로까지 직접 지정해 주어야 한다.
<script type="text/javascript" src="juery-x.x.x.js"></script> // x.x.x 는 버전
2. CDN(Content Delivery Network) 으로 직접 경로 지정
<script type="text/javascript" src="http://code.jquery.com/jquery.x.x.x.js"></script> // x.x.x는 버전
3. jQuery UI를 사용하기 위한 CSS 및 라이브러리 포함
<link rel="stylesheet" href="jquery-ui.css"></link>
<script type="text/javascript" src="jquery-x.x.x.js"></script>
<script type="text/javascript" src="jquery-ui-x.x.x.js"></script>
// 또는
<link rel="stylesheet" herf="http://code.jquery.com/ui/x.x.x/temes/ba...css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery...js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/...-ui.js"></script>
[사용 방법]
1. http://jquery.com 에서 파일을 다운로드하여 사용하는 방법
※ 다운로드 받을 수 있는 종류
- production 버전
: 소스를 압축해서(불필요한 공백 및 개행 제거) 웹 서버에서 빠르게 실행할 수 있도록 경량화/최소화 한 버전
- development 버전
: 테스트나 디버깅 또는 코드에 대한 분석을 위해 압축을 하지 않고 가독성을 높여 놓은 버전
(공백 및 개행 처리가 되어 있음)
2. CDB(Content Delivery Network)을 통해 사용하는 방법
웹 페이지를 실행할 때 마다 공객 서버에서 네트워크를 이용해 jQuery를 다운로드 받을 수 있도록 해 주는 개념이다. 별도의 파일을 다운도르 받을 필요 없이 다음과 같은 구문을 통해 포함시킨다.
<script type="text/javascript" src="http://code.jquery.com/jquery.x.x.x.min.js"></script>
// x.x.x는 버전
// min은 production 버전
[참조 및 학습 사이트]
[선택자 구성 방법]
jQuery(선택자).동작()
↓
$(선택자).동작();
--------
선택 요소의 함수를 호출
[대표적인 선택자 3가지]
1. 타입 선택자 (요소 선택자, 엘리먼트 선택자)
페이지 상의 모든 <p> 요소를 선택하고자 할 경우
$("p")
2. 클래스 선택자
<p class="test"> 와 같이 클래스가 test인 요소를 선택하고자 할 경우
#(".test")
3. 아이디 선택자
<p id="text> 와 같이 아이디가 test인 요소를 선택하고자 할 경우
$("#test")
[그 외 선택자]
- $("*") : 모든 요소를 선택한다.
- $(this) : 현재 요소를 선택한다. (따옴표 없음에 유의)
- $("div span") : <div> 요소 안에 있는 (하위의) <span> 요소를 선택한다.
- $("p.test") : <p> 요소 중 test 클래스인 요소를 선택한다.
- $("p:first") : 첫 번째 <p> 요소를 선택한다.
- $("ul li:first") : 첫 번째 <ul> 에서 첫 번째 <li> 요소를 선택한다.
- $("ul li:first-child") : 모든 <ul> 에서 첫 번째 <li> 요소를 선택한다.
- $("[href]") : href 속성을 가진 모든 요소들을 선택한다.
- $("a[target='_blank']") : 모든 <a> 요소들 중 target 속성에 _blank 값을 가진 것들을 선택
- $(":button") : 모든 <button> 요소와 모든 <input type="button"> 을 선택한다.
- $("tr:even") : 모든 짝수 <tr> 요소를 선택한다.
- $("tr:odd") : 모든 홀수 <tr> 요소를 선택한다.
- $("ul > li") : <ul> 요소에서 직계 자손인 <li> 요소만 선택한다.
(다중 리스트 구조로 되어 있을 때...)
:
:
'FrontEnd > JavaScript' 카테고리의 다른 글
로컬 스토리지(Local Storage) (0) | 2021.04.20 |
---|---|
<script>를 <body> 맨 뒤에 삽입하는 이유? (0) | 2021.04.19 |
바닐라 자바스크립트(Vanilla JS)란? (0) | 2021.04.19 |
AJAX 정리 (0) | 2020.12.09 |
자바스크립트 (JavaScript) 간단정리 (0) | 2020.11.21 |