- jQuery: 자바스크립트를 간편하게 사용할 수 있도록 고안된 라이브러리
2. jQuery 불러오기(import)
1)jQuery 다운로드
- jQuery 홈페이지: https://jquery.com/
- jQuery 다운로드: jQuery 3.7.0(compressed version)
- 우측마우스- 다른 이름으로 저장-JavaScript workspace 폴더에 다운로드
- <head> 태그에 <script> 태그 만들어서 src에서 파일 상대경로 작성하기
2)CDN 활용하여 사용하기
- jQuery 다운로드 클릭
- Using jQuery with a CDN 찾기
- jQuery Core 3.7.0(min version)
- 소스코드 복사하여 <head> 태그 내에 붙여넣기
3. jQuery 문법: $(태그명 또는 선택자).동작함수();
- 요소선택자로 원하는 HTML 요소를 선택하고 선택된 요소에 원하는 동작을 설정
- 동작함수의 종류: .html(), .css(), .on(), .attr()
1)내용 변경하기: $(태그명 또는 선택자).html(“변경할 내용”)
2)스타일 적용하기: $(태그명 또는 선택자).css(‘속성’, ‘값’);
3)다중 스타일 적용하기
- 객체형태 방식: {속성:값} 형태로 여러 속성 작성
- 메소드 체인 방식: .메소드(‘속성’, ‘값)를 여러 개 이어서 작성
4. jQuery 선택자
- 자식 요소 가져오기: $("부모요소").children('조건')
- 부모 요소 가져오기: $("자식요소").parents('조건')
-부모요소에 css 적용하기
*JS 문법: getElementByID(“아이디명”)
*JQuery 문법: $(“#아이디명”)
5. class 변경하기
- addClass(): 새로운 클래스 추가
- removeClass(): 기존 클래스 삭제
6. 이벤트 실행하기: on() 메소드
- 사용방법: $(요소명 또는 선택자).on(이벤트 타입, 이벤트 핸들러)
- 이벤트 종류
7. this 키워드: 호출된 HTML 객체가 저장되는 속성(실행주체)
- 요소명을 작성하는 대신 this 키워드를 사용하여 요소를 가리킴
- JavaScript의 실행내용에 따라 자동으로 변환
- 사용하는 이유
-CPU 부하를 줄여 처리 성능 향상: 선택자를 통해 요소를 수집, 처리
-처리대상이 자동으로 전환되어 같은 코드를 여러 번 사용가능
-여러 선택자를 지정한 경우 처리 시점을 나눌 수 있음
[실습 1]마우스를 올릴 때와 아닐 때의 이벤트 실행
[실습2]증가 버튼을 누르면 숫자 증가, 감소 버튼을 누르면 숫자 감소
'코딩 > JavaScript' 카테고리의 다른 글
| [JS]5. JQuery 실습 (0) | 2023.08.08 |
|---|---|
| [JS]3. 함수&객체 (0) | 2023.08.04 |
| [JS]2. 배열 (1) | 2023.07.14 |
| [JS]1. JS 기초 (1) | 2023.07.12 |