-- Index --
| jQuery | 1. 요소선택자 ( 기본 선택자 ) |
2. 요소선택자 ( 추가 선택자 ) |
3. 요소선택자 ( 필터링 관련 ) |
| 탄생 배경 , 개요 | 아이디 선택자 $('#test01') |
자손,후손 선택자 자손('>') , 후손( ' ' ) |
first(), last() |
| 장점 , 연결 방법 | 태그 선택자 $(p, h1, h2 ) |
속성 선택자 선택자[속성~=값] 등 |
eq(), not() |
| 사용, 활용 | 상태 선택자 ( checked,selected,disabled, enabled) |
filter() |
jQuery 탄생 배경
- jQeury – JS(Java Script)에서 파생된 것
- 사실 안 배워도 된다.
- JS만 가지고 가능하다.
- 근데 왜 배우나?
- JS를 사용하는데 불편한 부분보다 쉽게 사용하기 위해
예를 들어)
- 지금이야 querySelector()를 사용하면 되지만 이전에는
- getElement(s)XXX 이렇게 속성/클래스로 가져왔어야 했다.
- 이게 별로다 귀찮다 해서
- jQuery는 $(‘#userid’); 방식으로 쉽게 원하는 요소를 선택해서 가져올 수 있었다.
- 지금은 쿼리셀렉터 있어서 쿼리셀렉터 사용하는 것이다.
- 기존에 하던 걸로 다되긴 한다.
- 근데 불편하니까
- 좀 더 편하게 작업해라 해서 나온 게 jQuery()
- +@ ajx를 이용할 때 JS로 사용하기가 어렵다. 이거를 jQuery로 사용하면 편리하게 처리할 수 있다.
jQuery 란?
겟엘레먼트 안 쓰고$ _이런걸로 편리하게 사용 가능
jQuery 장점
1. 서로 다른 브라우저에서도 동일하게 작동할 수 있게 해주는 라이브러리
2. 이런 이런 이런 것들 쉽게 이용할 수 있도록 해줌
jQuery 연결 방법
1. 파일 다운로드하여서 사용
compressed. - 줄바꿈 띄어쓰기 없이 쭉 나와있는 버전.
<head> 태그 안쪽에 작성
2. link로 사용 - cdn 방식
부트스트랩의. min처럼
공백/코드 구분 다 빼고 [ 압축 ] 용량 적게 한 거 or 그렇지 않은 거
1. 파일 다운로드하여서 사용하거나
2. 링크 가져와서 cdn 방식으로 사용
jQuery 사용해보기
1. onload 함수 비교
jQuery는 모두 실행됨
jQuery() 는 $ 표시로 대체 가능
onload function 은 (함수)로 대체 가능
2. 온로드 함수의 역할
- 이런 식으로 script가 먼저 되는 상황일 때
- 온로드 있으면 정상실행 .// 없으면 사용안됨. //
- 일반적으로 파일/CND방식사용하므로 온로드 사용해주는 것이 안정적!
window.onload 쉽게 !
## jQuery 방식으로 사용해보자 ##
$(function(){}); 형식으로 사용
온로드 함수 안에 내가 작업할 내용들 실행
jQuery 활용
1. 원하는 요소 가져와서 각 요소의 배경색 빨강으로 변경해보기
- JS로 하려면 가져와서 for문을 이용해야 했던 작업이
- jQuery를 활용하면 이거 한 줄 이면 끝!
jQuery에서는 - 겟 엘리먼트바이ID 형식이 아니라 $('#target) 이렇게 사용
제이쿼리는 배열 형태로 반환 - 0번 인덱스 출력해야 한다..
1. 요소 선택자 ( 기본 선택자 )
1-1. 아이디 선택자
가져와서 css속성 변경해보기
1-2. 태그 선택자
2. 요소 선택자 ( 추가 선택자 )
2-1.자손(>) , 후손(‘ ’) 선택자
## 체이닝 팁
- 여러 개 적용 가능 / 개수 제한 X
- css()함수 return은 this로 그 객체가 리턴된다.
- 변화되고 거기에 다시 css() 적용
- 이런 식으로 작동 - 개수 제한 X
## 제이쿼리+
- 제이쿼리에서 CSS 건드리는 일은 실제 별로 없다.
- 제이쿼리에서는 CSS로 만들어진 클래스 스타일 뗐다 지웠다 하는 경우가 많다.
2-2. 속성 선택자
input [ type=text ] -> 인풋 태그 중에서 타입이 text인 것
: text -> 인풋 태그 중에서 타입이 texttext인 것
: (땡땡)하면 input 태그로 취급
attr – 속성 건드려보기 – (‘속성명’, ‘속성값’) 전달해주기
val – 벨류 건드려보기 - 파라미터 값 넣어주면 그 값으로 바뀐다.
## js로 가져온 DOM요소는 jQuery 메서드 적용 안될 수도 있다.
- jQuery로 요소로 바꿔서 사용하면 된다 $( 요소 ) .
- $( 요소 ) 해주면 jQuery요소로 취급
## .addClass / .removeClass - 클래스를 추가하고 지우기
2-3. 상태 선택자
1. checked 상태 선택자 ( radio, checkbox )
- 체크된 상태인 애들에게 이벤트 적용해보기
- 1-1 체크박스 클릭되면 커지게 만들기
- 1-2 커진 체크박스 다시 작게 만들기
- 체크박스에 변화가 생긴 애들에게 적용해보기 change()
- HTML 전용 attr / JS로 사용하려면 prop() //
- prop()은 HTML에서도 사용 가능
2. select 상태인 요소 가져오기
3. disabled, enabled 상태 선택자 ( input, button 등...)
- 활성화 / 비활성화 버튼
3. 요소 선택자 ( 필터링 관련 선택자 )
1-1. 기본 세팅 및 테스트
2. 필터링 관련 메소드
- 기준이 되는 요소 중 특정 요소만 필터링 해주는 메소드
- first , last , eq, not, filter
1. first() - 리턴 값으로 배열이 나오는데 -- 배열중에서도 첫번째 요소만 가져오겠다.
2. last() - first() 의 반대
3. eq(2) - 2개 가져오겠따 ( 여러개사용불가/인덱스만사용가능 )
4. not() 어떤게 아닌거가져오겠따. ( 해당하지 않는 요소 가져오겠따.)
5.filter - 이런애들만 가져오겠다 ( 해당하는 요소만 가져오겠다. )
요소 선택 끝!
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 7월' 카테고리의 다른 글
| 22.07.12 - [ 7차 시험! - UI 구현 ] (0) | 2022.07.20 |
|---|---|
| 22.07.11 - [ 복습 ] [ DB ] { 구문 , 함수, 집한 연산자, join, trigger} (0) | 2022.07.20 |
| 22.07.07 - [ java 복습 ] 변수, 연산자/제어문, 배열, 객체. 클래스, 상속, String (0) | 2022.07.18 |
| 22.07.05 - [jQuery] [요소 탐색(순회) 메소드] , [함수 content 영역], [함수 요소 생성 및 제거] (0) | 2022.07.14 |
| 22.07.01 - [ JS ] 생성자함수, 클로저, 프로토타입, BOM, DOM, 이벤트모델 (0) | 2022.07.14 |