[ jQuery ] 간단정리

 

객체선택

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