1. JQuery
- JavaScript를 더 쉽게 사용하기 위해 만들어진 JavaScript 라이브러리
- JavaScript의 DOM은 브라우저 간 호환성이 떨어져 크로스 브라우징이 힘들다.
- 모질라 사의 JavaScript 개발자였던 존 레식이 JavaScript를 이용해 만든 라이브러리 언어
- 호환성 문제 해결
- 쉽고 편리한 애니메이션 효과 기능 구현
1-1. JQuery 라이브러리 연동하기
- 다운로드방식과 네트워크 전송방식이 있다.
- 다운로드방식 : 라이브러리 파일을 직접 내려받아 HTML에 불러오는 방식
네트워크 상태와 관련없이 언제든 개발할 수 있다. - 네트워크 전송 방식 : 라이브러리 파일을 네트워크를 통해 HTML에 불러오는 방식
간편하게 연동할 수 있다.
1-2. 선택자
- 선택자는 HTML 요소를 선택하여 가져온다.
- CSS선택자 처럼 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다.
- CSS는 정적이지만, JQuery를 사용하면 동적으로 적용할 수 있다.
- DOM을 알아야한다.
- DOM : 모든 태그를 '객체'라고 부르며 객체에는 기능과 속성이 포함되어있다.
- HTML문서의 문서객체구조를 그림으로 표현하면 트리구조가된다.
가장 상위에 위치하는 html은 뿌리 Root라고 부르고, 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 부른다. - 노드의 종류 : 요소 노드(Element Node), 텍스트 노드(Text node), 속성 노드 (Attribute Node)
$("CSS 선택자").css("스타일 속성명","값");
$("CSS 선택자").attr("속성명","값");
- 직접 선택자 :
주로 멀리떨어진 요소를 직접 선택할 때 사용
전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자가 있다. - 전체 선택자 :
전체 요소를 선택할 때 사용
현재 HTML의 모든 태그를 선택
$("*")
- 아이디 선택자 :
아이디 속성에 지정한 값을 포함하는 요소를 선택한다. - 체이닝 기법 :
JQuery에서는 다양한 메서드를 줄줄이 이어서 사용할 수 있다.
메서드 사용이 완료되면 문장 마지막에는 세미콜론(;)을 작성하여 마무리
$(요소선택).css(속성1,값).css(속성2,값2).css(속성3,값3);- 클래스 선택자 :
클래스 속성에 지정한 값을 포함하는 요소를 선택한다. - 요소명 선택자 :
지정한 tag name과 일치하는 요소를 모두 선택한다. - 그룹 선택자 :
한번에 여러개의 요소를 선택할 때 사용한다. - 종속 선택자 :
선택한 요소의 id또는 class 값이 일치하는 요소를 선택할 때 사용한다. - 인접 관계 선택자 :
직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이있는 요소를 선택한다. - 부모요소 선택자 :
선택한 요소를 감싸고 있는 부모 요소를 선택한다.
.parent();
.parents(); // 전체 상위 요소 선택
.closet(); // 가까운 상위요소만 선택- 자식요소 선택자 :
선택한 요소를 기준으로 지정한 자식 요소만 선택한다.
.children();- 형(이전)/동생(다음) 요소 선택자 :
선택한 요소를 기준으로 이전/다음 요소만 선택한다.
.prev();
.next();
.prevAll(); //전체이전
.nextAll(); //전체다음
.siblings(); //형제 요소의 전체선택
.prevUntill();// 범위제한 이전
.nextUntill();// 범위제한 다음
ᴘᴇᴛɪᴛs ᴅᴇ́ᴠᴇʟᴏᴘᴘᴇᴜʀ. ᴘʀᴏɢʀᴀᴍᴍᴀᴛɪᴏɴ = ᴘʟᴀɪsɪʀ 💕