---

Class

---

‣ 보이게(나타나게) 하는 여러 방법

• visibility: visible;
• opacity: 1;
• display: block;
• color: rgba(0,0,0,1);
• position: relative;
  • top: 0;

---

‣ 안 보이게(숨김) 하는 여러 방법

• visibility: hidden; : 존재하지만 보이지 않는다.
• opacity: 0; : 존재하지만 보이지 않는다.(투명)
• display: none; : 존재하지 않는다.
• color: rgba(0,0,0,0); : 존재하지만 보이지 않는다.(글자투명)
• position: relative; : top 속성을 주기 위해서는 position: static;(디폴트)일 수 없다.
  • top: -999999px; : 화면 밖으로 나가서 보이지 않는다.

---

‣ class 속성 추가하기

• : 메소드 체이닝으로 2개의 class 지정하기
  • .addClass('클래스명').addClass('클래스명');
• 공백으로 구분해서 2개의 class 지정하기
  • addClass('클래스명 클래스명');

---

‣ class 속성 제거하기

• removeClass('클래스명');

---

‣ class 속성 확인하기

• hasClass('클래스명')

---

‣ class 속성 토글

• 추가와 제거가 번갈아가면서 적용되는 것

• toggleClass('클래스명')

---

👉jQuery Class속성 활용예제 깃허브(클릭)

---

Event

---

이벤트

• 이벤트 대상 : 이벤트가 동작하는 HTML 구성 요소
  this(JavaScript 객체), 이벤트 객체의 target 속성
• 이벤트 타입 : 이벤트 종류
• 이벤트 리스너 : 이벤트가 발생하면 동작하는 함수
• 이벤트 객체 : 발생한 이벤트의 상세 정보를 가지고 있는 객체

---

jQuery 이벤트

---

‣ 현재 권장하지 않는 이벤트 메소드

• bind()
• live()
• delegate()

‣ 현재 사용하는 이벤트 메소드

• on()
  • 표준 이벤트 모델이므로(addEventListener) 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.

형식

• 일반적인 요소
  • 이벤트대상.on('이벤트타입', 이벤트리스너)
• 이벤트로 생성한 동적 요소
  • 부모요소.on('이벤트타입', 이벤트대상, 이벤트리스너)

‣‣ one()

• 한 번만 동작하는 이벤트를 작성할 수 있다.

형식

이벤트대상.one('이벤트타입', 이벤트리스너)

‣‣ off()

• 등록된 이벤트를 제거한다.

형식

이벤트대상.off('이벤트타입')

‣‣ trigger()

• 이벤트를 강제로 발생시킨다.

형식

이벤트대상.trigger('이벤트타입')

‣‣ 이벤트타입이 곧 이벤트 메소드

• 클릭이벤트 : 이벤트대상.click(이벤트리스너)
• 변경이벤트 : 이벤트대상.change(이벤트리스너)
• 키이벤트 : 이벤트대상.keyup(이벤트리스너)

---

‣ 기본 이벤트 취소

• 이벤트 객체가 가지고 있는 preventDefault() 메소드 호출

---

✍️ jQuery 이벤트 처리

• 이벤트 대상이 여러 개라도 for문 처리가 불필요함
• 이벤트는 가급적 jQuery로 처리를 권장함

---

👉jQuery event처리 활용예제 깃허브(클릭)

---

Object

---

‣ 속성(프로퍼티) 추가

• extend() 메소드

‣ 속성(프로퍼티) 순회

• each() 메소드

$.each(객체, 콜백익명함수(객체의속성을 알아서 꺼냄){

})

• 속성과 값 모두 순회하기
  • 파라미터를 2개로 변경하면 자연스럽게 값도 나오게 됨

$.each(obj, function(p, value){  // 속성, 값
     
})

---

👉jQuery Object 활용예제 깃허브(클릭)

---

Array

---

• each()를 이용한 반복문의 대상은 객체가 될 수도 있고, 배열이 될 수도 있다.

• 배열에 있는 객체를 $.each()로 빼내면 jQuery객체가 아니다.

---

👉jQuery array 활용예제 깃허브(클릭)

---

---