web-front

[ jQuery ] 간단정리

hanjuCoding 2024. 8. 2. 15:33

 

객체선택

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

  1. 언제
  2. 어디(이벤트를 걸 대상 ,선택자)
  3. 어떤 이벤트(클릭, 오버)
  4. 이벤트 발생 시 실행함수 (클릭)

효과

  • .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

  1. 언제
  2. 어디(이벤트를 걸 대상 ,선택자)
  3. 어떤 이벤트(클릭, 오버)
  4. 이벤트 발생 시 실행함수 (클릭)

효과

  • .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