JQuery
목차
1. 제이쿼리 의미
2. 사용법
3. wrapper
4. 선택자
5. chain & traversing(탐색)
6. 이벤트
1. jQuery란
(element를 선택하는 강력한 방법과 선택된 element들을 효율적으로 재사용할 수 있는 다양한 수단을 제공하는)
자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리이다.
* library : 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
2. 사용법
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3. wrapper
jquery ( element object | css 스타일 선택자 ) <- 노란색으로 표시된 이부분이 래퍼부분이다
인자로 전달된 요소들에 jquery의 기능성을 부가해서 반환한다.
* $ : element
4. 선택자
filter 선택자
- eq : 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
- gt : 인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
- even : 홀수의 인덱스 값을 가진 엘리먼트에 대한 선택자
- odd : 짝수의 인덱스 값을 가진 엘리먼트에 대한 선택자
- first / last
속성선택자 대괄호로 시작하고 앞쪽엔 속성이름 뒤에는 속성 값이 들어오는데 속성값은 "" 나 ''로 감싸져있어야함
또한 속성이름과 속성값 사이에는 = 이 들어가고 =앞에는 어떤 기호가 들어갈 수 있는데 어떤게 들어가느 냐에 따라서 미묘한 차이가 있다
[ 속성이름 = "속성값" ]
* : 속성 모든 값
! : 일치하지 않는
^ : 속성값으로 시작하는 이름
$ : 속성갑으로 끝나는 선택자
target : eq 도 없고 속성값도 없다 => 여러 element 중에 타겟이라는 속성이 있는 element를 찾는것
form선택자
나머지는 여기서 검색해서 찾아보기 !
https://api.jquery.com/category/selectors/
Selectors | jQuery API Documentation
Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Selects elem
api.jquery.com
5. chain
wrapper로 시작해서 API가 제공하는 메소드들을 .(점)으로 연결하여 연속적으로 연결할 수있는게 체인과 비슷하여
체인이라고 한다.
장점 1) 코드가 간결해진다
2) 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함
traversing
chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
즉, 점 다음에 나오는 아이를 ...
ex) jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank');
https://api.jquery.com/category/traversing/
Traversing | jQuery API Documentation
Create a new jQuery object with elements added to the set of matched elements. Add the previous set of elements on the stack to the current set, optionally filtered by a selector. Add the previous set of elements on the stack to the current set. Get the ch
api.jquery.com
6. 이벤트
크로스브라우징의 문제를 해결해줌
bind로 이벤트 핸들러를 설치하고, unbind로 제거
trigger로 이벤트 핸들러를 강제로 실행
click, ready와 같이 다양한 이벤트 헬퍼를 제공함
live를 이용하면 현재 존재하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음