-- Index --
| 1. 함수 ( 기타 ) | 2. 이벤트 관련 함수 | 3. 마우스 이벤트 | 4. 키보드 이벤트 | 5. 애니메이션 |
| each() | on() | click(), dblclick() | keyup() | hide() |
| addClass() | off() | mouseup() | keydown() | fadein() |
| is() | one() | mouseenter() | val().length | slidedown() |
1. 함수_기타
1.each()
배열의 모든 요소 접근해서 값 가져오기
- JS방식 --- for in 사용해서 인덱스 값으로 출력
- jQuery방식 --- each(객체, 함수) 방식으로 출력
# for in 과 each() 비교해보기
- jQuery 함수 each() 사용해주기 위해서
- 요소를 jQuery객체로 바꿔주어야함----$(arr)
for in 은
- i에 인덱스가 들어온다 - 이 인덱스를 이용해서 값을 얻어온다.
- 배열에 몇 번째 값 obj[i] 이렇게 출력 가능
each() 함수는
- jQuery 객체로 변환 필요 ( $() )
- 두 번째 파라미터인 함수 부분에서 2개의 파라미터(a,b)를 받는데
- a에는 인덱스 --- b에는 요소가 들어온다.
- a와 b출력
2. addClass()
클래스 추가해주기
- JS방식 --- className 에 += 연산자로 이어 붙여서 해서 추가해주었음
- jQuery방식 --- addClass('클래스네임') ;
2-1 스타일 클래스 미리 만들어 놓고 진행
2-2 클래스 추가해주기
- each() 함수로 요소 하나하나 접근해서 클래스 추가
- 스타일 적용으로 확인
### arr.each 부분과 $(elem) 부분 Check!
- 이미 jQuery로 가져온 $(‘#ara1’)이므로 $(arr) 안 해줘도 된다.
- elem은 jQuery 요소가 아닌데 jQuery 함수를 사용하려고 하니 에러 났다. - jQuery요소로 변환 필요
### JS방식으로 클래스 추가해주는 경우 - 주의할 점
- 기존에 있던 클래스 없어지지 않도록 + 해주는 작업 필요.
- 스페이스바 해서 추가 필요! ( 그냥 해버리면 기존 클래스 네임 testst-1으로 추가됨-> test st-1)
3. is()
- 조건에 맞는지 체크하는 함수
- 반환 값은 true / false
요소.is('.isTest') - 클래스 이름이 isTest가 맞는지 체크
- div태그애들 하나하나 다 가져올 것이다
- 하나하나 - 클래스가 .isTest 가 맞는지 체크 – 반환 값은 true/false나온다.
- elem 제이쿼리 요소로 변경 필요.
- elem 대신 this로 사용해도 결과 같다.
2. 이벤트 부여 관련 함수
2-1. on()
- 이벤트 걸기
- 여러 개 한 번에 걸기
- 자식들에게 이벤트 걸기
#이벤트 거는 방법
- 요소.on(이벤트, 함수)
- 요소.이벤트(함수)
#이벤트 여러 개 한 번에 걸기
- on() 함수로 이벤트 동시 처리하는 방법은 on( { } )
- on() 함수의 파라미터로 - 객체를 넣어준다.
- 객체로 - key:value 형식으로 전달 -
- key = 이벤트 / value = 함수
- { 이벤트 : function(){} , 이벤트:functioin{} ~~ }
#실습 : 위의 2개(( 3번 4번 ) 이벤트 한 번에 처리
- temp 객체를 만들어서 on() 함수의 파라미터로 넣어주기
- temp대신 { } 부분 넣어줘도 동일하다.
#자식들에게 이벤트 걸기
- 세팅해놓고
- 이벤트 걸어서 테스트
- .on('click', '자식태그', 함수)
- h1태그와 h2태그에 각각 click이벤트 와 함수 적용됨
- 안녕을 클릭하면 <h1>안녕</h1> 기준으로 함수 실행
- 하이를 클릭하면 <h2>하이</h2> 기준으로 함수 실행
2-2 off()
- 이벤트 제거
2-3 one()
- 한 번만 실행되는 일회용 이벤트 생성
- 한 번 실행되고 나면 더 이상 실행 안됨.
## 최초에 존재하지 않았지만 – 동적으로 내가 만든 애들에게 – 이벤트 걸어줄 때는
## on() 이나 one()이러한 방식으로 걸어주어야 한다.
3. 마우스 이벤트
- 마우스 이벤트 종류 많다. 실습 한 번씩 해보기
#click 보다는 mouseup으로 처리하는 경우 많다.
- 마우스 클릭하는 순간이 아니라 클릭하고 떼기 전에 다른 곳으로 옮기면 클릭 처리 안된다
- 이게 mouseup! - 누른 장소와 떼는 장소 같으면 처리
4. 키보드 이벤트
1. keyup()
- 키보드가 띄어졌을 때 (keyup)이 되었을 때 이벤트 발생
- ex) 사람인 글자 수 세기 / 맞춤법 검사기
2. keydown()
- 키보드가 눌렸을 때 (keydown)이 되었을 때 이벤트 발생
3. val().length
- 글자 수 알아내기
5. 애니메이션
1. hide() - 숨기기
2. show() - 보여주기
3. toggle() - 누를 때마다 상태가 바뀜 (넘락/스크롤락/한영키/같은)
4. fadeIn () - 서서히 숨기기
5. fadeOut() - 서서히 보여주기
6. fadeToggle() - 누를 때마다 반대의 상태로 전환
7.slideDown() - 내려가면서 보여줌
8.slideUp() - 올라가면서 보여줌
9.slideToggle() - 누를 때마다 반대의 상태로 전환해줌
## 파라미터 값을 부여해주면 – ms단위로 – 어느정도 시간에 걸쳐 작동할지 지정 가능
