객체선택
js에서는
- documnet.getElementById(아이디)
- documnet.querySelector(선택자) 를 사용해서 객체를 선택했는데, jQuery에서는 $(선택자) 로 간단하게 표현가능
- 효과(애니메이션), 조작, 이벤트 메서드 제공
- 선택자 필수
기본 사용법: $(선택자).메서드명()
//보다는//가 더 빠르다 //이유는 script문이 클라이언트에서 실행되기 때문에 jquery를 다운받기보다는 //네트워크에서 받아 쓰는게 빠름ㅇㅇ
- .eq( i ) : i번 인덱스 선택 ex) .eq(0).addClass(c);
- .each() : 배열을 반복
조작(메서드)
- .addClass() : 클래스 추가
- .removeClass() : 클래스 삭제
- .toggleClass() : 없으면 추가, 있으면 삭제
- .attr(속성명) : 속성값 리턴
- .attr(속성명, 속성값) : 속성명에 속성값 저장
- .attr(객체) : 여러 속성을 한꺼번에 저장
- .removeAttr(속성명) : 여러 속성 삭제
- .text(값) : 값을 텍스트로 저장
- .text() : 값을 텍스트로 리턴
- .html(값) : 값을 html로 저장
- .html() : 값을 html로 리턴
- .css(속성명) : 스타일 속성값 리턴
- .css(속성명, 속성값)
- .css(객체)
- .empty() : 비움(자식만 삭제)
- .append() : A.append(B) B를 A뒤에 추가
- .after() : A.after(B) B를 A 바깥의 뒤에 추가
- .clone() : 객체 복사
- .val() : value값을 리턴해줌
- .val(값) : value값에 값을 저장
- .data() : 사용자 정의 속성 → event6.html 참고
이벤트
- 이벤트명(콜백함수)
- .bind(이벤트명, 콜백함수) : 이벤트명과 콜백함수를 연결시켜준다
- .on(이벤트명,콜백함수), .off(이벤트명, 콜백함수) : 해당이벤트 제거
- .click(콜백) : 클릭이벤트
웹 문서 로딩 순서
요청응답 → 브라우저 문서 해석→ DOM생성 → ready
→ 이미지, css… 로드 → 로딩 완료 → load
- 언제
- 어디(이벤트를 걸 대상 ,선택자)
- 어떤 이벤트(클릭, 오버)
- 이벤트 발생 시 실행함수 (클릭)
효과
- .hide() : 숨김
- .show() : 보임
- .toggle() : 숨김 ↔ 보임
- .slideDonw() : 슬라이딩 →보임
- .slideUp() : 슬라이딩 → 안보임
- .slideToggle() : 슬라이드+토글
- .animate( 객체 , 밀리초 , 콜백 ): 애니메이션
AJAX
- .ajax(객체) : ajax 통신
객체 속성 ←외우기
- url: 주소
- method(type) : get / post
- async : true(기본값) / false, 비동기 여부
- data : 파라미터(서버로 전송할 데이터)
- dataType : 응답데이터 타입
- cache : true(기본값) / false 캐시기능
- success : 응답 성공시 실행함수
- error : 응답 실패시 실행함수
f12 → network →fetch/XHR 클릭하면 페이지에서 비동기 통신하는 파일을 볼 수 있음
→ ajax2.html, ajax3.html
객체선택
js에서는
- documnet.getElementById(아이디)
- documnet.querySelector(선택자) 를 사용해서 객체를 선택했는데, jQuery에서는 $(선택자) 로 간단하게 표현가능
- 효과(애니메이션), 조작, 이벤트 메서드 제공
- 선택자 필수
기본 사용법: $(선택자).메서드명()
//보다는//가 더 빠르다 //이유는 script문이 클라이언트에서 실행되기 때문에 jquery를 다운받기보다는 //네트워크에서 받아 쓰는게 빠름ㅇㅇ
- .eq( i ) : i번 인덱스 선택 ex) .eq(0).addClass(c);
- .each() : 배열을 반복
조작(메서드)
- .addClass() : 클래스 추가
- .removeClass() : 클래스 삭제
- .toggleClass() : 없으면 추가, 있으면 삭제
- .attr(속성명) : 속성값 리턴
- .attr(속성명, 속성값) : 속성명에 속성값 저장
- .attr(객체) : 여러 속성을 한꺼번에 저장
- .removeAttr(속성명) : 여러 속성 삭제
- .text(값) : 값을 텍스트로 저장
- .text() : 값을 텍스트로 리턴
- .html(값) : 값을 html로 저장
- .html() : 값을 html로 리턴
- .css(속성명) : 스타일 속성값 리턴
- .css(속성명, 속성값)
- .css(객체)
- .empty() : 비움(자식만 삭제)
- .append() : A.append(B) B를 A뒤에 추가
- .after() : A.after(B) B를 A 바깥의 뒤에 추가
- .clone() : 객체 복사
- .val() : value값을 리턴해줌
- .val(값) : value값에 값을 저장
- .data() : 사용자 정의 속성 → event6.html 참고
이벤트
- 이벤트명(콜백함수)
- .bind(이벤트명, 콜백함수) : 이벤트명과 콜백함수를 연결시켜준다
- .on(이벤트명,콜백함수), .off(이벤트명, 콜백함수) : 해당이벤트 제거
- .click(콜백) : 클릭이벤트
웹 문서 로딩 순서
요청응답 → 브라우저 문서 해석→ DOM생성 → ready
→ 이미지, css… 로드 → 로딩 완료 → load
- 언제
- 어디(이벤트를 걸 대상 ,선택자)
- 어떤 이벤트(클릭, 오버)
- 이벤트 발생 시 실행함수 (클릭)
효과
- .hide() : 숨김
- .show() : 보임
- .toggle() : 숨김 ↔ 보임
- .slideDonw() : 슬라이딩 →보임
- .slideUp() : 슬라이딩 → 안보임
- .slideToggle() : 슬라이드+토글
- .animate( 객체 , 밀리초 , 콜백 ): 애니메이션
AJAX
- .ajax(객체) : ajax 통신
객체 속성 ←외우기
- url: 주소
- method(type) : get / post
- async : true(기본값) / false, 비동기 여부
- data : 파라미터(서버로 전송할 데이터)
- dataType : 응답데이터 타입
- cache : true(기본값) / false 캐시기능
- success : 응답 성공시 실행함수
- error : 응답 실패시 실행함수
f12 → network →fetch/XHR 클릭하면 페이지에서 비동기 통신하는 파일을 볼 수 있음
→ ajax2.html, ajax3.html
'web-front' 카테고리의 다른 글
[ javaScript ] 간단정리 part 3 (0) | 2024.08.02 |
---|---|
[ javaScript ] 간단정리 part 2 (0) | 2024.08.02 |
[ javaScript ] 간단정리 part 1 (0) | 2024.08.02 |
[ CSS ] css 간단정리 (0) | 2024.08.02 |